:root {
  --papel: #f6f2ec;
  --hoja: #ffffff;
  --tinta: #2b2622;
  --tinta-suave: #6f665e;
  --acento: #c0573e;
  --acento-oscuro: #9e4330;
  --linea: #e3dbd0;
  --vacio: #f1ece4;
  --sombra: 0 1px 2px rgba(43, 38, 34, .06), 0 8px 24px rgba(43, 38, 34, .10);
  --fuente-titulo: 'Fraunces', Georgia, serif;
  --fuente: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  line-height: 1.5;
}

/* ---------- Vistas ---------- */
.vista { display: none; min-height: 100vh; }
.vista.activa { display: block; }

/* ---------- Botones ---------- */
.btn {
  font: 600 15px/1 var(--fuente);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--tinta);
  background: var(--hoja);
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--tinta); color: var(--hoja); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.btn-destacado { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-destacado:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

.btn-sec { border-color: transparent; background: transparent; }
.btn-sec:hover { background: var(--vacio); color: var(--tinta); }

.btn-grande { font-size: 18px; padding: 16px 30px; background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-grande:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

.btn-chico { font-size: 13px; padding: 6px 12px; border-width: 1px; border-color: var(--linea); }
.btn-peligro:hover { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ---------- Inicio ---------- */
.inicio {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
}
.inicio h1 {
  font: 600 clamp(40px, 8vw, 72px)/1.05 var(--fuente-titulo);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.inicio p {
  max-width: 460px;
  color: var(--tinta-suave);
  font-size: 18px;
  margin: 0 0 32px;
}

/* ---------- Borradores ---------- */
.borradores {
  width: min(calc(100% - 32px), 760px);
  margin: 0 auto 80px;
}
.borradores[hidden] { display: none; }
.borradores h2 { font: 600 28px/1.2 var(--fuente-titulo); margin: 0; }
.borradores-nota { color: var(--tinta-suave); margin: 4px 0 20px; font-size: 15px; }
.lista-borradores { display: grid; gap: 14px; }
.borrador {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 14px;
}
.borrador-miniatura {
  flex: none;
  width: 72px;
  height: 96px;
  border-radius: 4px;
  background: var(--vacio) center / cover no-repeat;
  box-shadow: 0 1px 4px rgba(43, 38, 34, .15);
}
.borrador-info { min-width: 0; flex: 1; }
.borrador-info h3 {
  margin: 0;
  font: 600 20px/1.25 var(--fuente-titulo);
  overflow-wrap: anywhere;
}
.borrador-info p { margin: 4px 0 12px; color: var(--tinta-suave); font-size: 14px; }
.borrador-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(246, 242, 236, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra h2 { font: 600 22px/1.2 var(--fuente-titulo); margin: 0; }
.herramientas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.estado-guardado {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.estado-guardado.ok { color: #2f6b4f; }
.estado-guardado.error { color: var(--acento); }

/* ---------- Álbum ---------- */
.album {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 32px 16px 80px;
}
.vacio {
  max-width: 420px;
  text-align: center;
  color: var(--tinta-suave);
  margin-top: 48px;
  font-size: 17px;
}
.bloque {
  width: min(100%, 560px);
  scroll-margin-top: 90px;
}
.bloque-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.bloque-etiqueta { font-weight: 700; font-size: 14px; color: var(--tinta-suave); }
.bloque-acciones { display: flex; gap: 6px; }

/* ---------- Hoja (tamaño A4) ---------- */
.hoja-marco {
  width: 100%;
  aspect-ratio: var(--proporcion, 210 / 297);
  container-type: size;   /* los tamaños usan el lado más corto (cqmin) */
}
.hoja {
  width: 100%;
  height: 100%;
  background: var(--hoja);
  box-shadow: var(--sombra);
  border-radius: 3px;
  padding: 6cqmin;
  display: grid;
  gap: 3cqmin;
  position: relative;
}
.hoja > *, .hoja .foto { min-width: 0; min-height: 0; }

/* ---------- Lugar de foto ---------- */
.foto {
  position: relative;
  background-color: var(--vacio);
  background-size: cover;
  background-position: center;
  border: 2px dashed #cfc4b5;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.foto:hover, .foto:focus-visible { border-color: var(--acento); outline: none; }
.foto.arrastrando { border-color: var(--acento); background-color: #f6e3dc; }
.foto-ayuda {
  font-size: clamp(9px, 2.6cqmin, 14px);
  color: var(--tinta-suave);
  padding: 4px;
  pointer-events: none;
}
.foto.con-foto {
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: grab;
  touch-action: none;
}
.foto.con-foto.moviendo { cursor: grabbing; }
.foto.con-foto.achicada { outline: 1.5px dashed #cfc4b5; outline-offset: -1.5px; }
.exportando .foto.con-foto.achicada { outline: none; }
.foto.con-foto .foto-ayuda { display: none; }

.foto-controles {
  display: none;
  position: absolute;
  z-index: 8;          /* siempre por encima de los títulos */
  top: 6px;
  right: 6px;
  gap: 4px;
}
/* La foto que se está tocando pasa adelante */
.foto.activa, .foto.moviendo { box-shadow: 0 0 0 3px var(--acento); }
/* Mientras se arrastra, la foto pasa adelante de los títulos para verla entera */
.foto.moviendo { z-index: 4; }
/* El texto que se está escribiendo pasa adelante */
.c2-banda:focus-within { z-index: 6; }
.texto-libre:focus-within, .texto-libre.moviendo { z-index: 7; }
/* Los botones de la foto se ven solo cuando está seleccionada */
.foto.con-foto.activa .foto-controles { display: flex; }
.foto-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 38, 34, .75);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.foto-btn:hover { background: var(--tinta); }
.foto-quitar:hover { background: var(--acento); }

/* ---------- Lugar de texto ---------- */
.texto {
  outline: none;
  border-radius: 3px;
  padding: .1em .25em;
  min-height: 1.2em;
  overflow-wrap: anywhere;
  transition: background-color .15s, box-shadow .15s;
}
.texto[contenteditable]:hover { box-shadow: 0 0 0 1px #d8cdbf; cursor: text; }
.texto[contenteditable]:focus { box-shadow: 0 0 0 2px var(--acento); background: rgba(255, 255, 255, .6); }
.texto:empty::before { content: attr(data-texto); color: #b3a89b; }

/* El tamaño = tamaño base del casillero × escala elegida en la ventanita */
.texto { font-size: calc(var(--base, 4cqmin) * var(--escala, 1)); }
.t-titulo { --base: 7.5cqmin; font-family: var(--fuente-titulo); font-weight: 600; line-height: 1.1; }
.t-grande { --base: 11cqmin; }
.t-sub { --base: 3.6cqmin; color: var(--tinta-suave); letter-spacing: .04em; }
.t-epi { --base: 3cqmin; font-family: var(--fuente-titulo); font-style: italic; line-height: 1.3; text-align: center; }
.t-firma { --base: 3.2cqmin; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

/* ---------- Líneas de texto libres ---------- */
.texto-libre {
  position: absolute;
  z-index: 3;
  max-width: 92%;
}
.t-libre {
  --base: 4.5cqmin;
  min-width: 1.5em;
  white-space: pre-wrap;
  line-height: 1.2;
}
.tl-controles {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  gap: 4px;
  padding-bottom: 4px;
}
.texto-libre:hover .tl-controles,
.texto-libre:focus-within .tl-controles,
.texto-libre.moviendo .tl-controles { display: flex; }
.t-libre:empty { outline: 1px dashed #cfc4b5; }
.tl-boton {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 38, 34, .8);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.tl-mover { cursor: grab; touch-action: none; }
.texto-libre.moviendo .tl-mover { cursor: grabbing; }
.tl-quitar:hover { background: var(--acento); }

/* ---------- Hojas de fotos ---------- */
.hoja-fotos.muchas-fotos { gap: 2.2cqmin; }

/* ---------- Carátula 1: Clásica ---------- */
.caratula-clasica { grid-template-rows: 1fr auto; }
.c1-textos { text-align: center; display: grid; gap: 1.5cqmin; padding: 2cqmin 0 1cqmin; }

/* ---------- Carátula 2: Collage ---------- */
.caratula-collage { padding: 0; gap: 0; }
.caratula-collage > * { grid-area: 1 / 1; }
.c2-grilla { display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 1.5cqmin; padding: 1.5cqmin; }
.c2-grilla .foto { border-width: 1.5px; }
.c2-banda {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 78%;
  background: rgba(255, 255, 255, .94);
  padding: 5cqmin 4cqmin;
  text-align: center;
  box-shadow: var(--sombra);
}

/* ---------- Carátula 3: Minimalista ---------- */
.caratula-minimal { grid-template-rows: auto 1fr auto; padding: 10cqmin 12cqmin; gap: 6cqmin; text-align: center; }
.c3-foto { margin: 0 6cqmin; }

/* ---------- Carátula 4: Polaroid ---------- */
.caratula-polaroid {
  grid-template-rows: auto 1fr;
  background: #efe7da;
  text-align: center;
}
.c4-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 4cqmin 5cqmin;
}
.polaroid {
  margin: 0;
  background: #fff;
  padding: 2.4cqmin 2.4cqmin 1cqmin;
  box-shadow: 0 2px 8px rgba(43, 38, 34, .18);
  display: grid;
  gap: 1cqmin;
}
.polaroid .foto { aspect-ratio: 1; border-width: 1.5px; }
.p1 { transform: rotate(-4deg); }
.p2 { transform: rotate(3deg); }
.p3 { transform: rotate(-1.5deg); grid-column: 1 / -1; justify-self: center; width: calc(50% - 2.5cqmin); }

/* ---------- Carátula 5: Dividida ---------- */
.caratula-dividida { padding: 0; gap: 0; grid-template-columns: 1.1fr 1fr; }
.c5-foto { border: none; border-right: 2px dashed #cfc4b5; border-radius: 0; }
.c5-foto.con-foto { border: none; }
.c5-panel {
  background: #2f3b38;
  color: #f6f2ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4cqmin;
  padding: 6cqmin;
}
.c5-panel .t-sub { color: #c9d3cf; }
.c5-panel .t-firma { margin-top: 8cqmin; color: #e3a48f; }
.c5-panel .texto:empty::before { color: #7f8f8a; }
.c5-panel .texto[contenteditable]:focus { background: rgba(255, 255, 255, .08); }

/* ---------- Separador 1: Simple ---------- */
.separador-simple { align-content: center; text-align: center; }
.s1-centro { display: grid; justify-items: center; gap: 4cqmin; }
.s-linea { width: 18cqmin; height: 2px; background: var(--acento); }

/* ---------- Separador 2: Con foto ---------- */
.separador-con-foto { grid-template-rows: 1.4fr auto 1fr; padding: 8cqmin; gap: 4cqmin; }
.t-parrafo { --base: 3.4cqmin; line-height: 1.55; color: var(--tinta-suave); align-self: start; }

/* ---------- Separador 3: Foto completa ---------- */
.separador-completa { padding: 0; gap: 0; }
.separador-completa > * { grid-area: 1 / 1; }
.s3-foto { border-radius: 0; }
.s3-banda {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 7cqmin;
  padding: 5cqmin;
  background: rgba(255, 255, 255, .94);
  text-align: center;
  display: grid;
  gap: 1.5cqmin;
  box-shadow: var(--sombra);
}
.s3-banda:focus-within { z-index: 6; }

/* ---------- Separador 4: Franja de color ---------- */
.separador-franja { padding: 0; gap: 0; grid-template-rows: auto 1fr; }
.s4-panel {
  background: #2f3b38;
  color: #f6f2ec;
  padding: 12cqmin 9cqmin 9cqmin;
  display: grid;
  gap: 2cqmin;
}
.s4-panel .t-sub { color: #e3a48f; }
.s4-panel .texto:empty::before { color: #7f8f8a; }
.s4-panel .texto[contenteditable]:focus { background: rgba(255, 255, 255, .08); }
.s4-foto { margin: 7cqmin; }

/* ---------- Elegir carátula / separador ---------- */
.nota-selector { margin: 2px 0 0; color: var(--tinta-suave); font-size: 14px; }
.btn-destacado-sec { border-color: var(--acento); color: var(--acento-oscuro); }
.btn-destacado-sec:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-flecha { width: 32px; padding-left: 0; padding-right: 0; }
.btn-chico:disabled { opacity: .35; cursor: default; }
.btn-chico:disabled:hover { background: var(--hoja); color: var(--tinta); }
.grilla-caratulas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 32px 24px;
  padding: 32px 16px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.tarjeta-caratula { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-caratula .hoja-marco { cursor: pointer; transition: transform .15s; }
.tarjeta-caratula .hoja-marco:hover { transform: translateY(-4px); }
.vista-previa, .vista-previa * { pointer-events: none; }
.tarjeta-info h3 { margin: 0; font: 600 20px/1.2 var(--fuente-titulo); }
.tarjeta-info p { margin: 4px 0 12px; color: var(--tinta-suave); font-size: 14px; }

/* ---------- Descargar PDF ---------- */
.exportar {
  width: min(calc(100% - 32px), 560px);
  margin: 0 auto 80px;
  padding: 28px 24px;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 16px;
  text-align: center;
}
.exportar[hidden] { display: none; }
.exportar h2 { font: 600 24px/1.2 var(--fuente-titulo); margin: 0 0 16px; }
.exportar-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.exportar label { font-weight: 700; }
.exportar select {
  font: 600 15px var(--fuente);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--tinta);
  background: var(--hoja);
  color: var(--tinta);
}
.exportar-sangrado {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.exportar-sangrado input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acento); flex: none; }
.exportar-sangrado small { display: block; font-weight: 400; color: var(--tinta-suave); }
.opciones-anillado {
  margin: 12px auto 0;
  max-width: 420px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  text-align: left;
  display: grid;
  gap: 8px;
  transition: border-color .2s, background-color .2s;
}
.opciones-anillado[hidden] { display: none; }
.opciones-anillado legend { font-weight: 700; padding: 0 6px; }
.opciones-anillado label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.opciones-anillado input { margin-top: 4px; accent-color: var(--acento); flex: none; }
.opciones-anillado small { font-weight: 400; color: var(--tinta-suave); }
.opciones-anillado.falta-elegir { border-color: var(--acento); background: #fbf1ed; }

/* Margen para anillado: borde transparente (deja ver el fondo de la hoja)
   y circulitos que simulan los agujeros, solo en el editor */
.hoja.anillado-izq { border-left: var(--margen-anillado) solid transparent; }
.hoja.anillado-der { border-right: var(--margen-anillado) solid transparent; }
.hoja.anillado-izq::after, .hoja.anillado-der::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--margen-anillado);
  background: radial-gradient(circle, rgba(43, 38, 34, .16) 0 1.1cqmin, transparent 1.25cqmin) center top / 100% 4.5cqmin repeat-y;
  pointer-events: none;
}
.hoja.anillado-izq::after { left: calc(-1 * var(--margen-anillado)); }
.hoja.anillado-der::after { right: calc(-1 * var(--margen-anillado)); }
.exportando .hoja::after { display: none; }
.exportar-nota { color: var(--tinta-suave); font-size: 14px; margin: 14px auto 20px; max-width: 420px; }
.btn:disabled { opacity: .5; cursor: wait; }

/* Mientras se genera el PDF: se ocultan ayudas, bordes y botones */
.exportando .hoja { box-shadow: none; border-radius: 0; }
.exportando .foto-controles,
.exportando .foto-ayuda,
.exportando .tl-controles { display: none !important; }
.exportando .t-libre { outline: none !important; }
.exportando .foto.activa { box-shadow: none; z-index: auto; }
.foto-impresion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.exportando .foto:not(.con-foto) { border-color: transparent; }
.exportando .texto:empty::before { content: none; }
.exportando .texto { box-shadow: none !important; background: none !important; }

.progreso {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(246, 242, 236, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.progreso[hidden] { display: none; }
.progreso-caja {
  background: var(--hoja);
  padding: 28px 36px;
  border-radius: 16px;
  box-shadow: var(--sombra);
  text-align: center;
}
.progreso-caja p { margin: 14px 0 0; font-weight: 600; }
.progreso-ruedita {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 4px solid var(--linea);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Ventanita de formato de texto ---------- */
.barra-texto {
  position: fixed;
  z-index: 15;
  width: 236px;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(43, 38, 34, .08), 0 16px 40px rgba(43, 38, 34, .16);
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}
.barra-texto[hidden] { display: none; }
.bt-fila { display: grid; gap: 4px; }
.bt-etiqueta {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-suave);
}
.barra-texto select {
  width: 100%;
  font: 15px var(--fuente);
  padding: 7px 10px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--hoja);
  color: var(--tinta);
}
.bt-tamano { display: flex; align-items: center; gap: 6px; }
.bt-boton {
  font: 700 14px var(--fuente);
  width: 44px;
  height: 34px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--hoja);
  color: var(--tinta);
  cursor: pointer;
}
.bt-boton:hover { background: var(--vacio); }
.bt-alineacion { display: flex; gap: 5px; }
.bt-alineacion .bt-boton { flex: 1; width: auto; display: grid; place-items: center; }
.bt-alineacion svg { width: 18px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bt-boton.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.bt-tam-valor { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-colores { display: flex; align-items: center; gap: 8px; }
.bt-paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: 1; }
.bt-muestra {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(43, 38, 34, .2);
  cursor: pointer;
  padding: 0;
}
.bt-muestra:hover { transform: scale(1.12); }
.bt-color-libre {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: conic-gradient(#e44, #ec4, #4c6, #4ae, #a4e, #e44);
  position: relative;
  flex: none;
}
.bt-color-libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bt-agregar {
  font: 700 14px var(--fuente);
  padding: 9px 10px;
  border: 1.5px dashed var(--acento);
  border-radius: 10px;
  background: #fbf1ed;
  color: var(--acento-oscuro);
  cursor: pointer;
}
.bt-agregar:hover { background: var(--acento); border-style: solid; color: #fff; }

/* ---------- Aviso ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  background: var(--tinta);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .barra { flex-wrap: wrap; }
  .herramientas { width: 100%; }
}

/* =========================================================
   Álbum horizontal
   ========================================================= */
body.orientacion-horizontal .bloque { width: min(100%, 780px); }

/* Carátula Clásica: foto a la izquierda, textos a la derecha */
body.orientacion-horizontal .caratula-clasica {
  grid-template-rows: 1fr;
  grid-template-columns: 1.5fr 1fr;
}
body.orientacion-horizontal .c1-textos { padding: 0 2cqmin; align-self: center; }

/* Carátula Collage: banda un poco más angosta */
body.orientacion-horizontal .c2-banda { width: 60%; }

/* Carátula Minimalista */
body.orientacion-horizontal .caratula-minimal { padding: 7cqmin 16cqmin; gap: 4cqmin; }
body.orientacion-horizontal .c3-foto { margin: 0 10cqmin; }

/* Carátula Polaroid: las 3 fotos en fila */
body.orientacion-horizontal .c4-fotos { grid-template-columns: repeat(3, 1fr); gap: 5cqmin; padding: 0 3cqmin; }
body.orientacion-horizontal .p3 { grid-column: auto; width: auto; justify-self: stretch; }

/* Separador Con foto: foto a la izquierda, textos a la derecha */
body.orientacion-horizontal .separador-con-foto {
  grid-template-areas: "f ." "f t" "f p" "f .";
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 6cqmin;
  row-gap: 3cqmin;
}
body.orientacion-horizontal .separador-con-foto > [data-foto] { grid-area: f; }
body.orientacion-horizontal .separador-con-foto > .t-titulo { grid-area: t; }
body.orientacion-horizontal .separador-con-foto > .t-parrafo { grid-area: p; }

/* Separador Foto completa: banda a la izquierda */
body.orientacion-horizontal .s3-banda { justify-self: start; min-width: 45%; }

/* Separador Franja de color: franja a la izquierda, foto a la derecha */
body.orientacion-horizontal .separador-franja { grid-template-rows: 1fr; grid-template-columns: 1fr 1.3fr; }
body.orientacion-horizontal .s4-panel { padding: 9cqmin; align-content: center; }

/* ---------- Elegir orientación ---------- */
.opciones-orientacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 48px 16px 80px;
}
.tarjeta-orientacion {
  width: min(100%, 280px);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 24px 28px;
  background: var(--hoja);
  border: 2px solid var(--linea);
  border-radius: 18px;
  font: 15px/1.4 var(--fuente);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tarjeta-orientacion:hover, .tarjeta-orientacion:focus-visible {
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
  outline: none;
}
.tarjeta-orientacion strong { font: 600 24px/1.2 var(--fuente-titulo); color: var(--tinta); margin-top: 8px; }
.icono-hoja {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(43, 38, 34, .1);
}
.icono-hoja i { background: #d9cfc2; border-radius: 2px; }
.icono-vertical { width: 104px; height: 146px; grid-template: 1.4fr 1fr / 1fr 1fr; }
.icono-vertical i:first-child { grid-column: 1 / -1; }
.icono-horizontal { width: 168px; height: 118px; grid-template: 1fr 1fr / 1.4fr 1fr; }
.icono-horizontal i:first-child { grid-row: 1 / -1; }

/* ---------- Selector de diseños ---------- */
.vista-previa .foto-ayuda { display: none; }
.grilla-caratulas.grilla-disenos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tarjeta-caratula.actual .hoja { box-shadow: 0 0 0 3px var(--acento), var(--sombra); }
body.orientacion-horizontal .grilla-caratulas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.orientacion-horizontal .grilla-caratulas.grilla-disenos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---------- Barra del editor: todos los botones a la vista ---------- */
.barra-editor { flex-direction: column; align-items: stretch; gap: 8px; }
.barra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grupo-fotos { gap: 6px; }
.grupo-fotos .btn { padding: 8px 12px; font-size: 14px; }
.grupo-etiqueta {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-suave);
  margin-right: 4px;
}
.bloque { scroll-margin-top: 150px; }
@media (max-width: 600px) {
  .grupo-etiqueta { width: 100%; }
  .grupo-fotos .btn { padding: 7px 10px; font-size: 13px; }
}

/* ---------- Color de fondo para todo el álbum ---------- */
body.con-fondo #album .hoja,
body.con-fondo #lista-caratulas .hoja { background-color: var(--fondo-color); }
.selector-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 0;
}
.selector-extra:empty { display: none; }

/* ---------- Hojas con combinaciones de verticales y horizontales ---------- */
.hoja.hoja-combinacion { display: flex; align-items: center; justify-content: center; }
.combinacion { display: grid; gap: var(--gap); min-width: 0; min-height: 0; }
.combinacion-grupo { display: flex; gap: var(--gap); min-width: 0; min-height: 0; }
.combinacion.en-columnas .combinacion-grupo { flex-direction: column; }
.combinacion .foto { min-width: 0; min-height: 0; }

/* Títulos de sección en el selector */
.selector-seccion {
  grid-column: 1 / -1;
  margin: 8px 0 -8px;
  font: 600 20px/1.2 var(--fuente-titulo);
}
.selector-seccion:not(:first-child) { margin-top: 24px; }
.grilla-disenos .tarjeta-info h3 { font: 700 14px/1.3 var(--fuente); margin-bottom: 8px; }

/* ---------- Recuadros de título que cambian de tamaño ---------- */
.banda-ajustable {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.banda-tirador {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(43, 38, 34, .3);
  cursor: nwse-resize;
  touch-action: none;
  display: none;
  z-index: 9;
}
/* En el separador "Foto completa" el recuadro está abajo: la manija va arriba */
.s3-banda .banda-tirador { bottom: auto; top: -9px; cursor: nesw-resize; }
.banda-ajustable:hover .banda-tirador,
.banda-ajustable:focus-within .banda-tirador,
.banda-ajustable.ajustando .banda-tirador { display: block; }
.banda-ajustable:hover, .banda-ajustable.ajustando { outline: 1.5px dashed var(--acento); outline-offset: 2px; }
.exportando .banda-tirador { display: none !important; }
.exportando .banda-ajustable { outline: none !important; }
/* El recuadro del separador "Foto completa" queda centrado (crece para los dos lados) */
.s3-banda { justify-self: center; width: calc(100% - 14cqmin); }
body.orientacion-horizontal .s3-banda { justify-self: start; width: auto; }

/* ---------- Quitar recuadros de fotos ---------- */
.foto.quitado { visibility: hidden; }
.foto-quitar-recuadro {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--hoja);
  color: var(--tinta-suave);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: none;
  z-index: 8;
}
.foto:not(.con-foto):hover .foto-quitar-recuadro,
.foto:not(.con-foto):focus-within .foto-quitar-recuadro { display: block; }
.foto-quitar-recuadro:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.vista-previa .foto-quitar-recuadro, .exportando .foto-quitar-recuadro { display: none !important; }
.btn-recuadros[hidden] { display: none; }

/* Manija para mover el recuadro del título */
.banda-mover {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(43, 38, 34, .85);
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  display: none;
  z-index: 9;
}
.banda-ajustable.ajustando .banda-mover { cursor: grabbing; }
.banda-ajustable:hover .banda-mover,
.banda-ajustable:focus-within .banda-mover,
.banda-ajustable.ajustando .banda-mover { display: block; }
.exportando .banda-mover { display: none !important; }

/* ---------- Guía de uso (pantalla de inicio) ---------- */
.guia {
  width: min(calc(100% - 32px), 760px);
  margin: 0 auto 96px;
}
.guia h2 { font: 600 28px/1.2 var(--fuente-titulo); margin: 0; }
.guia-intro { color: var(--tinta-suave); margin: 4px 0 20px; font-size: 15px; }
.guia-item {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.guia-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font: 600 18px/1.3 var(--fuente-titulo);
  cursor: pointer;
  position: relative;
}
.guia-item summary::-webkit-details-marker { display: none; }
.guia-item summary::after {
  content: '';
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg);
  transition: transform .2s;
  flex: none;
}
.guia-item[open] summary::after { transform: rotate(-135deg); }
.guia-item summary:hover { background: var(--papel); }
.guia-item summary:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.guia-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font: 700 14px/30px var(--fuente);
  text-align: center;
}
.guia-cuerpo { padding: 0 20px 18px 64px; font-size: 15px; line-height: 1.6; }
.guia-cuerpo ol, .guia-cuerpo ul { margin: 0 0 10px; padding-left: 20px; }
.guia-cuerpo li { margin-bottom: 6px; }
.guia-cuerpo p { margin: 0 0 10px; }
.guia-nota {
  background: var(--papel);
  border-left: 3px solid var(--acento);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  color: var(--tinta-suave);
  font-size: 14px;
}
.guia-faq dt { font-weight: 700; margin-top: 10px; }
.guia-faq dd { margin: 2px 0 0; color: var(--tinta-suave); }
@media (max-width: 600px) {
  .guia-cuerpo { padding: 0 16px 16px 20px; }
  .guia-item summary { padding: 14px 16px; font-size: 17px; }
}
.guia-privacidad { border-color: #cfe0d6; }
.guia-privacidad .guia-num { background: #2f6b4f; font-size: 14px; }

/* ---------- Opciones de impresión ---------- */
.exportar-opciones {
  display: grid;
  gap: 12px;
  max-width: 460px;
  margin: 16px auto 0;
}
.exportar-opciones .exportar-sangrado { justify-content: flex-start; margin-top: 0; }
.exportar-aviso {
  max-width: 460px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fbf1ed;
  color: var(--acento-oscuro);
  font-size: 14px;
  text-align: left;
}
.exportar-aviso[hidden] { display: none; }

/* Sin márgenes: las fotos llegan al borde arriba, abajo y del lado de afuera */
.hoja.hoja-fotos.sin-margen { padding-top: 0; padding-bottom: 0; }
.hoja.hoja-fotos.sin-margen.lomo-izq { padding-right: 0; }
.hoja.hoja-fotos.sin-margen.lomo-der { padding-left: 0; }
/* Sin márgenes en hojas con combinaciones: llenar, o pegarse al borde de afuera */
.hoja-combinacion.sin-margen.llenar .combinacion { width: 100% !important; height: 100% !important; }
.hoja-combinacion.sin-margen.lomo-izq { justify-content: flex-end; }
.hoja-combinacion.sin-margen.lomo-der { justify-content: flex-start; }

/* ---------- Diseño automático ---------- */
.hoja.hoja-auto { display: flex; align-items: center; justify-content: center; }
.hoja-auto.sin-margen.lomo-izq { justify-content: flex-end; }
.hoja-auto.sin-margen.lomo-der { justify-content: flex-start; }
.auto-vacio {
  width: 100%;
  height: 100%;
  border: 2px dashed #cfc4b5;
  border-radius: 4px;
  background: var(--vacio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5cqmin;
  text-align: center;
  padding: 6cqmin;
  cursor: pointer;
  color: var(--tinta-suave);
  font-size: clamp(11px, 3cqmin, 16px);
}
.auto-vacio strong { color: var(--tinta); font-size: clamp(13px, 4cqmin, 20px); }
.auto-icono {
  width: 12cqmin;
  height: 12cqmin;
  border-radius: 50%;
  background: var(--hoja);
  display: grid;
  place-items: center;
  font-size: 7cqmin;
  color: var(--acento);
}
.hoja-auto.arrastrando .auto-vacio, .hoja-auto.arrastrando { outline: 3px solid var(--acento); outline-offset: -3px; }
.auto-vacio:hover { border-color: var(--acento); }
.exportando .auto-vacio { visibility: hidden; }
.btn-mas-fotos[hidden] { display: none; }

/* ---------- Encuadre automático y recorte ---------- */
.foto-btn[hidden] { display: none; }
.foto-btn-auto { background: rgba(192, 87, 62, .9); }
.foto.analizando::after {
  content: 'Analizando…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .55);
  font: 700 13px var(--fuente);
  color: var(--tinta);
}
.recorte-fondo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(30, 26, 22, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.recorte-ventana {
  width: min(100%, 900px);
  height: min(100%, 720px);
  background: var(--hoja);
  border-radius: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.recorte-titulo { padding: 16px 20px 8px; display: grid; gap: 2px; }
.recorte-titulo strong { font: 600 20px/1.2 var(--fuente-titulo); }
.recorte-titulo span { color: var(--tinta-suave); font-size: 14px; }
.recorte-area {
  min-height: 0;
  margin: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2622;
  border-radius: 8px;
  overflow: hidden;
}
.recorte-lienzo { position: relative; flex: none; }
.recorte-lienzo img { width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.recorte-marco {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
  outline: 2px solid #fff;
  cursor: move;
  touch-action: none;
  background:
    linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.5) 66.7%, transparent 66.9%),
    linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.5) 66.7%, transparent 66.9%);
}
.recorte-tirador {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid #fff;
  cursor: nwse-resize;
  touch-action: none;
}
.recorte-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 16px; }
.recorte-espacio { flex: 1; }
.foto-controles { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 12px); }

/* ---------- Intercambiar fotos ---------- */
body.modo-intercambio #album .foto:not(.quitado) { cursor: crosshair; outline: 2px dashed var(--acento); outline-offset: -2px; }
body.modo-intercambio #album .foto:not(.quitado):hover { outline-width: 4px; }
.foto.intercambio-origen { box-shadow: 0 0 0 4px var(--acento) !important; outline: none !important; opacity: .75; }