/* Hoja de estilo única de AbreXML.
 *
 * Vive aparte del HTML porque ahora hay nueve páginas y todas comparten la
 * misma apariencia. El navegador la descarga una vez y la reutiliza en el
 * resto de la visita.
 *
 * Caché: el .htaccess marca los .css como inmutables durante un año, así que
 * al cambiar este archivo hay que subir el número de ?v= en los enlaces de
 * todas las páginas. El generador de tools/ lo hace solo.
 */

html{color-scheme:light dark}
body{margin:0}
img{max-width:100%}

:root{
  --paper:#f4f6f5; --surface:#ffffff; --surface-2:#eef2f1;
  --ink:#152220; --ink-soft:#3d4f4b; --muted:#6b7b77;
  --line:#dbe3e1; --line-soft:#e9efed;
  --accent:#0b6b58; --accent-deep:#085345; --accent-wash:#e3f1ec; --on-accent:#ffffff;
  --warn:#8a5a00; --warn-wash:#fdf3e0;
  --bad:#a0342a; --bad-wash:#fbeae8;
  --shadow:0 1px 2px rgba(21,34,32,.06), 0 8px 24px -12px rgba(21,34,32,.18);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1312; --surface:#151e1c; --surface-2:#1b2523;
    --ink:#e7eeec; --ink-soft:#bccac6; --muted:#8b9b97;
    --line:#26322f; --line-soft:#1f2b29;
    --accent:#3fbd9f; --accent-deep:#64d0b6; --accent-wash:#122c26; --on-accent:#06201a;
    --warn:#d9a441; --warn-wash:#2a2213;
    --bad:#e2756a; --bad-wash:#2d1917;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0d1312; --surface:#151e1c; --surface-2:#1b2523;
  --ink:#e7eeec; --ink-soft:#bccac6; --muted:#8b9b97;
  --line:#26322f; --line-soft:#1f2b29;
  --accent:#3fbd9f; --accent-deep:#64d0b6; --accent-wash:#122c26; --on-accent:#06201a;
  --warn:#d9a441; --warn-wash:#2a2213;
  --bad:#e2756a; --bad-wash:#2d1917;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:0 56px}

/* ---------- cabecera ---------- */
.top{
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
}
.top-in{
  max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:12px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:auto}
.brand b{font-size:18px; font-weight:700; letter-spacing:-.02em}
.brand b i{font-style:normal; color:var(--accent)}
.brand span{font-size:12px; color:var(--muted)}
.privacy{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500;
  color:var(--accent-deep); background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  padding:5px 11px; border-radius:999px;
}
.privacy svg{width:13px;height:13px;flex:none}

/* ---------- zona de carga ---------- */
.drop{
  margin-top:20px; background:var(--surface); border:1.5px dashed var(--line);
  border-radius:var(--r); padding:30px 22px; text-align:center; transition:border-color .15s, background .15s;
}
.drop.hot{border-color:var(--accent); background:var(--accent-wash)}
.drop h1{margin:0 0 6px; font-size:19px; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
.drop p{margin:0 auto; max-width:56ch; color:var(--ink-soft); font-size:13.5px}
.drop .btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
button{font:inherit; cursor:pointer; border-radius:8px; border:1px solid transparent; transition:background .12s,border-color .12s}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-main{background:var(--accent); color:var(--on-accent); font-weight:600; padding:9px 18px}
.btn-main:hover{background:var(--accent-deep)}
.btn-main:disabled{opacity:.5; cursor:default}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--line); padding:9px 16px}
.btn-ghost:hover{background:var(--surface-2)}
.hint{margin-top:13px; font-size:12px; color:var(--muted)}
.hint code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; background:var(--surface-2); padding:1px 5px; border-radius:4px}

/* ---------- progreso ---------- */
.prog{margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px}
.prog-head{display:flex; align-items:center; gap:12px; font-size:13px; margin-bottom:9px}
.prog-head span{margin-right:auto; font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.prog-head button{padding:5px 12px; font-size:12.5px}
.prog-bar{height:5px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.prog-bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:3px; transition:width .12s linear}
.tope{margin-top:10px; font-size:12.5px; color:var(--muted); text-align:center}

/* ---------- avisos ---------- */
.note{
  display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:10px 13px;
  border-radius:8px; font-size:13px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-soft);
}
.note.demo{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 30%,transparent); color:var(--warn)}
.note.bad{background:var(--bad-wash); border-color:color-mix(in srgb,var(--bad) 30%,transparent); color:var(--bad)}
.note b{color:inherit}

/* ---------- resumen ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin-top:22px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tile{background:var(--surface); padding:13px 15px}
.tile dt{margin:0; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tile dd{margin:5px 0 0; font-size:21px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.tile dd small{font-size:12px; font-weight:500; color:var(--muted); margin-left:3px}

/* ---------- barra de acciones ---------- */
.bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px}
.bar .count{margin-right:auto; font-size:13px; color:var(--muted)}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.chip{
  font-size:11.5px; font-weight:500; padding:4px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.chip b{color:var(--ink)}

/* ---------- tabla ---------- */
.tablebox{margin-top:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:980px}
th,td{padding:8px 11px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap}
thead th{
  position:sticky; top:0; background:var(--surface-2); z-index:1;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px}
td.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink-soft)}
td.name{white-space:normal; min-width:190px; max-width:290px}
.flag{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:2px 7px; border-radius:5px; background:var(--accent-wash); color:var(--accent-deep);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.flag.err{background:var(--bad-wash); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.cufe{max-width:140px; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom}

/* ---------- origen de la herramienta ---------- */
.gorilla{
  margin-top:22px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  background:var(--accent-wash); border-radius:var(--r); padding:16px 18px;
  display:flex; gap:16px; align-items:flex-start;
}
.gorilla-txt{flex:1; min-width:0}
.gorilla h2{margin:0 0 5px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--accent-deep)}
.gorilla p{margin:0 0 9px; font-size:13.5px; color:var(--ink-soft); max-width:68ch}
.gorilla a.ir{
  display:inline-block; font-size:13px; font-weight:600; color:var(--on-accent);
  background:var(--accent); padding:7px 15px; border-radius:7px; text-decoration:none;
}
.gorilla a.ir:hover{background:var(--accent-deep)}
.gorilla .cerrar{
  flex:none; background:none; border:none; color:var(--muted); font-size:17px;
  line-height:1; padding:2px 5px; border-radius:5px; cursor:pointer;
}
.gorilla .cerrar:hover{background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--ink)}

.autoria{
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; align-items:baseline;
}
.autoria a{color:var(--accent-deep); font-weight:500}
@media (max-width:560px){ .gorilla{flex-direction:column; gap:10px} }

/* ---------- pie ---------- */
.foot{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.foot h2{font-size:13px; font-weight:600; color:var(--ink-soft); margin:0 0 7px; letter-spacing:.01em}
.foot ul{margin:0; padding-left:18px}
.foot li{margin-bottom:3px}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px}

.faq{margin-top:34px}
.faq h2{font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px}
.faq details{border:1px solid var(--line); border-radius:8px; background:var(--surface); margin-bottom:8px}
.faq summary{cursor:pointer; padding:11px 14px; font-weight:500; font-size:13.5px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--accent); font-weight:600; margin-right:9px; font-family:"IBM Plex Mono",monospace}
.faq details[open] summary::before{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq p{margin:0; padding:12px 14px 14px; font-size:13.5px; color:var(--ink-soft); max-width:72ch}
.faq code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}
@media (max-width:560px){
  .tile dd{font-size:18px}
  .drop{padding:24px 16px}
}

/* ======================================================================
   De aquí en adelante: lo que necesitan las páginas de contenido
   (las de cada país y las guías). La portada no usa casi nada de esto.
   ====================================================================== */

/* ---------- navegación de la cabecera ---------- */
.nav{display:flex; gap:2px; flex-wrap:wrap; align-items:center}
.nav a{
  font-size:12.5px; color:var(--ink-soft); text-decoration:none; font-weight:500;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
}
.nav a:hover{background:var(--surface-2); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent-deep); background:var(--accent-wash)}
/* En pantallas angostas la navegación no se esconde: pasa a una tira que se
   desliza con el dedo, debajo de la marca. Esconderla dejaría al visitante de
   celular —que son más de la mitad— sin forma de llegar a su país. */
@media (max-width:900px){
  .top-in{padding-block:10px 0; gap:8px}
  .nav{
    order:9; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:1px;
    margin-inline:-16px; padding:2px 16px 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 10px; font-size:13px}
  .privacy{font-size:11.5px; padding:4px 9px}
  .brand span{display:none}
}
@media (max-width:420px){
  .privacy svg{display:none}
}

/* ---------- migas de pan ---------- */
.migas{font-size:12px; color:var(--muted); margin:14px 0 0; display:flex; gap:6px; flex-wrap:wrap}
.migas a{color:var(--accent-deep); text-decoration:none}
.migas a:hover{text-decoration:underline}
.migas span[aria-hidden]{color:var(--line)}

/* ---------- encabezado de página de contenido ---------- */
.cabecera{margin-top:12px; padding-bottom:4px}
.cabecera h1{
  margin:0 0 10px; font-size:28px; line-height:1.2; font-weight:600;
  letter-spacing:-.025em; text-wrap:balance; max-width:22ch;
}
.cabecera .entrada{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:68ch}
.cabecera .entrada strong{color:var(--ink); font-weight:600}
.fechado{margin-top:12px; font-size:12px; color:var(--muted); display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.fechado b{font-weight:500; color:var(--ink-soft)}
@media (max-width:560px){ .cabecera h1{font-size:23px} .cabecera .entrada{font-size:14.5px} }

/* ---------- respuesta corta destacada: lo que citan los buscadores ---------- */
.respuesta{
  margin-top:20px; background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:var(--r); padding:15px 18px;
}
.respuesta h2{
  margin:0 0 7px; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-deep);
}
.respuesta p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); max-width:72ch}
.respuesta p + p{margin-top:9px}

/* ---------- prosa ---------- */
.prosa{margin-top:34px; max-width:72ch}
.prosa > h2{
  margin:34px 0 10px; font-size:19px; font-weight:600; letter-spacing:-.02em;
  text-wrap:balance; scroll-margin-top:84px;
}
.prosa > h2:first-child{margin-top:0}
.prosa h3{margin:24px 0 7px; font-size:15px; font-weight:600; letter-spacing:-.01em; scroll-margin-top:84px}
.prosa p{margin:0 0 12px; font-size:14.5px; line-height:1.65; color:var(--ink-soft)}
.prosa p strong, .prosa li strong{color:var(--ink); font-weight:600}
.prosa ul, .prosa ol{margin:0 0 14px; padding-left:20px; font-size:14.5px; line-height:1.65; color:var(--ink-soft)}
.prosa li{margin-bottom:5px}
.prosa a{color:var(--accent-deep); font-weight:500}
.prosa code{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px;
  background:var(--surface-2); padding:1.5px 5px; border-radius:4px; color:var(--ink);
  overflow-wrap:anywhere;
}
.prosa figure{margin:0 0 16px}
.prosa figcaption{margin-top:7px; font-size:12px; color:var(--muted)}

/* bloque de código de ejemplo */
.codigo{
  margin:0 0 16px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:13px 15px; overflow-x:auto;
}
.codigo pre{
  margin:0; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px; line-height:1.65; color:var(--ink-soft); white-space:pre;
}
.codigo b{color:var(--accent-deep); font-weight:600}

/* pasos numerados */
ol.pasos{list-style:none; padding:0; margin:0 0 16px; counter-reset:paso}
ol.pasos > li{
  counter-increment:paso; position:relative; padding-left:38px; margin-bottom:14px;
  font-size:14.5px; line-height:1.6; color:var(--ink-soft);
}
ol.pasos > li::before{
  content:counter(paso); position:absolute; left:0; top:-1px;
  width:25px; height:25px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:12.5px; font-weight:600; display:grid; place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
ol.pasos > li b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}

/* tabla de datos dentro de la prosa */
.tabla-dato{margin:0 0 18px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.tabla-dato .scroll{overflow-x:auto}
.tabla-dato table{min-width:0; font-size:13px}
.tabla-dato th, .tabla-dato td{white-space:normal; vertical-align:top; padding:9px 12px}
.tabla-dato thead th{font-size:10.5px; position:static}
.tabla-dato td code{font-size:11.5px}
.tabla-dato tbody tr:hover td{background:transparent}

/* ---------- rejilla de países ---------- */
.paises{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(246px,1fr));
  gap:10px; margin:16px 0 0; padding:0; list-style:none;
}
.paises li{margin:0}
.paises a{
  display:block; height:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px; text-decoration:none; color:inherit;
  transition:border-color .13s, background .13s;
}
.paises a:hover{border-color:var(--accent); background:var(--accent-wash)}
.paises b{display:block; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.paises span{display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.5}
.paises em{
  font-style:normal; display:inline-block; margin-top:7px; font-size:11px; font-weight:600;
  letter-spacing:.04em; color:var(--accent-deep);
}

/* ---------- bloque de contacto ---------- */
.contacto{
  margin-top:30px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r); padding:17px 19px;
}
.contacto h2{margin:0 0 6px; font-size:15px; font-weight:600; letter-spacing:-.01em}
.contacto p{margin:0 0 10px; font-size:13.5px; color:var(--ink-soft); max-width:70ch; line-height:1.6}
.contacto a.correo{
  display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13.5px;
  font-weight:500; color:var(--accent-deep); background:var(--accent-wash); text-decoration:none;
  padding:7px 13px; border-radius:7px; border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
}
.contacto a.correo:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---------- pie con enlaces ---------- */
.foot nav ul{list-style:none; padding:0; margin:0}
.foot nav a{color:var(--ink-soft); text-decoration:none}
.foot nav a:hover{color:var(--accent-deep); text-decoration:underline}
.foot .legal{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:12px}

/* ---------- página 404 ---------- */
.perdido{text-align:center; padding:70px 16px 40px}
.perdido h1{font-size:25px; font-weight:600; letter-spacing:-.02em; margin:0 0 10px}
.perdido p{font-size:14.5px; color:var(--ink-soft); max-width:50ch; margin:0 auto 20px}

/* ---------- accesibilidad ---------- */
/* El salto al contenido: invisible hasta que alguien llega con el tabulador. */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:0 0 8px 0; text-decoration:none;
}
.saltar:focus{left:0}
/* Texto que leen los lectores de pantalla y los buscadores, pero no se ve. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- la marca como enlace a la portada ---------- */
a.volver{text-decoration:none; color:inherit}
a.volver:hover b i{color:var(--accent-deep)}

/* El botón de la página 404 y de cualquier llamada suelta a la acción. */
a.boton-grande{
  display:inline-block; background:var(--accent); color:var(--on-accent);
  font-weight:600; font-size:14px; padding:11px 22px; border-radius:8px;
  text-decoration:none;
}
a.boton-grande:hover{background:var(--accent-deep)}