/* El oscuro es el tema por defecto de Anexalo (elección del usuario,
   no una detección del sistema operativo): se aplica siempre que no
   haya una preferencia explícita guardada. Quien prefiera el claro lo
   activa con el botón de la cabecera (sol/luna); esa elección se
   recuerda en localStorage (ver assets/theme.js) y se aplica aquí
   mediante el atributo data-theme="light" en <html>, puesto por un
   script bloqueante en el <head> antes de pintar nada, para que no
   haya parpadeo del tema equivocado al cargar la página. */
:root{
  --bg: #14181A;
  --bg-inset: #0F1213;
  --surface: #1C2322;
  --surface-border: #2D3634;
  --ink: #E9EEEA;
  --ink-soft: #A9B3AD;
  --muted: #6E7873;
  --accent: #57C4AE;
  --accent-strong: #79D4C0;
  --accent-soft: #1C3833;
  --accent-ink: #0B1B18;
  --local: #79C98E;
  --local-soft: #1E3325;
  --danger: #E0A296;
  --danger-soft: #3A2622;
  --shadow: rgba(0,0,0,0.5);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg: #F6F7F6;
  --bg-inset: #EEF1F0;
  --surface: #FFFFFF;
  --surface-border: #E1E5E3;
  --ink: #1B211F;
  --ink-soft: #545C59;
  --muted: #8A928E;
  --accent: #0E6E62;
  --accent-strong: #0A5A50;
  --accent-soft: #DCEEE9;
  --accent-ink: #F3FBF8;
  --local: #2F7A4A;
  --local-soft: #E1EFE2;
  --danger: #A6452F;
  --danger-soft: #F3DED6;
  --shadow: rgba(20,24,22,0.10);
  color-scheme: light;
}

:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box;}
html, body{ height:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  padding:32px 16px;
  display:flex;
  justify-content:center;
}
.serif{ font-family:var(--font-serif); }
.mono{ font-family:var(--font-mono); }

.app{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.app.wide{ max-width:720px; }

.icon{ width:16px; height:16px; flex:none; display:block; }
.icon.lg{ width:22px; height:22px; }

/* Marca y navegación */
.brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  text-decoration:none;
}
.brand .icon{ color:var(--accent); }
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-name{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-0.01em;
}
.brand-tagline{
  font-family:var(--font-sans);
  font-size:0.66rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.01em;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:999px;
}
.badge.local{
  color:var(--local);
  background:var(--local-soft);
}
.badge .icon{ width:20px; height:20px; }

.theme-toggle{
  width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  border:1px solid var(--surface-border); background:var(--surface);
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--accent); }
.theme-toggle svg{ width:16px; height:16px; }
/* Por defecto (oscuro) se ve el sol: pulsarlo lleva al tema claro.
   En data-theme="light" se ve la luna: pulsarla vuelve al oscuro. */
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

/* Con tantas herramientas, dejar que el menú se envuelva ocupa demasiadas
   filas antes de llegar al contenido de la página — y como el contenedor
   de la web tiene el mismo ancho limitado tanto en móvil como en
   escritorio (es un diseño en columna centrada, no uno que aproveche todo
   el ancho de pantalla), el problema es el mismo en los dos casos. Por
   eso esto no depende del tamaño de pantalla: siempre es una tira
   horizontal de una sola fila, con scroll para ver el resto. */
.toolnav{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
  margin:0 -16px;
  padding-left:16px;
  padding-right:16px;
  /* Barra de scroll fina y discreta, pero VISIBLE: en el móvil se nota
     poco porque ahí se desliza con el dedo, pero en escritorio es la
     única pista de que hay más herramientas fuera de la vista y la
     única forma de arrastrarla con el ratón (no hay gesto táctil). */
  scrollbar-width:thin;
  scrollbar-color:var(--surface-border) transparent;
}
.toolnav::-webkit-scrollbar{ height:6px; }
.toolnav::-webkit-scrollbar-track{ background:transparent; }
.toolnav::-webkit-scrollbar-thumb{
  background:var(--surface-border);
  border-radius:999px;
}
.toolnav::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
.toolnav a{
  font-family:var(--font-mono);
  font-size:0.74rem;
  text-decoration:none;
  color:var(--ink-soft);
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:999px;
  padding:6px 12px;
  white-space:nowrap;
  flex:none;
}
.toolnav a[aria-current="page"]{
  color:var(--accent-ink);
  background:var(--accent);
  border-color:var(--accent);
}

/* Cabecera de página */
.hero{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero h1{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.7rem;
  line-height:1.2;
  margin:0;
}
.hero .lede{
  margin:0;
  font-size:0.98rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.verify-link{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  margin-top:4px;
  font-size:0.82rem; font-weight:600;
  color:var(--accent-strong);
  text-decoration:none;
}
.verify-link .icon{ width:14px; height:14px; flex:none; }
.verify-link:hover{ text-decoration:underline; }

/* Tarjetas */
.card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:14px;
  box-shadow:0 8px 22px -16px var(--shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Tarjetas de herramienta (home) */
.tool-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.tool-card .tool-icon{
  width:44px;height:44px;
  flex:none;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tool-card .tool-icon svg{ width:22px;height:22px; }
.tool-card .tool-body{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.tool-card .tool-title{
  font-weight:600;
  font-size:1.02rem;
}
.tool-card .tool-desc{
  font-size:0.86rem;
  color:var(--ink-soft);
  line-height:1.45;
}
.tool-card .tool-soon{
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* Dropzone */
.dropzone-wrap{ position:relative; }
.dropzone{
  border:1.5px dashed var(--surface-border);
  border-radius:12px;
  padding-block:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  transition:border-color .15s ease, background-color .15s ease;
}
.dropzone-wrap:hover .dropzone,
.dropzone-wrap.drag .dropzone{
  border-color:var(--accent);
  background:var(--accent-soft);
}
/* Variante más baja, solo para Proteger documento: ahí debajo hay una
 * segunda vía (hacer foto) y no hace falta tanto aire como en el resto
 * de herramientas, que solo tienen la zona de arrastrar. */
.dropzone-compact{ padding-block:18px; }
.dropzone .icon{ width:26px;height:26px; color:var(--accent); }
.dropzone .dz-title{ font-size:0.98rem; font-weight:600; }
.dropzone .dz-sub{ font-size:0.82rem; color:var(--muted); }
.file-input-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer;
}

/* Encabezado de sección */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.section-head .label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.section-head .count{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-soft);
}

/* Lista de archivos */
#file-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.file-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:10px;
  padding:9px 10px;
}
.file-row .file-icon{
  width:30px;height:30px; flex:none; border-radius:7px;
  background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.file-row .file-icon svg{ width:15px;height:15px; }
.file-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.file-meta .name{
  font-size:0.9rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-meta .detail{ font-family:var(--font-mono); font-size:0.72rem; color:var(--muted); }
.file-actions{ display:flex; align-items:center; gap:2px; flex:none; }
.icon-btn{
  width:26px;height:26px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover:not(:disabled){ background:var(--surface); border-color:var(--surface-border); color:var(--ink); }
.icon-btn:disabled{ opacity:0.3; cursor:default; }
.icon-btn.danger:hover:not(:disabled){ color:var(--danger); background:var(--danger-soft); border-color:transparent; }
.icon-btn svg{ width:14px;height:14px; }

/* Lista de metadatos detectados */
.meta-list{
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.meta-row{
  display:flex; align-items:baseline; gap:10px;
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:9px;
  padding:8px 10px;
}
.meta-row .meta-key{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted); flex:none; width:150px;
}
.meta-row .meta-val{
  font-size:0.86rem; color:var(--ink);
  overflow-wrap:anywhere;
}

/* Resumen numérico */
.summary-row{
  display:flex; gap:16px; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed var(--surface-border);
}
.stat{ display:flex; flex-direction:column; gap:1px; }
.stat .v{
  font-family:var(--font-mono); font-size:1.05rem;
  font-variant-numeric: tabular-nums; color:var(--ink);
}
.stat .k{ font-size:0.7rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); }

/* Botones */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:0.95rem; font-weight:600;
  color:var(--accent-ink); background:var(--accent);
  border:none; border-radius:10px; padding:13px 18px;
  cursor:pointer; text-decoration:none;
}
.btn-primary:disabled{ opacity:0.4; cursor:default; }
.btn-primary .icon{ color:var(--accent-ink); }
.btn-primary.loading .icon{ animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:0.88rem; font-weight:600;
  color:var(--ink); background:var(--bg-inset);
  border:1px solid var(--surface-border); border-radius:10px; padding:10px 14px;
  cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent-strong); }
.btn-secondary[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong);
}

/* Resultado */
.result-card .result-head{ display:flex; align-items:center; gap:9px; }
.result-card .result-head .icon{ color:var(--local); width:20px;height:20px; }
.result-card .result-head .title{ font-weight:600; font-size:1.02rem; }
.preview-frame{
  width:100%; height:340px; border:1px solid var(--surface-border);
  border-radius:10px; background:var(--bg-inset);
}
.note-box{
  display:flex; gap:9px; background:var(--bg-inset);
  border:1px solid var(--surface-border); border-radius:10px;
  padding:11px 12px; font-size:0.83rem; line-height:1.5; color:var(--ink-soft);
}
.note-box .icon{ flex:none; margin-top:1px; color:var(--muted); }

/* Captura de foto con la cámara (Proteger documento) */
/* Enlace de texto pegado justo debajo de la zona de arrastrar, sin caja ni
 * borde propios — para que se lea como una alternativa a subir archivo
 * (misma acción, otra vía), no como un botón suelto compitiendo con la
 * zona de arrastrar y el aviso de abajo. */
.camera-launch-row{
  margin-top:0; margin-bottom:-4px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.camera-launch-divider{
  display:flex; align-items:center; gap:10px; width:100%; max-width:220px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted);
}
.camera-launch-divider::before, .camera-launch-divider::after{
  content:""; flex:1; height:1px; background:var(--surface-border);
}
.camera-link-btn{
  background:none; border:none; padding:8px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--accent-strong); font-weight:600; font-size:0.98rem; font-family:var(--font-sans);
}
.camera-link-btn:hover{ text-decoration:underline; }
.camera-link-btn .icon{ color:var(--accent-strong); width:22px; height:22px; }

/* Visor en vivo: altura ligada al alto de pantalla (no a la anchura), para
 * que en un móvil siempre quede sitio debajo para el texto de ayuda sin
 * tener que hacer scroll. El botón de disparo y el de cerrar van flotando
 * ENCIMA del propio vídeo (como la cámara nativa), así nunca dependen de
 * cuánto scroll haga falta para llegar a ellos. */
.camera-wrap{
  position:relative; width:100%; max-width:480px; margin:0 auto;
  border-radius:12px; overflow:hidden; background:#000;
  /* "dvh" (alto de viewport dinámico) se recalcula bien al girar la
   * pantalla o cuando la barra del navegador aparece/desaparece; el "vh"
   * normal se queda a veces con un valor viejo hasta que hay algún
   * scroll, dando una caja mal ajustada. Se deja "vh" primero como
   * respaldo para navegadores que no entiendan "dvh". El mínimo sube de
   * 200 a 260px porque con menos no cabe entera la guía de encuadre
   * (proporción de documento) y se recortaba por arriba y por abajo. */
  height:38vh; height:38dvh; min-height:260px; max-height:360px;
}
/* Un móvil en horizontal tiene poquísimo alto de sobra: el padding/gap
 * normal de ".card" deja menos hueco del necesario para que el texto de
 * ayuda de debajo de la cámara se vea sin scroll. Solo en ese caso
 * concreto (horizontal Y bajo, para no afectar a tablet/escritorio) se
 * aprieta la tarjeta de la cámara, recuperando ese aire de sobra. */
@media (orientation: landscape) and (max-height: 500px) {
  #camera-card{ padding:12px; gap:8px; }
  /* El padding normal de la página (32px arriba/abajo) también se come
   * hueco de sobra en un móvil en horizontal, donde el alto total ya es
   * poco; se reduce en este caso concreto para tener más margen con el
   * que trabajar en la cámara (foto más grande Y con aire alrededor, en
   * vez de tener que elegir entre una cosa u otra). */
  body{ padding-top:14px; padding-bottom:14px; }
}
.camera-wrap video{ display:block; width:100%; height:100%; object-fit:cover; }
.camera-guide{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80%; aspect-ratio:1.586/1; border-radius:10px; pointer-events:none;
  border:2px dashed rgba(255,255,255,0.9); box-shadow:0 0 0 999px rgba(0,0,0,0.38);
}
.camera-shutter-btn{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:58px; height:58px; border-radius:50%; padding:0;
  background:rgba(255,255,255,0.95); border:3px solid rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.camera-shutter-btn:active{ transform:translateX(-50%) scale(0.92); }
.camera-shutter-btn .shutter-ring{ width:42px; height:42px; border-radius:50%; background:var(--accent); display:block; }
.camera-close-btn{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; padding:0;
  background:rgba(0,0,0,0.55); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.camera-close-btn svg{ width:15px; height:15px; }

/* Paso de recorte: tras capturar, la guía se convierte en un recuadro con
 * 4 esquinas que se pueden arrastrar, ya colocado por defecto donde
 * estaba la guía (normalmente ya acierta), para que el usuario solo
 * tenga que afinar si hace falta, en vez de depender de una detección de
 * bordes automática (que necesitaría una librería pesada, ver notas del
 * proyecto). */
.camera-crop-wrap{ width:100%; max-width:480px; margin:6px auto; display:flex; justify-content:center; }
.camera-crop-stage{
  /* "inline-block" + el "max-height" lo pone JS en cada foto (ver
   * initCropBox): el recuadro se ajusta exactamente al tamaño real de la
   * imagen (nunca más, nunca menos), así el "overflow:hidden" de aquí
   * abajo (necesario para que la viñeta del recorte no se salga de su
   * sitio) nunca llega a recortar nada de la foto en sí. */
  position:relative; display:inline-block; max-width:100%;
  line-height:0; touch-action:none; overflow:hidden; border-radius:10px;
}
.camera-crop-stage img{
  /* "width:auto" + "height:auto" junto con "max-width"/"max-height" es
   * el patrón estándar para que una imagen quepa entera en un hueco sin
   * deformarse ni recortarse: el navegador elige el tamaño más grande
   * posible que respete la proporción real de la foto y ambos límites.
   * El "max-height" en concreto lo calcula JS según el hueco libre que
   * quede en pantalla (para que, cuando quepa, se vean también el texto
   * de ayuda y los botones sin hacer scroll); por defecto (antes de que
   * JS lo fije) no hay límite, así la imagen ya se ve bien aunque algo
   * falle. El ancho nunca pasa de 480px porque el contenedor tiene ese
   * tope (mismo ancho máximo que la cámara en vivo).
   */
  display:block; max-width:100%; width:auto; height:auto; border-radius:10px;
}
.crop-box{
  position:absolute; border:2px solid var(--accent);
  box-shadow:0 0 0 999px rgba(0,0,0,0.45); cursor:move; touch-action:none;
}
.crop-handle{
  position:absolute; width:24px; height:24px; margin:0;
  background:var(--accent); border:3px solid #fff; border-radius:50%; touch-action:none;
}
.crop-handle[data-handle="tl"]{ left:-12px; top:-12px; cursor:nwse-resize; }
.crop-handle[data-handle="tr"]{ right:-12px; top:-12px; cursor:nesw-resize; }
.crop-handle[data-handle="bl"]{ left:-12px; bottom:-12px; cursor:nesw-resize; }
.crop-handle[data-handle="br"]{ right:-12px; bottom:-12px; cursor:nwse-resize; }

/* "Usar este recorte" y "Repetir foto" deben medir EXACTAMENTE lo mismo
 * sin importar que uno tenga más texto que el otro. flex (v17) y grid
 * con columnas 1fr 1fr (v18/v19) fallaron en el dispositivo real pese a
 * pasar las pruebas automáticas, porque ambos respetan de serie un
 * min-width basado en el contenido de cada hijo (grid) o el
 * estiramiento auto-margin del contenedor (flex). "table-layout:fixed"
 * (v20) reparte el ancho ignorando el contenido, pero puesto
 * DIRECTAMENTE en los <button> tampoco es fiable: los controles de
 * formulario (button, input, select) no siempre respetan "display:
 * table-cell" en todos los navegadores, porque su recuadro lo dibuja a
 * veces el propio motor de "widgets" nativo, no el motor de layout
 * normal — por eso un intento anterior de table-cell en el botón mismo
 * medía igual en los tres pero NO llenaba la columna (se quedaba del
 * ancho de su texto). La solución robusta: las columnas de la tabla
 * son un <span> normal (nunca tiene ese problema), y dentro va el
 * <button> con "width:100%" para llenar su columna entera — el ancho
 * final de cada botón lo decide igual el table-layout:fixed, pero sin
 * pasar por un elemento de formulario como celda. El hueco de 10px
 * entre botones no puede hacerse con "gap" (no existe en table), así
 * que se usa un span intermedio ("camera-actions-gap") como tercera
 * columna de ancho fijo. */
.camera-actions{
  display:table; table-layout:fixed; width:100%; max-width:440px;
  margin:8px auto 14px; border-collapse:separate;
}
.camera-actions-cell{ display:table-cell; width:50%; vertical-align:middle; }
.camera-actions-gap{ display:table-cell; width:10px; padding:0; }
.camera-actions .btn-primary, .camera-actions .btn-secondary{
  width:100%; box-sizing:border-box;
  overflow:hidden; text-overflow:ellipsis;
  padding-top:10px; padding-bottom:10px; padding-left:8px; padding-right:8px;
  white-space:nowrap;
}
.camera-actions .btn-primary{ box-shadow:0 2px 10px rgba(87,196,174,0.35); }
.camera-error{ margin-top:12px; }

/* Añadir el reverso del documento como segunda página */
.add-page-row{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg-inset); border:1px solid var(--surface-border); border-radius:10px;
  padding:12px 14px; margin:14px 0;
}
.add-page-label{ font-size:0.83rem; line-height:1.5; color:var(--ink-soft); }
.add-page-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.add-page-actions .btn-secondary{ flex:1; min-width:170px; }

/* Panel de cada modo (dividir) */
.mode-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Modos (segmented control) */
.mode-switch{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.mode-switch .btn-secondary{ flex:1; min-width:0; }

/* Cuadrícula de miniaturas */
.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:10px;
}
.thumb{
  position:relative;
  border:2px solid var(--surface-border);
  border-radius:9px;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-inset);
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb canvas, .thumb img{
  width:100%; height:100%; object-fit:contain;
  background:#fff;
}
.thumb.selected{ border-color:var(--accent); }
.thumb .check{
  position:absolute; top:5px; right:5px;
  width:18px;height:18px; border-radius:5px;
  background:var(--surface); border:1.5px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.thumb.selected .check{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.thumb .check svg{ width:12px;height:12px; }
.thumb .pagenum{
  position:absolute; bottom:4px; left:5px;
  font-family:var(--font-mono); font-size:0.65rem;
  color:var(--ink-soft); background:var(--surface);
  border-radius:4px; padding:1px 5px;
  opacity:0.9;
}
.thumb .cut{
  position:absolute; top:0; right:-7px; bottom:0;
  width:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.thumb .cut button{
  width:16px;height:16px; border-radius:50%;
  border:1.5px solid var(--surface-border); background:var(--surface);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; line-height:1; padding:0;
}
.thumb .cut.active button{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* Variante de miniatura marcada para eliminar (rojo en vez de acento) */
.thumb.marked{ border-color:var(--danger); }
.thumb.marked .check{ background:var(--danger); border-color:var(--danger); color:var(--accent-ink); }

/* Insignia de rotación sobre una miniatura seleccionada */
.thumb .rotate-badge{
  position:absolute; bottom:5px; right:5px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:none; align-items:center; justify-content:center;
}
.thumb.selected .rotate-badge{ display:flex; }
.thumb .rotate-badge svg{ width:13px; height:13px; transition:transform .15s ease; }

/* Miniatura arrastrable (reordenar páginas) */
.thumb.draggable{ cursor:grab; }
.thumb.dragging{ opacity:0.4; cursor:grabbing; }
.thumb.drag-over{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.thumb .order-badge{
  position:absolute; top:5px; left:5px;
  min-width:20px; height:20px; padding:0 5px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.thumb .move-btns{
  position:absolute; bottom:4px; right:4px; z-index:2;
  display:flex; gap:3px;
}
.thumb .move-btns button{
  width:20px; height:20px; border-radius:5px;
  border:1px solid var(--surface-border); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.thumb .move-btns button:disabled{ opacity:0.3; cursor:default; }
.thumb .move-btns svg{ width:12px; height:12px; }

/* Cuadrícula de resultados (extraer imágenes) */
.image-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:12px;
}
.image-cell{
  display:flex; flex-direction:column; gap:6px;
}
.image-thumb{
  position:relative;
  border:2px solid var(--surface-border); border-radius:9px;
  overflow:hidden; background:var(--bg-inset);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.image-thumb img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.image-thumb.broken{ color:var(--muted); font-size:0.7rem; }
.image-thumb.broken img{ display:none; }
.image-thumb.selected{ border-color:var(--accent); }
.image-thumb .check{
  position:absolute; top:5px; right:5px;
  width:18px;height:18px; border-radius:5px;
  background:var(--surface); border:1.5px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.image-thumb.selected .check{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.image-thumb .check svg{ width:12px;height:12px; }
.image-cell .btn-secondary{ text-align:center; }
.image-select-row{ display:flex; gap:8px; flex-wrap:wrap; }
.image-select-row .btn-secondary{ flex:none; }

.range-field{
  display:flex; flex-direction:column; gap:6px;
}
.range-field label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.range-field input[type="text"]{
  font-family:var(--font-mono); font-size:0.92rem;
  padding:11px 12px; border-radius:9px;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink);
}
.range-field input[type="text"]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.range-field .hint{ font-size:0.78rem; color:var(--muted); }
.range-field .hint.error{ color:var(--danger); }

/* Campos de formulario genéricos (marca de agua y similares) */
.field-group{
  display:flex; flex-direction:column; gap:16px;
}
.check-row{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
}
.check-row input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex:none;
}
.check-row .check-label{
  font-weight:600; font-size:0.94rem;
}
.check-row-desc{
  margin:3px 0 0 28px;
  font-size:0.8rem; color:var(--muted); line-height:1.4;
}
.check-count{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--accent-strong);
  background:var(--accent-soft); border-radius:999px; padding:1px 9px;
  margin-left:2px;
}
.check-count:empty{ display:none; }
.check-count.none{ color:var(--muted); background:var(--bg-inset); }
.check-detail-toggle{
  appearance:none; background:none; border:none; padding:0;
  margin:4px 0 0 28px; font-size:0.8rem; font-weight:600; color:var(--accent-strong);
  cursor:pointer; text-decoration:underline;
}
.check-detail-list{
  list-style:none; margin:8px 0 0 28px; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.check-detail-list li{
  font-size:0.8rem; line-height:1.4; color:var(--ink-soft);
  background:var(--bg-inset); border:1px solid var(--surface-border); border-radius:8px;
  padding:7px 10px;
}
.check-detail-list li .detail-kind{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--accent-strong); display:block; margin-bottom:2px;
}

/* Comparar PDFs: vista de diferencias */
.diff-legend{
  display:flex; gap:16px; margin:2px 0 14px;
  font-size:0.8rem; color:var(--ink-soft);
}
.diff-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.diff-add{
  background:var(--local-soft); color:var(--local);
  text-decoration:none; border-radius:3px; padding:0 2px;
}
.diff-del{
  background:var(--danger-soft); color:var(--danger);
  text-decoration:line-through; border-radius:3px; padding:0 2px;
}
.diff-view{
  font-family:var(--font-mono); font-size:0.8rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word;
  background:var(--bg-inset); border:1px solid var(--surface-border); border-radius:10px;
  padding:12px 14px; max-height:360px; overflow-y:auto;
}
.diff-view .muted{ color:var(--muted); }
.compare-page-card{
  border:1px solid var(--surface-border); border-radius:12px;
  padding:14px; margin-bottom:14px; background:var(--surface);
}
.compare-page-card:last-child{ margin-bottom:0; }
.compare-page-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.compare-page-num{ font-weight:700; font-size:0.92rem; }
.compare-page-status{
  font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
  border-radius:999px; padding:3px 10px;
  background:var(--bg-inset); color:var(--muted);
}
.compare-page-card.status-changed .compare-page-status{ background:var(--accent-soft); color:var(--accent-strong); }
.compare-page-card.status-added .compare-page-status{ background:var(--local-soft); color:var(--local); }
.compare-page-card.status-removed .compare-page-status{ background:var(--danger-soft); color:var(--danger); }
.compare-page-card.status-same .compare-page-status{ background:var(--bg-inset); color:var(--muted); }
.subfields{
  display:flex; flex-direction:column; gap:12px;
  margin-left:8px; padding-left:16px;
  border-left:2px solid var(--surface-border);
}
.field-row{
  display:flex; flex-direction:column; gap:6px;
}
.field-row label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.field-row input[type="text"],
.field-row input[type="number"],
.field-row input[type="password"],
.field-row select{
  font-family:var(--font-sans); font-size:0.92rem;
  padding:11px 12px; border-radius:9px; width:100%;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink);
}
.field-row input[type="text"]:focus,
.field-row input[type="number"]:focus,
.field-row input[type="password"]:focus,
.field-row select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.range-row{
  display:flex; align-items:center; gap:10px;
}
.range-row input[type="range"]{
  flex:1; accent-color:var(--accent);
}
.range-row .range-val{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft);
  min-width:38px; text-align:right;
}
.color-row{
  display:flex; align-items:center; gap:10px;
}
.color-row input[type="color"]{
  width:42px; height:38px; border-radius:8px; border:1px solid var(--surface-border);
  padding:2px; background:var(--surface); cursor:pointer;
}
.file-pick-inline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.file-pick-inline .file-name{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft);
}

/* Tarjeta destacada (home) */
.featured-card{
  background:linear-gradient(155deg, var(--accent-soft), var(--surface) 60%);
  border:1.5px solid var(--accent);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 10px 26px -18px var(--shadow);
}
.featured-card .featured-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--accent-strong); background:var(--surface);
  border:1px solid var(--accent); border-radius:999px; padding:5px 11px;
}
.featured-card h2{
  font-family:var(--font-serif); font-weight:600; font-size:1.3rem; margin:0;
}
.featured-card p{ margin:0; font-size:0.92rem; line-height:1.55; color:var(--ink-soft); }
.featured-card .btn-primary{ align-self:flex-start; margin-top:4px; }

.section-label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); margin:4px 2px 0;
}

/* Subtítulo dentro de una tarjeta, para agrupar herramientas por bloques */
.subsection-label{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--accent-strong); margin:0 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--surface-border);
}
.subsection-label:not(:first-child){ margin-top:22px; }

/* Editor de lienzo (proteger documento). "width:100%; height:auto" (sin
 * tope de alto) deja que el lienzo crezca tanto como haga falta para
 * llenar el ancho disponible — en una foto de cámara en horizontal, con
 * la pantalla del móvil corta de alto, eso puede dar un lienzo más alto
 * que la pantalla entera: se sale por abajo (y los botones de debajo
 * quedan fuera de la vista) y hasta un poco por los lados. Por eso lleva
 * un tope de alto ("max-height"), pero OJO: igual que pasó con la foto
 * del recorte de cámara, poner max-height junto con un "width" fijo al
 * 100% solo recorta el alto sin encoger el ancho a la vez (no son
 * proporcionales entre sí) — así que aquí "width" también es "auto" y
 * el ancho se limita con "max-width" en su lugar; así el navegador
 * respeta los dos topes a la vez y conserva la proporción real de la
 * foto, igual que un "object-fit:contain".
 */
.editor-canvas-wrap{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--surface-border); background:var(--bg-inset);
  touch-action:none; line-height:0;
  width:fit-content; max-width:100%; margin:0 auto;
}
.editor-canvas-wrap canvas{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:45vh; max-height:45dvh;
}
.editor-canvas-wrap.redact-mode canvas{ cursor:crosshair; }
.crop-overlay{ position:absolute; top:0; left:0; pointer-events:none; }

.redact-page-nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:10px;
}
.redact-page-nav #page-indicator{
  font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft);
  min-width:120px; text-align:center;
}

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--font-sans); font-size:0.78rem; font-weight:500;
  padding:7px 12px; border-radius:999px;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink-soft);
  cursor:pointer;
}
.chip:hover{ border-color:var(--accent); color:var(--accent-strong); }
.chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }

.redact-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.redact-toolbar .count{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft);
  margin-left:auto;
}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.toggle-row .check-label{ font-weight:600; font-size:0.94rem; }

/* Texto legal (privacidad, créditos) */
.legal{
  display:flex; flex-direction:column; gap:14px;
  font-size:0.92rem; line-height:1.65; color:var(--ink-soft);
}
.legal h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:1.05rem; color:var(--ink); margin:16px 0 0;
}
.legal h2:first-child{ margin-top:0; }
.legal ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--accent-strong); }

/* Pasos "cómo funciona" */
.how{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.how-step{ display:flex; flex-direction:column; gap:6px; }
.how-step .n{ font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); }
.how-step .t{ font-size:0.87rem; font-weight:600; }
.how-step .d{ font-size:0.79rem; line-height:1.45; color:var(--ink-soft); }
@media (max-width: 480px){ .how{ grid-template-columns:1fr; } }

/* Página de inicio en móvil: el navegador real se come bastante alto con
 * su propia barra de direcciones y la barra inferior, mucho más de lo
 * que una prueba automática en un visor sin esa interfaz deja ver. Se
 * aprieta el espaciado de la cabecera y de la tarjeta destacada (sin
 * tocar el resto de tarjetas) para que el recuadro de "Proteger DNI o
 * nómina" quepa entero en una pantalla de móvil normal sin hacer scroll,
 * en vez de quedar cortado justo por la barra inferior del navegador. */
@media (max-width: 480px){
  body{ padding-top:12px; padding-bottom:16px; }
  .app{ gap:12px; }
  .brand-tagline{ font-size:0.6rem; }
  .hero{ gap:6px; }
  .hero h1{ font-size:1.6rem; }
  .hero .lede{ font-size:0.97rem; line-height:1.5; }
  .verify-link{ margin-top:0; font-size:0.81rem; }
  .card{ padding:19px; }
  .subsection-label{ margin-bottom:9px; padding-bottom:7px; }
  .featured-card{ padding:19px; gap:11px; }
  .featured-card h2{ font-size:1.26rem; }
  .featured-card p{ font-size:0.92rem; line-height:1.5; }
}

footer.note{
  display:flex; flex-direction:column; gap:6px;
  font-size:0.78rem; line-height:1.55; color:var(--muted);
  padding-top:6px; border-top:1px solid var(--surface-border);
}
footer.note strong{ color:var(--ink-soft); }
footer.note .legal-links{ font-size:0.74rem; }
footer.note .legal-links a{ color:var(--muted); }
footer.note .legal-links a:hover{ color:var(--ink-soft); }
.footer-install-btn{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-sans); font-size:0.76rem; font-weight:600;
  color:var(--ink-soft); background:var(--bg-inset);
  border:1px solid var(--surface-border); border-radius:8px; padding:8px 12px;
  cursor:pointer;
}
.footer-install-btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
.footer-install-btn svg{ width:14px; height:14px; flex:none; }

[hidden]{ display:none !important; }

@media (prefers-reduced-motion: no-preference){
  .card{ animation:rise .3s ease; }
  @keyframes rise{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }
}

/* Rellenar y firmar: campos de formulario detectados */
.form-fields-list{
  list-style:none; margin:0 0 4px; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.form-field-row{
  display:flex; flex-direction:column; gap:6px;
  background:var(--bg-inset); border:1px solid var(--surface-border);
  border-radius:10px; padding:10px 12px;
}
.form-field-row label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.form-field-row input[type="text"],
.form-field-row textarea,
.form-field-row select{
  font-family:var(--font-sans); font-size:0.92rem;
  padding:9px 10px; border-radius:8px; width:100%;
  border:1px solid var(--surface-border); background:var(--surface); color:var(--ink);
  resize:vertical;
}
.form-field-row input[type="text"]:focus,
.form-field-row textarea:focus,
.form-field-row select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-field-row .check-row{ font-size:0.9rem; }

/* Rellenar y firmar: navegación de páginas y barra de herramientas */
.page-nav{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding-bottom:2px;
}
.page-nav .page-label{
  font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft);
  min-width:104px; text-align:center;
}
.editor-toolbar{
  display:flex; gap:8px; flex-wrap:wrap;
}
.editor-toolbar .btn-secondary{ flex:1; min-width:130px; }

/* Lienzo con superposición de campos arrastrables */
.fill-canvas-wrap{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--surface-border); background:var(--bg-inset);
}
.fill-canvas-wrap canvas{ display:block; width:100%; height:auto; }
.fill-overlay{
  position:absolute; inset:0; pointer-events:none;
}
.field-box{
  position:absolute;
  pointer-events:auto;
  border:1.5px dashed var(--accent);
  background:rgba(14,110,98,0.06);
  border-radius:6px;
  padding:2px;
  min-width:40px;
}
.field-box.image-box{ padding:0; border-style:solid; }
.field-box textarea{
  display:block; width:180px; min-width:80px; min-height:30px;
  border:none; background:transparent; resize:both; overflow:auto;
  font-family:var(--font-sans); color:#111; padding:2px 4px;
  line-height:1.25;
}
.field-box textarea:focus{ outline:none; }
.field-box img{ display:block; width:100%; height:100%; object-fit:fill; }
.box-handle{
  position:absolute; top:-11px; left:-11px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
}
.box-handle svg{ width:12px; height:12px; }
.box-delete{
  position:absolute; top:-11px; right:-11px;
  width:22px; height:22px; border-radius:50%;
  background:var(--danger); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.box-delete svg{ width:11px; height:11px; }
.box-resize{
  position:absolute; bottom:-9px; right:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent);
  cursor:nwse-resize; touch-action:none;
}
.box-fontctrl{
  position:absolute; bottom:-11px; left:-11px;
  display:flex; gap:2px;
}
.box-fontctrl button{
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--surface-border); background:var(--surface);
  color:var(--ink-soft); font-size:0.75rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}

/* Modal de firma */
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,12,11,0.5);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-box{
  background:var(--surface); border-radius:16px; border:1px solid var(--surface-border);
  max-width:460px; width:100%; max-height:90vh; overflow-y:auto;
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-head h2{ font-size:1.05rem; margin:0; }
.sig-tabs{ display:flex; gap:6px; }
.sig-tab{
  flex:1; font-family:var(--font-sans); font-size:0.82rem; font-weight:600;
  padding:9px 8px; border-radius:9px; text-align:center;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink-soft);
  cursor:pointer;
}
.sig-tab[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }
.sig-pane{ display:flex; flex-direction:column; gap:10px; }
.sigpad-wrap{
  border:1.5px dashed var(--surface-border); border-radius:10px;
  background:
    linear-gradient(var(--surface-border) 1px, transparent 1px) 0 100% / 100% 1px no-repeat,
    var(--surface);
  touch-action:none; overflow:hidden;
}
.sigpad-wrap canvas{ display:block; width:100%; height:160px; cursor:crosshair; }
.sig-type-preview{
  border:1px solid var(--surface-border); border-radius:10px;
  background:var(--surface); min-height:90px;
  display:flex; align-items:center; justify-content:center;
  padding:10px; overflow:hidden;
}
.sig-type-preview span{ font-size:2.2rem; color:#111; line-height:1.1; word-break:break-word; text-align:center; }
.sig-font-row{ display:flex; gap:8px; flex-wrap:wrap; }
.sig-font-row .chip{ font-size:0.86rem; }
.sig-upload-preview{
  border:1px solid var(--surface-border); border-radius:10px;
  background:var(--bg-inset); min-height:90px;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.sig-upload-preview img{ max-width:100%; max-height:140px; }
.modal-actions{ display:flex; gap:8px; }
.modal-actions .btn-secondary, .modal-actions .btn-primary{ flex:1; }

/* Vista previa de texto extraído (PDF a texto) */
.text-preview{
  font-family:var(--font-mono); font-size:0.8rem; line-height:1.5;
  color:var(--ink-soft);
  background:var(--bg-inset); border:1px solid var(--surface-border); border-radius:10px;
  padding:12px 14px; max-height:320px; overflow-y:auto;
  white-space:pre-wrap; word-break:break-word;
  margin:0 0 12px;
}

/* Miniatura de imagen en una lista de archivos (imagen a PDF) */
.file-row .file-thumb{
  width:30px; height:30px; flex:none; border-radius:7px;
  object-fit:cover; background:var(--bg-inset); border:1px solid var(--surface-border);
}

/* Vista previa de Markdown (markdown a PDF) */
.md-preview-wrap{
  background:var(--bg-inset); border:1px solid var(--surface-border); border-radius:10px;
  padding:16px 18px; max-height:420px; overflow-y:auto;
}
.md-preview{ font-family:var(--font-sans); font-size:0.9rem; line-height:1.55; color:var(--ink); }
.md-preview-empty{ color:var(--muted); font-size:0.85rem; margin:0; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6{
  font-family:var(--font-sans); font-weight:700; color:var(--ink); line-height:1.3;
  margin:0.9em 0 0.35em;
}
.md-preview h1:first-child, .md-preview h2:first-child, .md-preview h3:first-child{ margin-top:0; }
.md-preview h1{ font-size:1.5rem; }
.md-preview h2{ font-size:1.25rem; }
.md-preview h3{ font-size:1.1rem; }
.md-preview h4, .md-preview h5, .md-preview h6{ font-size:1rem; }
.md-preview p{ margin:0 0 0.7em; }
.md-preview ul, .md-preview ol{ margin:0 0 0.7em; padding-left:1.4em; }
.md-preview li{ margin:0.15em 0; }
.md-preview a{ color:var(--accent-strong); text-decoration:underline; }
.md-preview code{
  font-family:var(--font-mono); font-size:0.85em; color:#9a2323;
  background:var(--surface); border-radius:4px; padding:0.1em 0.35em;
}
.md-preview pre{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:8px;
  padding:10px 12px; overflow-x:auto; margin:0 0 0.8em;
}
.md-preview pre code{ background:none; padding:0; color:var(--ink); }
.md-preview blockquote{
  margin:0 0 0.7em; padding-left:12px; border-left:3px solid var(--surface-border);
  color:var(--ink-soft); font-style:italic;
}
.md-preview hr{ border:none; border-top:1px solid var(--surface-border); margin:1em 0; }