:root {
  /* Paleta compartida con el sistema de Gestión Documental de Eraikuntza */
  --noche: #0b2a4a;
  --azul: #00669e;
  --azul-osc: #00578a;
  --celeste: #4398c8;
  --celeste-claro: #8dbfe3;
  --hielo: #eef4f9;
  --papel: #eef4f9;
  --blanco: #ffffff;
  --tinta: #1d2b38;
  --tinta-2: #5a6b7b;
  --tinta-3: #7d8c99;
  --linea: #d5e0ea;
  --linea-2: #c3d3e0;
  --marca: #00669e;
  --marca-osc: #00578a;
  --marca-tinte: #e3f0f9;
  --resaltador: #fff27a;
  --resaltador-suave: #fff6dc;
  --alerta: #8a5a00;
  --peligro: #b42318;
  --ok: #1f7a4d;
  --radio: 14px;
  --sombra: 0 24px 60px -18px rgba(11, 42, 74, .35), 0 2px 6px rgba(11, 42, 74, .08);
  --ui: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --serif: "Book Antiqua", "Palatino Linotype", Palatino, "URW Palladio L", P052, Georgia, serif;
  --tecnica: var(--serif);
  --informe: var(--serif);
  --barra: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--hielo); color: var(--tinta); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--noche); margin: 0; line-height: 1.25; }
h1 { font-size: 27px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(67, 152, 200, .45); outline-offset: 1px; }
.sobretitulo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--celeste); font-weight: 600; margin: 0 0 6px; }

/* fondo con ondas, igual que Gestión Documental */
.fondo { position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 700px at 85% -10%, #d9e9f6 0%, transparent 60%), linear-gradient(#f4f8fb 0%, #e6eef6 100%); pointer-events: none; }
.fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fondo path { fill: none; stroke: var(--celeste-claro); stroke-width: 2; opacity: .45; }
.fondo path:nth-child(2) { stroke: var(--celeste); opacity: .25; }
.fondo path:nth-child(3) { stroke: var(--azul); opacity: .15; }

/* ---------- barra superior ---------- */
.barra { height: var(--barra); background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.barra-marca { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.barra-logo { height: 46px; width: auto; mix-blend-mode: multiply; }
.barra-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.barra-texto strong { font-family: var(--serif); color: var(--noche); font-size: 17px; white-space: nowrap; }
.barra-texto span { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; }
.barra-nav { display: flex; gap: 4px; }
.barra-nav a { text-decoration: none; color: var(--noche); padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; border: 1.5px solid transparent; }
.barra-nav a:hover { background: #f6fafd; border-color: var(--linea); }
.barra-nav a.activo { color: var(--azul); background: var(--marca-tinte); }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1.5px solid var(--linea); border-radius: 9px; background: var(--blanco); color: var(--noche); font: 600 14px/1 var(--ui); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--celeste); background: #f6fafd; }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: #e9f2f9; border-color: var(--linea); }
.btn.peligro { color: var(--peligro); }
.btn.peligro:hover { border-color: #f5c6c1; background: #fdeceA; }
.btn.chico { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn svg { width: 16px; height: 16px; flex: none; }
input[type=text], input[type=search], textarea, select { font: 15px/1.4 var(--ui); color: var(--tinta); border: 1.5px solid var(--linea); border-radius: 9px; background: rgba(255, 255, 255, .92); padding: 9px 12px; width: 100%; }
input[type=text]:hover, textarea:hover, select:hover { border-color: var(--linea-2); }
input[type=text]:focus, textarea:focus, select:focus { outline: none; border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(67, 152, 200, .18); }
textarea { resize: vertical; min-height: 90px; }
label.campo, div.campo { display: grid; gap: 6px; font-size: 13px; color: var(--noche); font-weight: 600; }
.ayuda { font-size: 13px; color: var(--tinta-2); font-weight: 400; line-height: 1.5; }
input[type=range] { width: 100%; accent-color: var(--azul); }
input[type=checkbox], input[type=radio] { accent-color: var(--azul); width: 16px; height: 16px; }

/* ---------- avisos y diálogo ---------- */
.avisos { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; }
.aviso { background: var(--noche); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; max-width: min(560px, 90vw); box-shadow: var(--sombra); }
.aviso.error { background: var(--peligro); }
.dialogo { border: none; border-top: 4px solid var(--azul); border-radius: var(--radio); padding: 0; width: min(460px, calc(100vw - 32px)); color: var(--tinta); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgba(11, 42, 74, .45); backdrop-filter: blur(2px); }
.dialogo .d-cuerpo { padding: 26px 26px 8px; display: grid; gap: 10px; }
.dialogo .d-acciones { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px 22px; }

/* ---------- acceso ---------- */
body.sin-sesion .barra-nav { display: none; }
.acceso { min-height: calc(100vh - var(--barra)); display: grid; place-items: center; padding: 24px 16px; }
.acceso form { width: min(440px, 100%); gap: 14px; padding: 36px 40px 30px; text-align: left; }
.acceso .logo-acceso { height: 92px; mix-blend-mode: multiply; justify-self: center; }
.acceso h1 { font-size: 24px; text-align: center; }
.acceso .ayuda { text-align: center; }
input[type=password] { font: 15px/1.4 var(--ui); color: var(--tinta); border: 1.5px solid var(--linea); border-radius: 9px; background: rgba(255, 255, 255, .92); padding: 9px 12px; width: 100%; height: 42px; }
input[type=password]:focus { outline: none; border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(67, 152, 200, .18); }
.error-campo { color: var(--peligro); font-size: 13px; background: #fdecea; border: 1px solid #f5c6c1; border-radius: 9px; padding: 8px 12px; }
.error-campo:empty { display: none; }

/* tarjeta blanca con borde superior azul, como las ventanas de Gestión Documental */
.ventana { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); border-top: 4px solid var(--azul); }

/* ---------- inicio ---------- */
.inicio { max-width: 1000px; margin: 0 auto; padding: 40px 20px 80px; }
.inicio-cab { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.inicio-cab h1 { font-size: clamp(24px, 3vw, 32px); }
.inicio-cab .guia { font-family: var(--serif); font-size: 17px; color: var(--tinta-2); margin-top: 4px; }
.nuevo { display: flex; gap: 8px; width: min(460px, 100%); }
.lista { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); border-top: 4px solid var(--azul); }
.fila-proy { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 22px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hielo); transition: background .15s; }
.fila-proy:last-child { border-bottom: none; }
.fila-proy:hover { background: #f6fafd; }
.tira { display: grid; grid-template-columns: repeat(4, 56px); gap: 4px; }
.tira span { width: 56px; height: 44px; background: #e3edf5 center/cover no-repeat; border-radius: 6px; }
.fila-proy h2 { font-size: 18.5px; margin-bottom: 3px; }
.datos-proy { display: flex; gap: 16px; font-size: 13px; color: var(--tinta-2); flex-wrap: wrap; }
.vacio { padding: 56px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--tinta-2); }

/* ---------- proyecto ---------- */
.proy-cab { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--linea); padding: 10px 24px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; position: sticky; top: var(--barra); z-index: 10; }
.proy-cab h1 { font-size: 21px; }
.proy-cab input.proy-nombre { font: 700 22px/1.2 var(--serif); color: var(--noche); border: 1.5px solid transparent; background: transparent; padding: 4px 8px; margin-left: -8px; width: auto; min-width: 200px; flex: 1; }
.proy-cab input.proy-nombre:hover { border-color: var(--linea); }
.proy-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.estado-guardado { font-size: 12.5px; color: var(--tinta-2); min-width: 80px; text-align: right; }
.espacio { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 18px; padding: 0 18px 0 0; height: calc(100vh - var(--barra) - 61px); }
.panel { overflow: auto; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; }
.panel-fotos .panel-cab { background: rgba(238, 244, 249, .94); backdrop-filter: blur(4px); }
.panel-cab .grupo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seleccion-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 0 22px 12px; font-size: 13px; color: var(--tinta-2); }
.seleccion-bar .cuenta { font-weight: 700; color: var(--noche); margin-right: 6px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 4px 22px 40px; }
.panel-fotos.recibiendo { box-shadow: inset 0 0 0 3px var(--celeste); background: rgba(227, 240, 249, .8); }
.foto { position: relative; background: var(--blanco); border-radius: 12px; border: 1.5px solid var(--linea); overflow: hidden; cursor: grab; user-select: none; transition: border-color .15s, box-shadow .15s; }
.foto:hover { border-color: var(--celeste); box-shadow: 0 10px 24px -14px rgba(0, 102, 158, .55); }
.foto:active { cursor: grabbing; }
.foto .marco { aspect-ratio: 4 / 3; background: #e3edf5; display: block; width: 100%; border: none; padding: 0; cursor: pointer; }
.foto .marco img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.foto .pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; font-size: 12px; color: var(--tinta-2); }
.foto .pie .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto .check { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; background: rgba(255, 255, 255, .94); border-radius: 7px; display: grid; place-items: center; }
.foto.sel { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.chip.con-logo { background: var(--marca-tinte); color: var(--azul); }
.chip.sin-logo { background: var(--resaltador-suave); color: var(--alerta); border: 1px solid #f1dea6; }
.chip.en-album { position: absolute; top: 9px; right: 9px; background: var(--noche); color: #fff; font-family: var(--serif); font-size: 12.5px; }
.subiendo { margin: 0 22px 12px; padding: 12px 16px; background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 12px; font-size: 13px; color: var(--noche); }
.subiendo .barra-prog { height: 6px; background: #e3eef7; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.subiendo .barra-prog i { display: block; height: 100%; background: var(--azul); width: 0; transition: width .15s; }

/* álbum */
.panel-album { margin: 16px 0 18px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); border-top: 4px solid var(--azul); }
.panel-album .panel-cab { background: var(--blanco); border-bottom: 1px solid var(--hielo); border-radius: 10px 10px 0 0; }
.album-lista { padding: 6px 0 120px; min-height: calc(100% - 74px); }
.album-lista.recibiendo { background: #fffbe0; }
.it { display: grid; grid-template-columns: 20px 62px 76px minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding: 10px 16px 10px 8px; border-bottom: 1px solid var(--hielo); background: var(--blanco); }
.it.arrastrando { opacity: .4; }
.asa { cursor: grab; color: var(--linea-2); display: grid; place-items: center; height: 100%; }
.asa:hover { color: var(--celeste); }
.num { display: grid; gap: 0; }
.num small { font-size: 11px; color: var(--tinta-2); font-weight: 600; }
.num input { font: 700 27px/1 var(--serif); color: var(--noche); border: 1.5px solid transparent; border-radius: 8px; padding: 2px 4px; width: 100%; background: transparent; font-variant-numeric: tabular-nums; }
.num input:hover { border-color: var(--linea); }
.it .mini { width: 76px; height: 57px; border-radius: 8px; object-fit: cover; background: #e3edf5; display: block; }
.it .nombre input { font-size: 14px; font-family: var(--serif); }
.it .nombre .aviso-logo { font-size: 12px; color: var(--alerta); margin-top: 4px; }
.it-portada { grid-template-columns: 20px minmax(0, 1fr) auto; background: #f6fafd; }
.it-portada .t { font-family: var(--serif); font-weight: 700; color: var(--noche); }
.it-portada .s { font-size: 13px; color: var(--tinta-2); }
.it-texto { grid-template-columns: 20px minmax(0, 1fr) 36px; }
.it-texto .cuerpo-texto { display: grid; gap: 6px; }
.it-texto .etq { font-size: 11px; font-weight: 600; color: var(--tinta-2); letter-spacing: .06em; text-transform: uppercase; }
.it-texto textarea { min-height: 70px; font-size: 14px; font-family: var(--serif); }
.it-texto .img-texto { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.it-texto .img-texto img { height: 44px; border-radius: 6px; border: 1px solid var(--linea); }
.marcador { height: 4px; background: var(--resaltador); margin: -2px 12px; position: relative; z-index: 2; border-radius: 2px; box-shadow: 0 0 0 1px #e6d84f; }
.album-vacio { margin: 18px 20px; border: 2px dashed var(--celeste-claro); border-radius: 12px; padding: 36px 20px; text-align: center; color: var(--tinta-2); display: grid; gap: 6px; background: #f6fafd; }
.album-vacio strong { color: var(--noche); font-family: var(--serif); font-size: 17px; }

/* ---------- editor de logo ---------- */
.editor { position: fixed; inset: 0; z-index: 50; background: #5d6d7c; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.ed-vista { position: relative; display: grid; place-items: center; padding: 28px; overflow: hidden; }
.ed-lienzo { position: relative; background: #4d5c6a; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.ed-lienzo .ed-foto { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.ed-lienzo .ed-marca { position: absolute; cursor: move; user-select: none; -webkit-user-drag: none; touch-action: none; outline: 1.5px dashed rgba(255, 255, 255, .7); outline-offset: 0; }
.ed-cargando { color: #e7eef4; font-size: 15px; }
.ed-panel { background: var(--blanco); padding: 20px 22px 24px; overflow: auto; display: grid; align-content: start; gap: 18px; border-top: 4px solid var(--azul); }
.ed-panel .titulo-foto { font-size: 13px; color: var(--tinta-2); word-break: break-all; }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.marcas button { border: 1.5px solid var(--linea); border-radius: 10px; padding: 6px; background: repeating-conic-gradient(#e9eff4 0 25%, #fff 0 50%) 0 0 / 14px 14px; cursor: pointer; display: grid; gap: 4px; }
.marcas button img { height: 52px; width: 100%; object-fit: contain; }
.marcas button span { font-size: 11.5px; background: #fff; color: var(--noche); border-radius: 4px; }
.marcas button.activo { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.posiciones { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; }
.posiciones button { width: 40px; height: 30px; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 7px; cursor: pointer; position: relative; }
.posiciones button:hover { border-color: var(--celeste); }
.posiciones button i { position: absolute; width: 8px; height: 8px; background: var(--tinta-3); border-radius: 2px; }
.posiciones button.activo { border-color: var(--azul); background: var(--marca-tinte); }
.posiciones button.activo i { background: var(--azul); }
.ctrl { display: grid; gap: 6px; }
.ctrl .fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--noche); font-weight: 600; }
.ctrl .fila output { font-variant-numeric: tabular-nums; color: var(--tinta); }
.ed-acciones { display: grid; gap: 8px; }
.ed-nav { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- portada y ajustes ---------- */
.dos-col { display: grid; grid-template-columns: minmax(340px, 540px) minmax(0, 1fr); gap: 28px; max-width: 1300px; margin: 0 auto; padding: 28px 20px 80px; align-items: start; }
.formulario { display: grid; gap: 18px; }
.bloque { background: rgba(255, 255, 255, .92); border: 1.5px solid var(--linea); border-radius: 12px; padding: 20px 22px; display: grid; gap: 14px; }
.bloque > h2 { font-size: 18px; }
.bloque > .ayuda { margin-top: -8px; }
.filas-portada { display: grid; gap: 10px; }
.fila-portada { display: grid; grid-template-columns: minmax(0, 178px) minmax(0, 1fr) auto; gap: 8px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--hielo); }
.fila-portada:last-child { border-bottom: none; padding-bottom: 0; }
.fila-portada .ctrl-img { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); font-weight: 400; }
.fila-portada .ctrl-img img { height: 40px; max-width: 140px; object-fit: contain; border: 1px solid var(--linea); border-radius: 6px; background: #fff; }
.fila-portada .mover { display: flex; gap: 2px; }
.fila-portada select { margin-top: 6px; font-size: 13px; padding: 5px 8px; }
.vista-previa { position: sticky; top: calc(var(--barra) + 20px); }
.vista-previa .hoja-marco { max-width: 620px; margin: 0 auto; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.img-ajuste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.img-ajuste img { height: 64px; max-width: 160px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; background: repeating-conic-gradient(#e9eff4 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.lista-marcas { display: grid; gap: 10px; }
.lista-marcas .lm { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.lista-marcas .lm img { width: 80px; height: 60px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; background: repeating-conic-gradient(#e9eff4 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.radios { display: flex; gap: 16px; font-size: 14px; font-weight: 400; }
.radios label { display: flex; gap: 6px; align-items: center; }

/* ---------- hoja del informe ----------
   Cada hoja se dibuja SIEMPRE en tamaño carta real (816 × 1056 px = 8,5 × 11 pulgadas)
   y se reduce entera con una escala. Así el texto se ve igual en cualquier pantalla y
   el navegador nunca agranda letras chicas ni desarma el cuadro de la portada. */
.hoja-marco { position: relative; width: 100%; aspect-ratio: 8.5 / 11; overflow: hidden; background: #fff; }
.hoja-marco > .hoja { position: absolute; left: 0; top: 0; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.hoja { --pt: calc(100cqw / 612); position: relative; width: 816px; height: 1056px; container-type: size; background: #fff; overflow: hidden; color: #000; font-family: var(--informe); }
.hoja .h-fondo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 0; pointer-events: none; }
.hoja > :not(.h-fondo) { position: absolute; z-index: 1; }
.h-empresa { left: 14.2%; top: 3.15%; font-size: calc(22 * var(--pt)); line-height: 1.15; white-space: nowrap; }
.h-bajada { left: 14.1%; top: 7.85%; font-size: calc(15 * var(--pt)); line-height: 1.15; font-style: italic; color: #00B0F0; white-space: nowrap; }
.h-web { left: 0; right: 0; top: 89.05%; text-align: center; font-size: calc(14 * var(--pt)); line-height: 1.15; color: #0563C1; text-decoration: underline; }
.h-num { left: 0; right: 0; top: 92.45%; text-align: center; font: italic 700 calc(14 * var(--pt))/1.15 "Calibri Light", Calibri, Carlito, var(--ui); }
.h-contenido { left: 13.9%; right: 13.9%; top: 13.6%; bottom: 13%; }
.h-titulo { left: 13.9%; right: 13.9%; text-align: center; font-weight: 700; font-size: calc(19.5 * var(--pt)); line-height: 1.2; }
.h-cuadro { left: 22.7%; width: 63%; top: 53.5%; border: calc(.75 * var(--pt)) solid #000; padding: 1.2cqh 1.6cqw 1.4cqh; font-size: calc(12 * var(--pt)); line-height: 1.25; }
.h-fila { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: start; min-height: 3.25cqh; }
.h-fila .h-etq { white-space: nowrap; padding-right: 1cqw; }
.h-fila .h-val { font-weight: 700; padding-top: .1cqh; overflow-wrap: anywhere; }
.h-fila.imagen { min-height: 9.4cqh; }
.h-fila.imagen .h-val img { display: block; max-height: 8.4cqh; max-width: 100%; object-fit: contain; margin-top: .3cqh; }
.h-fila.firma { min-height: 7cqh; }
.h-fila.firma .h-val img { display: block; max-height: 6.2cqh; max-width: 60%; object-fit: contain; margin-top: .8cqh; }
.h-insignia { position: absolute; right: 2.3cqw; bottom: 1.1cqh; width: 18.9cqw; }
/* Dos fotos por hoja, lo más grandes posible entre el membrete y el pie de página */
.h-fotos { inset: 0; }
.h-fotos figure { position: absolute; left: 0; right: 0; height: 36.8cqh; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.h-fotos figure:nth-child(1) { top: 14.3%; }
.h-fotos figure:nth-child(2) { top: 51.2%; }
.h-fotos img { display: block; max-width: 76cqw; max-height: 34.3cqh; width: auto; height: auto; min-height: 0; }
/* dos verticales: lado a lado, centradas en la hoja */
.h-fotos.lado { left: 12.5%; right: 12.5%; top: 14.3%; bottom: 12%; inset-inline: 12.5%; display: flex; gap: 2cqw; align-items: center; justify-content: center; }
.h-fotos.lado figure { position: static; height: auto; flex: 1 1 0; min-width: 0; }
.h-fotos.lado img { max-width: 100%; max-height: 66cqh; }
.h-fotos.lado figcaption { max-width: 100%; }
.h-fotos figcaption { font-size: calc(12 * var(--pt)); line-height: 1.25; margin-top: .5cqh; padding: .2cqh 1.2cqw; max-width: 74cqw; flex: none; background: #fff; } /* fondo blanco: la marca de agua no se cruza con la leyenda */
.h-texto { font-size: calc(14 * var(--pt)); line-height: 1.72; overflow: hidden; }
.h-texto h3 { font: 700 calc(14 * var(--pt))/1.5 var(--informe); color: #000; text-decoration: underline; margin: 0 0 1.4cqh; }
.h-texto p { text-align: justify; text-indent: 3.4cqw; margin: 0 0 1.2cqh; }
.h-texto img { display: block; margin: 1.6cqh auto 0; max-width: 100%; max-height: 44cqh; }
.hoja .vacia-foto { width: 46cqw; height: 26cqh; background: #e8ecef; display: grid; place-items: center; color: #8a96a1; font: calc(11 * var(--pt)) var(--ui); }

/* ---------- visor tipo libro ---------- */
.visor { position: fixed; inset: 0; z-index: 40; background: #5d6d7c; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #e7eef4; }
.visor-cab, .visor-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.visor-cab { background: var(--blanco); color: var(--noche); border-bottom: 1px solid var(--linea); }
.visor-cab h1 { font-size: 19px; color: var(--noche); text-align: center; }
.visor-cab > div { flex: 1; display: flex; gap: 8px; align-items: center; }
.visor-cab > div:last-child { justify-content: flex-end; }
.visor-cab .tecla { color: var(--tinta-2); }
.visor-cab .logo-visor { height: 40px; mix-blend-mode: multiply; }
.visor-pie { background: #4d5c6a; }
.visor-pie .btn { background: transparent; color: #e7eef4; border-color: #8193a3; }
.visor-pie .btn:hover { background: rgba(255, 255, 255, .1); border-color: #b9c7d4; }
.escenario { display: flex; overflow: auto; perspective: 2600px; padding: 14px 16px; }
.escenario.ampliado { cursor: grab; }
.escenario.arrastrando { cursor: grabbing; user-select: none; }
.libro { position: relative; margin: auto; flex: none; transition: transform .7s cubic-bezier(.4, .1, .2, 1); }
.zoom { display: flex; gap: 4px; align-items: center; }
.zoom .btn { min-width: 40px; padding: 0 10px; font-size: 18px; }
.zoom .zoom-valor { font-size: 13px; min-width: 72px; font-variant-numeric: tabular-nums; }
.hojaV { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .2, 1); cursor: pointer; }
.hojaV.pasada { transform: rotateY(-180deg); }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.cara .hoja-marco { width: 100%; height: 100%; aspect-ratio: auto; }
.cara.reverso { transform: rotateY(180deg); }
.cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cara.frente::after { background: linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .04) 3.5%, transparent 9%); }
.cara.reverso::after { background: linear-gradient(270deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .04) 3.5%, transparent 9%); }
.cara.vacia { background: transparent; box-shadow: none; }
.libro.simple .hojaV { left: 0; width: 100%; }
.libro.simple .hojaV.pasada { pointer-events: none; }
.libro.simple .cara.frente::after { display: none; }
.cara.vacia::after { display: none; }
.visor-pie .contador { font-family: var(--serif); font-size: 16px; font-variant-numeric: tabular-nums; min-width: 160px; text-align: center; }
.visor-pie .nav { display: flex; gap: 10px; align-items: center; margin: 0 auto; }
.tecla { font-size: 12px; color: #c5d1dc; }
.pila-imp { display: none; }

/* ---------- impresión ---------- */
.imprimir-cab { max-width: 900px; margin: 24px auto 0; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.imprimir-cab .ayuda { max-width: 520px; }
.pila { display: grid; gap: 24px; justify-content: center; padding: 24px 20px 80px; }
.pila .hoja-marco { width: min(816px, calc(100vw - 40px)); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
@page { size: 8.5in 11in; margin: 0; }
@media print {
  html, body { background: #fff !important; min-height: 0; margin: 0 !important; padding: 0 !important; width: 8.5in; }
  #app { margin: 0; padding: 0; }
  .fondo, .no-imprimir, .barra, .avisos, .imprimir-cab, .visor, .proy-cab { display: none !important; }
  .pila, .pila-imp { display: block !important; padding: 0 !important; margin: 0 !important; }
  .pila .hoja-marco { width: 8.5in !important; height: 10.99in !important; aspect-ratio: auto; margin: 0 !important; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; }
  .pila .hoja-marco:last-child { break-after: auto; page-break-after: auto; }
  .pila .hoja-marco > .hoja { transform: none !important; }
}

/* ---------- pantallas angostas ---------- */
@media (max-width: 1000px) {
  .espacio { grid-template-columns: 1fr; height: auto; padding: 0; }
  .panel { overflow: visible; }
  .panel-album { margin: 0 12px 18px; }
  .dos-col { grid-template-columns: 1fr; }
  .vista-previa { position: static; }
  .editor { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ed-panel { max-height: 48vh; }
  .barra-texto span { display: none; }
}
@media (max-width: 640px) {
  .barra { padding: 0 12px; }
  .barra-texto { display: none; }
  .fila-proy { grid-template-columns: 1fr; }
  .it { grid-template-columns: 18px 48px 60px minmax(0, 1fr) 30px; gap: 8px; }
  .it .mini { width: 60px; height: 45px; }
  .visor-cab, .visor-pie { padding: 8px 10px; gap: 8px; }
  .visor-cab > div { min-width: 0; }
  .visor-cab h1 { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .visor .tecla, .visor-cab .logo-visor { display: none; }
  .visor-pie .nav { gap: 6px; }
  .visor-pie .contador { min-width: 0; font-size: 14px; }
  .visor .btn { padding: 0 10px; }
}
/* El giro de las hojas es la función principal del visor, así que se mantiene
   aunque Windows tenga las animaciones desactivadas; solo se acorta un poco. */
@media (prefers-reduced-motion: reduce) {
  .hojaV { transition-duration: .7s; }
}