/* ==========================================================================
   FotoTrámite · ESTILOS  (css/estilos.css)
   Pensado primero para móvil. Para cambiar colores, toca solo las variables
   de :root (más abajo están las del modo oscuro).
   Índice: 1 Variables · 2 Base · 3 Cabecera/pie · 4 Botones · 5 Herramienta
           6 Anuncios · 7 Contenido · 8 Utilidades
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  --acento: #0b5cad;          /* azul principal (contraste AA sobre blanco) */
  --acento-oscuro: #084785;
  --acento-suave: #e8f1fb;
  --texto: #18212b;
  --texto-suave: #4a5764;     /* contraste 7:1 sobre blanco */
  --fondo: #f6f8fa;
  --superficie: #ffffff;
  --borde: #d5dde5;
  --ok: #157347;
  --mal: #b42318;
  --aviso-fondo: #fff7e0;
  --aviso-borde: #e5b33c;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #6aaeff;
    --acento-oscuro: #9cc8ff;
    --acento-suave: #13263b;
    --texto: #e7edf3;
    --texto-suave: #a9b6c3;
    --fondo: #0f151b;
    --superficie: #17202a;
    --borde: #2d3a47;
    --ok: #4cc38a;
    --mal: #ff7b6e;
    --aviso-fondo: #2b2410;
    --aviso-borde: #8a6d1d;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}
img, canvas, svg { max-width: 100%; }
a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--acento-oscuro); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.35rem, 4.6vw, 2.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--acento); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.saltar:focus { top: 8px; color: #fff; }

/* ---------- 3. Cabecera y pie ---------- */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.08rem; color: var(--texto); text-decoration: none; }
.logo svg { color: var(--acento); flex: none; }
.menu { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.menu a { color: var(--texto-suave); text-decoration: none; padding: 6px 0; display: inline-block; }
.menu a:hover { color: var(--acento); }
.menu-opcional { display: none; }
@media (min-width: 640px) { .menu-opcional { display: list-item; } .menu { gap: 22px; } }
@media (max-width: 380px) { .menu li:first-child { display: none; } }

.pie { margin-top: 48px; background: var(--superficie); border-top: 1px solid var(--borde); padding: 32px 0 16px; font-size: .92rem; }
.pie-rejilla { display: grid; gap: 24px; }
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 4px 0; }
.pie a { color: var(--texto-suave); }
.pie-marca { font-weight: 700; margin-bottom: 4px; }
.pie-titulo { font-weight: 700; margin-bottom: 6px; }
.pie-texto { color: var(--texto-suave); }
.pie-aviso { font-size: .85rem; }
.pie-copy { color: var(--texto-suave); font-size: .85rem; margin-top: 20px; }

.banner-revision {
  background: #b42318; color: #fff; text-align: center; padding: 8px 16px; font-weight: 700; font-size: .9rem;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background-color .15s, border-color .15s;
}
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-oscuro); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primario, .btn-primario:hover { color: #0b1520; } }
.btn-secundario { background: var(--superficie); color: var(--acento); border-color: var(--acento); }
.btn-secundario:hover { background: var(--acento-suave); }
.btn-enlace { background: none; color: var(--acento); padding: 10px 8px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.btn-grande { min-height: 52px; font-size: 1.06rem; padding: 12px 24px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); cursor: pointer;
}
.btn-icono:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- 5. Herramienta ---------- */
.heroe { padding-top: 16px; }
.heroe h1 { margin-bottom: .25em; }
.subtitulo { color: var(--texto-suave); margin-bottom: 14px; font-size: .98rem; }
@media (max-width: 480px) { .subtitulo { font-size: .92rem; margin-bottom: 10px; } }

.ft {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 14px; position: relative;
}
@media (min-width: 640px) { .ft { padding: 22px; } }

/* Sin JavaScript: solo se ve el aviso */
.ft-sin-js { margin: 0; font-weight: 600; }
.ft.ft-lista .ft-sin-js { display: none; }
.ft:not(.ft-lista) .ft-bloque { display: none !important; }

.ft-revision { background: #fde8e6; color: #7a1a12; border: 1px solid #f1a59c; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }
.ft-bloque + .ft-bloque { margin-top: 14px; }
.ft-etiqueta { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 6px; }
.ft-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); color: #fff; font-size: .8rem; flex: none;
}
@media (prefers-color-scheme: dark) { .ft-num { color: #0b1520; } }
.ft-nota { color: var(--texto-suave); font-size: .86rem; margin: 6px 0 0; }
.ft-aviso { font-size: .88rem; margin: 6px 0 0; }
.ft-aviso:empty { display: none; }
#ft-aviso-nitidez, .ft-aviso:not(:empty) { background: var(--aviso-fondo); border-left: 4px solid var(--aviso-borde); padding: 6px 10px; border-radius: 6px; }

/* Estados: qué se ve en cada uno */
.ft-zona, .ft-editor, .ft-trabajando, .ft-resultado, .ft-error { display: none; }
.ft[data-estado="inicio"] .ft-zona { display: block; }
.ft[data-estado="recorte"] .ft-editor { display: block; }
.ft[data-estado="trabajando"] .ft-trabajando { display: flex; }
.ft[data-estado="resultado"] .ft-resultado { display: block; }
.ft[data-estado="error"] .ft-error { display: block; }

/* Selector con buscador */
.ft-combo { position: relative; }
.ft-combo input {
  width: 100%; min-height: 48px; padding: 10px 44px 10px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto);
}
.ft-combo input:focus { border-color: var(--acento); outline: 3px solid var(--acento-suave); outline-offset: 0; }
.ft-combo-btn {
  position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; background: none;
  color: var(--texto-suave); cursor: pointer; border-radius: 8px;
}
.ft-opciones {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px 0;
  list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .18); max-height: min(320px, 55vh); overflow-y: auto;
}
.ft-opciones [role="option"] { padding: 10px 14px; cursor: pointer; }
.ft-opciones [role="option"]:hover, .ft-opciones .ft-activa { background: var(--acento-suave); }
.ft-opciones [aria-selected="true"] { font-weight: 700; }
.ft-opciones [aria-disabled="true"] { color: var(--texto-suave); cursor: not-allowed; }
.ft-op-grupo { padding: 8px 14px 2px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.ft-op-info { padding: 8px 14px; font-size: .88rem; color: var(--texto-suave); }
.ft-op-marca { font-size: .75rem; color: var(--mal); font-weight: 600; }
.ft-ficha { font-size: .9rem; margin: 8px 0 0; color: var(--texto-suave); }
.ft-ficha strong { color: var(--texto); }
.ft-ficha:empty { display: none; }
.ft-fuente { font-size: .84rem; }
.ft-guia { font-size: .84rem; font-weight: 600; }
.ft-sin-verificar { color: var(--mal); font-weight: 700; }

/* Modo manual */
.ft-manual { border: 1px dashed var(--borde); border-radius: 10px; margin: 10px 0 0; padding: 10px 12px; }
.ft-unidades { display: flex; gap: 18px; margin-bottom: 8px; }
.ft-unidades label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.ft-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
@media (min-width: 640px) { .ft-campos { grid-template-columns: repeat(5, 1fr); } }
.ft-campo { display: flex; flex-direction: column; font-size: .84rem; font-weight: 600; gap: 2px; }
.ft-campo[hidden] { display: none; }
.ft-campo input {
  min-height: 42px; padding: 8px 10px; font: inherit; font-size: 1rem; font-weight: 400;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); width: 100%;
}
.ft-ud { color: var(--texto-suave); font-weight: 400; }
.ft-mensaje-error { color: var(--mal); font-size: .88rem; margin: 6px 0 0; font-weight: 600; }
.ft-mensaje-error:empty, .ft-nota:empty { display: none; }

/* Zona de subida */
.ft-zona {
  border: 2px dashed var(--borde); border-radius: var(--radio); padding: 16px; text-align: center;
  transition: border-color .15s, background-color .15s;
}
.ft-zona .ft-etiqueta { justify-content: center; }
.ft-zona.ft-encima { border-color: var(--acento); background: var(--acento-suave); }
.ft-zona-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.ft-zona-botones .btn { min-width: 170px; }
/* El campo de archivo real está oculto: al llegar con el tabulador, se resalta su botón */
.ft-zona-botones label:has(+ input:focus-visible) { outline: 3px solid var(--acento); outline-offset: 3px; }
.ft-solo-tactil { display: none !important; }
@media (pointer: coarse) { .ft-solo-tactil { display: inline-flex !important; } }

/* Editor de recorte */
.ft-marco-envoltura { display: flex; justify-content: center; }
.ft-marco {
  position: relative; overflow: hidden; touch-action: none; cursor: grab; user-select: none;
  background: #fff;            /* lo que quede fuera de la foto sale blanco en el JPG */
  border-radius: 6px; box-shadow: 0 0 0 2px var(--acento);
  max-width: 100%;
}
.ft-marco.ft-arrastrando { cursor: grabbing; }
.ft-vista { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.ft-rejilla {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.7) calc(33.33% - .5px), rgba(255,255,255,.7) calc(33.33% + .5px), transparent calc(33.33% + .5px),
                              transparent calc(66.66% - .5px), rgba(255,255,255,.7) calc(66.66% - .5px), rgba(255,255,255,.7) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.7) calc(33.33% - .5px), rgba(255,255,255,.7) calc(33.33% + .5px), transparent calc(33.33% + .5px),
                              transparent calc(66.66% - .5px), rgba(255,255,255,.7) calc(66.66% - .5px), rgba(255,255,255,.7) calc(66.66% + .5px), transparent calc(66.66% + .5px));
  mix-blend-mode: difference; opacity: .6;
}
.ft-controles { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ft-zoom-etiqueta { font-size: .88rem; font-weight: 600; }
#ft-zoom { flex: 1; min-width: 0; accent-color: var(--acento); height: 44px; }
.ft-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ft-acciones .btn-primario { flex: 1 1 220px; }

/* Trabajando */
.ft-trabajando { align-items: center; gap: 12px; padding: 28px 8px; justify-content: center; font-weight: 600; }
.ft-giro {
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--acento-suave); border-top-color: var(--acento);
  animation: ft-girar 0.8s linear infinite;
}
@keyframes ft-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ft-giro { animation-duration: 2.4s; } }

/* Resultado */
.ft-resultado:focus { outline: none; }
.ft-res-titulo { font-size: 1.2rem; }
.ft-res-cuerpo { display: grid; gap: 16px; }
@media (min-width: 640px) { .ft-res-cuerpo { grid-template-columns: minmax(140px, 220px) 1fr; align-items: start; } }
.ft-res-figura { margin: 0; display: flex; justify-content: center; }
.ft-res-figura img {
  display: block; max-width: 100%; max-height: 260px; width: auto; height: auto;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff;
}
.ft-checks { list-style: none; padding: 0; margin: 0 0 14px; font-size: .94rem; }
.ft-checks li { margin: 4px 0; padding-left: 24px; text-indent: -24px; }
.ft-checks .ft-ok > span:first-child { color: var(--ok); font-weight: 800; display: inline-block; width: 24px; text-indent: 0; }
.ft-checks .ft-mal { color: var(--mal); }
.ft-checks .ft-mal > span:first-child { font-weight: 800; display: inline-block; width: 24px; text-indent: 0; }
.ft-checks .ft-info { color: var(--texto-suave); }
.ft-checks .ft-info > span:first-child { display: inline-block; width: 24px; text-indent: 0; }
.ft-descargar { width: 100%; }
.ft-res-secundarios { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* Error */
.ft-error { border-left: 4px solid var(--mal); padding: 4px 0 4px 14px; }
.ft-error-titulo { color: var(--mal); margin-bottom: 4px; }

.ft-privacidad { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--texto-suave); margin: 14px 0 0; }
.ft-privacidad svg { flex: none; margin-top: 3px; color: var(--ok); }

/* ---------- 6. Huecos de anuncios (solo marcadores) ----------
   La altura mínima se reserva desde el principio para que nada salte
   cuando se cargue el anuncio real. Nunca tapan contenido. */
.anuncio {
  display: flex; align-items: center; justify-content: center; position: relative;
  margin: 24px auto; width: 100%; border: 1px dashed var(--borde); border-radius: 8px;
  background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(127,127,127,.05) 10px 20px);
  overflow: hidden;
}
.anuncio-etiqueta { font-size: .72rem; letter-spacing: .12em; color: var(--texto-suave); font-weight: 600; }
.anuncio-banner { min-height: 100px; max-width: 970px; }        /* móvil: 320×100 */
@media (min-width: 760px) { .anuncio-banner { min-height: 90px; } } /* escritorio: 728×90 / 970×90 */
.anuncio-contenido { min-height: 280px; max-width: 728px; }       /* 336×280 o adaptable */
.anuncio-resultado { min-height: 250px; margin: 20px 0 0; }       /* 300×250 */

/* ---------- 7. Contenido ---------- */
.seccion { margin-top: 40px; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: paso; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; }
.pasos svg { color: var(--acento); margin-bottom: 6px; }
.pasos p { color: var(--texto-suave); margin: 0; }
.tarjetas { display: grid; gap: 14px; }
@media (min-width: 640px) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; }
.tarjeta p { color: var(--texto-suave); margin: 0; }
.tarjeta-enlace { display: block; text-decoration: none; color: inherit; }
.tarjeta-enlace:hover { border-color: var(--acento); }
.tarjeta-enlace h3 { color: var(--acento); }
.lista-guias { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .lista-guias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lista-guias { grid-template-columns: repeat(3, 1fr); } }
.lista-guias .tarjeta p { font-size: .9rem; }
.guias-vacio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; color: var(--texto-suave); }

.texto-largo { max-width: 760px; }
.texto-largo ul, .texto-largo ol { padding-left: 1.3em; }
.texto-largo li { margin: .35em 0; }
.pagina-texto { padding-top: 24px; }
.formula { font-family: ui-monospace, Consolas, monospace; background: var(--acento-suave); padding: 10px 14px; border-radius: 8px; display: inline-block; }
.nota-revisar { background: var(--aviso-fondo); border-left: 4px solid var(--aviso-borde); padding: 10px 14px; border-radius: 6px; font-size: .92rem; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: 6px; }
.migas a { color: var(--texto-suave); }

.faqs { max-width: 760px; }
.faq { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style-position: inside; }
.faq summary:hover { color: var(--acento); }
.faq > div { padding: 0 16px 4px; color: var(--texto-suave); }

.ficha-tabla-envoltura { overflow-x: auto; }
.ficha-tabla { border-collapse: collapse; width: 100%; max-width: 760px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.ficha-tabla th, .ficha-tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.ficha-tabla th { width: 40%; font-weight: 600; color: var(--texto-suave); }
.ficha-tabla thead th { color: var(--texto); }
.fuente-oficial { font-size: .92rem; margin-top: 12px; max-width: 760px; }
.contacto-email { margin: 18px 0; }

.consentimiento[hidden] { display: none; }

/* ---------- 8. Utilidades ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }