@font-face{
  /* Manrope, subconjunto latino, de Google Fonts (licencia SIL Open Font 1.1).
     Va incrustada para que la aplicación no le pida nada a ningún servidor
     ajeno: ni se cae si Google no responde, ni le entrega a nadie la
     dirección de quien la usa. Es una tipografía variable, de ahí el rango. */
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fuentes/manrope-latin.woff2') format('woff2');
}
/* ══════════════════════════════════════════════════════════════
   JournalMatch · vidrio líquido sobre azul noche UNED
   Tema principal: claro. Los tokens de :root son los del oscuro y
   [data-theme="claro"] los sobrescribe.
   ══════════════════════════════════════════════════════════════ */
:root{
  --noche:#04162b;
  --acc:oklch(0.72 0.14 195);        /* verde-agua de marca            */
  --acc-txt:oklch(0.86 0.12 192);    /* verde-agua para texto y links  */
  --acc-txt-hover:#fff;
  --azul:oklch(0.55 0.16 250);       /* azul medio de degradados       */
  --am1:oklch(0.88 0.15 98);         /* amarillo señal, claro          */
  --am2:oklch(0.78 0.15 82);         /* amarillo señal, oscuro         */
  --sobre-acc:#04162b;               /* texto sobre acento verde       */
  --sobre-am:#221a02;                /* texto sobre acento amarillo    */
  --error:oklch(0.78 0.16 25);

  --bg:var(--noche);
  --txt:#fff;
  --txt-2:rgba(233,241,249,.62);
  --txt-3:rgba(233,241,249,.48);

  --vidrio:rgba(255,255,255,.06);
  --vidrio-2:rgba(255,255,255,.07);
  --vidrio-br:rgba(255,255,255,.14);
  --vidrio-sh:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 70px rgba(0,0,0,.4);
  --hundido:rgba(0,0,0,.3);
  --hundido-br:rgba(255,255,255,.1);
  --blur:26px;

  --btn-bg:rgba(255,255,255,.1);
  --btn-bg-hover:rgba(255,255,255,.17);
  --chip-bg:rgba(255,255,255,.07);
  --chip-n-bg:rgba(0,0,0,.3);

  /* avisos ámbar de los resultados */
  --ambar-bg:rgba(255,214,120,.09);
  --ambar-br:rgba(255,214,120,.28);
  --ambar-txt:rgba(255,240,210,.86);

  --linea:rgba(255,255,255,.1);
  --radio-panel:28px;
  --radio-card:20px;
  --radio-ctrl:16px;
}

[data-theme="claro"]{
  --bg:#eaf1f8;
  --txt:oklch(0.28 0.05 250);
  --txt-2:oklch(0.42 0.04 250);
  --txt-3:oklch(0.5 0.03 250);
  --acc-txt:oklch(0.5 0.12 210);
  --acc-txt-hover:oklch(0.35 0.12 210);
  --error:oklch(0.5 0.19 25);
  --vidrio:rgba(255,255,255,.6);
  --vidrio-2:rgba(255,255,255,.7);
  --vidrio-br:rgba(255,255,255,.85);
  --vidrio-sh:inset 0 1px 0 rgba(255,255,255,.9), 0 20px 50px rgba(12,40,80,.13);
  --hundido:rgba(12,40,80,.07);
  --hundido-br:rgba(12,40,80,.18);
  --btn-bg:rgba(255,255,255,.75);
  --btn-bg-hover:#fff;
  --chip-bg:rgba(255,255,255,.72);
  --chip-n-bg:rgba(12,40,80,.1);
  /* amarillo señal como relleno real: el pardo oscuro da 9:1 y 10,5:1 */
  --ambar-bg:linear-gradient(135deg, oklch(0.93 0.09 96), oklch(0.88 0.13 92));
  --ambar-br:oklch(0.72 0.15 82);
  --ambar-txt:oklch(0.32 0.06 70);
  --linea:rgba(12,40,80,.12);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; position:relative; overflow-x:hidden;
  background:var(--bg); color:var(--txt);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.modal-abierto{overflow:hidden}
a{color:var(--acc-txt); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--acc-txt-hover)}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:6px}

/* El atajo vive fuera de la pantalla hasta que el teclado lo alcanza. No se
   oculta con display:none ni visibility:hidden, porque entonces tampoco
   recibiría el foco. */
/* fijo, no absoluto: si fuera absoluto se colocaría respecto al documento y,
   con la página desplazada, aparecería fuera de la vista. */
.saltar{position:fixed; left:-9999px; top:0; z-index:50;
  padding:12px 20px; border-radius:0 0 14px 0; font-size:14px; font-weight:600;
  background:var(--acc); color:var(--sobre-acc); text-decoration:none}
.saltar:focus{left:0}
button{font-family:inherit}

/* ── Aurora de fondo ─────────────────────────────────────────── */
/* la aurora desborda la página un 20 % por lado; .fondo la recorta, porque
   overflow-x:hidden en body no impide el arrastre lateral en Safari de iOS */
.fondo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aurora{position:absolute; inset:-20%}
.aurora span{position:absolute; display:block; border-radius:50%}
.aurora .a1{left:-6%; top:-4%; width:60%; height:70%; filter:blur(60px);
  background:radial-gradient(circle, var(--azul), transparent 65%);
  animation:deriva 18s ease-in-out infinite}
.aurora .a2{right:-8%; top:-6%; width:55%; height:60%; filter:blur(70px); opacity:.55;
  background:radial-gradient(circle, oklch(0.68 0.13 195), transparent 65%);
  animation:deriva 24s ease-in-out infinite reverse}
.aurora .a3{left:18%; bottom:-14%; width:60%; height:60%; filter:blur(80px); opacity:.5;
  background:radial-gradient(circle, oklch(0.74 0.14 95), transparent 65%);
  animation:deriva 30s ease-in-out infinite}
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,-3%,0) scale(1.08)}
}
[data-theme="claro"] .aurora{opacity:.5}

/* ── Superficies ─────────────────────────────────────────────── */
.vidrio{
  background:var(--vidrio); border:1px solid var(--vidrio-br);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  box-shadow:var(--vidrio-sh);
}
.hundido{background:var(--hundido); border:1px solid var(--hundido-br)}

.envoltura{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  padding:26px 40px 40px; display:flex; flex-direction:column; gap:20px}

/* ── Barra superior ──────────────────────────────────────────── */
.barra{display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius:22px; padding:12px 16px}
.marca{display:flex; align-items:center; gap:14px; min-width:0}
/* el logotipo tiene azul oscuro: va sobre una placa clara.
   Es además el <h1> de la página: el nombre lo da el alt de la imagen. */
.placa{flex:none; display:grid; place-items:center; padding:7px 11px; margin:0;
  border-radius:16px; background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(0,0,0,.28)}
.placa img{display:block; height:70px; width:auto}
[data-theme="claro"] .placa{background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(12,40,80,.1)}
/* ancho tasado: la línea institucional es larga y, suelta, empuja los
   controles a una segunda fila. Aquí envuelve por diseño, no por aprieto. */
.marca-textos{min-width:0; max-width:270px; display:flex; flex-direction:column; gap:3px}
.marca-descriptor{font-size:13.5px; font-weight:800; color:var(--txt); line-height:1.3; margin:0}
.marca-institucion{font-size:12px; font-weight:500; color:var(--txt-2); line-height:1.35; margin:0;
  text-wrap:balance}
.divisor-v{width:1px; align-self:stretch; margin:2px 0; background:var(--linea); flex:none}
.sello{flex:none; display:flex; align-items:center}
.sello img{display:block; height:46px; width:auto}
.sello .blanco{display:none}
[data-theme="oscuro"] .sello .azul{display:none}
[data-theme="oscuro"] .sello .blanco{display:block}

.controles{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.riel{display:flex; gap:3px; padding:3px; border-radius:12px}
.riel button{width:34px; height:28px; border-radius:10px; border:0; cursor:pointer;
  background:transparent; color:var(--txt-2); font-size:13px;
  display:grid; place-items:center; transition:all .18s ease; position:relative}
.riel button:hover{color:var(--txt); background:rgba(255,255,255,.07)}
.riel button.active{background:#fff; color:var(--noche)}
.riel button.active::after{content:""; position:absolute; bottom:4px; width:4px; height:4px;
  border-radius:50%; background:var(--azul)}
[data-theme="claro"] .riel button:hover{background:rgba(12,40,80,.08)}
[data-theme="claro"] .riel button.active{background:var(--noche); color:#fff}
[data-theme="claro"] .riel button.active::after{background:var(--acc)}
.riel-lang button{width:auto; padding:0 13px; font-size:12px; font-weight:800; letter-spacing:.04em}
.riel-lang button.active,
[data-theme="claro"] .riel-lang button.active{background:var(--acc); color:var(--sobre-acc)}
.riel-lang button.active::after{display:none}
.btn-manual{display:inline-flex; align-items:center; padding:9px 16px; border-radius:12px;
  cursor:pointer; font-size:13px; font-weight:600; color:var(--txt); text-decoration:none;
  background:var(--btn-bg); border:1px solid var(--vidrio-br); transition:background .18s ease}
.btn-manual:hover{background:var(--btn-bg-hover); color:var(--txt)}
[data-theme="claro"] .btn-manual{border-color:rgba(12,40,80,.16)}

/* ── Franja de estado ────────────────────────────────────────── */
.franja{display:flex; justify-content:flex-end}
.base-chip{display:inline-flex; align-items:center; gap:9px; padding:8px 16px;
  border-radius:999px; font-size:12.5px; font-weight:600; color:var(--txt-2);
  background:var(--vidrio); border:1px solid var(--vidrio-br);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}
.base-chip::before{content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:oklch(0.82 0.14 165); animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Avisos ámbar (resultados) ───────────────────────────────── */
.notice-box{background:var(--ambar-bg); border:1px solid var(--ambar-br); color:var(--ambar-txt);
  padding:14px 18px; border-radius:var(--radio-card); font-size:13px; line-height:1.6}
.notice-box p{margin:0}
.notice-box p + p{margin-top:8px}
.notice-box .btn-ghost{margin-left:6px; padding:7px 14px; font-size:12.5px; border-radius:11px}

/* ── Panel principal ─────────────────────────────────────────── */
.panel{border-radius:var(--radio-panel); padding:34px 36px;
  display:flex; flex-direction:column; gap:22px}
.panel-titulo{font-size:22px; font-weight:800; letter-spacing:-.3px; margin:0}
.panel-bajada{font-size:13.5px; line-height:1.6; color:var(--txt-2); max-width:760px; margin:4px 0 0}
.campo{display:flex; flex-direction:column; gap:11px}
.etiqueta{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3)}

.chip-grid{display:flex; flex-wrap:wrap; gap:9px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:999px;
  font-size:13.5px; font-weight:500; cursor:pointer; text-align:left; line-height:1.2;
  color:var(--txt); background:var(--chip-bg); border:1px solid var(--vidrio-br);
  transition:background .18s ease, color .18s ease, transform .18s ease}
.chip.on{background:var(--acc); color:var(--sobre-acc); font-weight:600; border-color:transparent}
.chip .n{padding:2px 8px; border-radius:8px; font-size:11.5px; font-weight:600;
  background:var(--chip-n-bg); font-variant-numeric:tabular-nums}
.chip.on .n{background:rgba(0,0,0,.18)}
.chip.cero{opacity:.45}
.chip .tick{font-size:11px}
/* solo con puntero: en pantallas táctiles el :hover se queda «pegado»
   y un chip recién desmarcado parecería seguir marcado */
@media (hover:hover){
  .chip:hover{background:var(--acc); color:var(--sobre-acc); transform:translateY(-1px);
    border-color:transparent}
  .chip:hover .n{background:rgba(0,0,0,.18)}
}
.sel-count{font-size:12.5px; color:var(--txt-3)}

.sub-toggle{display:inline-flex; align-items:center; gap:10px; padding:11px 18px;
  border-radius:14px; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--txt); background:var(--hundido); border:1px solid var(--hundido-br);
  transition:border-color .18s ease; align-self:flex-start}
.sub-toggle:hover{border-color:var(--acc)}
.sub-toggle .caret{font-size:9px; opacity:.6; transition:transform .2s ease}
.sub-toggle[aria-expanded="true"] .caret{transform:rotate(90deg)}
.sub-toggle .badge{padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:var(--acc); color:var(--sobre-acc)}
.sub-wrap{display:flex; flex-direction:column; gap:14px; margin-top:14px}
.hint-small{font-size:12.5px; color:var(--txt-2); margin:0; max-width:760px}
.sub-area-group{display:flex; flex-direction:column; gap:9px}
.sub-area-name{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3)}

.fila-2{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start}
select{width:100%; padding:15px 20px; border-radius:var(--radio-ctrl); font-family:inherit;
  font-size:14px; font-weight:500; color:var(--txt); background:var(--hundido);
  border:1px solid var(--hundido-br); cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),
                   linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  transition:border-color .18s ease}
select:hover,select:focus{border-color:var(--acc)}
select option{background:var(--noche); color:#fff}
[data-theme="claro"] select option{background:#fff; color:var(--txt)}
.filtros{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; min-height:38px}
.filtro{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  font-size:12.5px; font-weight:500; color:var(--txt);
  background:rgba(120,235,225,.08); border:1px solid rgba(120,235,225,.26)}
.filtro::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none}
.filtro-vacio{font-size:12.5px; color:var(--txt-3); padding:9px 0}

.criteria-row{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0}
.criteria-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 15px;
  border-radius:999px; font-size:12.5px; color:var(--txt-2);
  background:var(--hundido); border:1px solid var(--hundido-br)}
.criteria-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--acc); flex:none}

.btn-row{display:flex; flex-wrap:wrap; align-items:center; gap:13px}
.btn-primary{position:relative; overflow:hidden; padding:16px 34px; border-radius:18px;
  border:0; cursor:pointer; font-size:14.5px; font-weight:800;
  color:var(--sobre-am); background:linear-gradient(135deg,var(--am1),var(--am2));
  box-shadow:0 14px 34px rgba(0,0,0,.32); transition:transform .18s ease}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary::after{content:""; position:absolute; top:0; bottom:0; width:40px; left:-60px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:destello 3.4s ease-in-out infinite}
@keyframes destello{0%{left:-60px}55%,100%{left:115%}}
.btn-ghost{padding:15px 24px; border-radius:16px; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--txt); background:var(--btn-bg); border:1px solid var(--vidrio-br);
  transition:background .18s ease}
.btn-ghost:hover{background:var(--btn-bg-hover)}
[data-theme="claro"] .btn-ghost{border-color:rgba(12,40,80,.16)}
.btn-example{background:none; border:0; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--acc-txt); text-decoration:underline; text-underline-offset:3px; padding:6px}
.btn-example:hover{color:var(--acc-txt-hover)}
.validation-msg{font-size:13px; font-weight:600; color:var(--error); margin:0}

/* ── Resultados ──────────────────────────────────────────────── */
.resultados{display:flex; flex-direction:column; gap:18px; scroll-margin-top:16px}
.results-top{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.results-heading{font-size:20px; font-weight:800; letter-spacing:-.3px; margin:0}
.results-sub{font-size:13.5px; color:var(--txt-2); margin-top:3px}
.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}
.stat-card{padding:18px; border-radius:var(--radio-card); text-align:center;
  background:var(--vidrio); border:1px solid var(--vidrio-br);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}
.stat-num{font-size:27px; font-weight:800; letter-spacing:-.5px; line-height:1.1}
.stat-label{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt-3); margin-top:5px}
.group-divider{display:flex; align-items:center; gap:14px; margin:8px 0 2px;
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-3)}
.group-divider::before,.group-divider::after{content:""; flex:1; height:1px; background:var(--linea)}

.journal-grid{display:flex; flex-direction:column; gap:15px}
.journal-card{border-radius:var(--radio-card); padding:24px 26px; display:flex;
  flex-direction:column; gap:15px; background:var(--vidrio-2);
  border:1px solid var(--vidrio-br); box-shadow:var(--vidrio-sh);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  transition:transform .18s ease, border-color .18s ease}
.journal-card:hover{transform:translateY(-2px); border-color:rgba(120,235,225,.4)}
.jc-top{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
.jc-title{font-size:17px; font-weight:800; letter-spacing:-.2px; line-height:1.3; margin:0}
.jc-pub{font-size:12.5px; color:var(--txt-2); margin-top:3px}
.jc-badges{display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start}
.jc-badge{padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid var(--vidrio-br); background:rgba(255,255,255,.08); color:var(--txt);
  white-space:nowrap}
[data-theme="claro"] .jc-badge{background:rgba(255,255,255,.8); border-color:rgba(12,40,80,.14)}
.jc-badge.jb-free{background:rgba(120,235,190,.14); border-color:rgba(120,235,190,.4)}
.jc-badge.jb-active{background:rgba(120,200,255,.12); border-color:rgba(120,200,255,.34)}
.jc-badge.jb-cross{background:var(--acc); border-color:transparent; color:var(--sobre-acc); font-weight:800}
.jc-badge.jb-second{background:rgba(120,235,225,.1); border-color:rgba(120,235,225,.3)}
.jc-badge.jb-bridge{background:linear-gradient(135deg,var(--am1),var(--am2)); border-color:transparent;
  color:var(--sobre-am); font-weight:800}
.jc-badge.jb-warn{background:rgba(255,200,110,.14); border-color:rgba(255,200,110,.36)}
.jc-badge.jb-dead{background:rgba(255,130,130,.14); border-color:rgba(255,130,130,.4)}
.jc-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  padding:15px 0; margin:0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.jc-meta dt{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:3px}
.jc-meta dd{margin:0; font-size:13px; color:var(--txt); line-height:1.4}
.jc-meta dd.mono{font-variant-numeric:tabular-nums; letter-spacing:.02em}
.jc-subjects{display:flex; flex-wrap:wrap; gap:7px}
.jc-subject-tag{padding:5px 12px; border-radius:999px; font-size:11.5px; color:var(--txt-2);
  background:var(--hundido); border:1px solid var(--hundido-br)}
.jc-why{padding:12px 15px; border-radius:13px; font-size:13px; line-height:1.55; color:var(--txt-2);
  background:rgba(120,235,225,.07); border:1px solid rgba(120,235,225,.22)}
.jc-why b{font-weight:800; color:var(--txt)}
.jc-pie{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.jc-links{display:flex; flex-wrap:wrap; gap:10px}
/* «Ir a la revista»: el amarillo del botón de búsqueda, sin el destello */
.jc-link{padding:13px 24px; border-radius:14px; font-size:13.5px; font-weight:800;
  text-decoration:none; color:var(--sobre-am);
  background:linear-gradient(135deg,var(--am1),var(--am2));
  box-shadow:0 8px 20px rgba(0,0,0,.22); transition:transform .18s ease}
.jc-link:hover{transform:translateY(-1px); color:var(--sobre-am)}
[data-theme="claro"] .jc-link{box-shadow:0 8px 18px oklch(0.78 0.15 82 / .38)}
.jc-link.secondary{background:rgba(255,255,255,.09); color:var(--acc-txt);
  border:1px solid var(--vidrio-br); font-weight:600; box-shadow:none}
.jc-link.secondary:hover{background:rgba(255,255,255,.16); color:var(--acc-txt-hover)}
[data-theme="claro"] .jc-link.secondary{background:rgba(255,255,255,.85);
  border-color:rgba(12,40,80,.16); color:oklch(0.45 0.12 210)}
/* lleva la dirección de correo a la vista: --txt-3 se queda corto de contraste en oscuro */
.jc-reporte{font-size:12px; font-weight:600; color:var(--txt-2); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; padding:6px 0}
.jc-reporte:hover{color:var(--acc-txt-hover); text-decoration:underline}

.empty-state{text-align:center; padding:52px 24px; border-radius:var(--radio-panel);
  background:var(--vidrio); border:1px solid var(--vidrio-br);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur))}
.empty-state .es-icon{font-size:38px; margin-bottom:14px}
.empty-state h3{font-size:17px; font-weight:800; margin:0 0 9px}
.empty-state p{font-size:13.5px; line-height:1.65; color:var(--txt-2); max-width:520px; margin:0 auto}

/* ── Otros portales ──────────────────────────────────────────── */
.manual-section{border-radius:var(--radio-panel); padding:30px 32px; display:flex;
  flex-direction:column; gap:14px}
.card-title{font-size:19px; font-weight:800; letter-spacing:-.3px; margin:0}
.hint{font-size:13.5px; line-height:1.6; color:var(--txt-2); margin:0; max-width:760px}
.manual-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.manual-link-card{display:block; padding:16px 18px; border-radius:var(--radio-card); text-decoration:none;
  background:var(--hundido); border:1px solid var(--hundido-br); transition:border-color .18s ease, transform .18s ease}
.manual-link-card:hover{border-color:var(--acc); transform:translateY(-2px)}
.mlc-name{font-size:13.5px; font-weight:800; color:var(--acc-txt)}
.mlc-desc{font-size:12px; color:var(--txt-2); margin-top:4px; line-height:1.45}

/* ── Modal «Acerca de» ───────────────────────────────────────── */
.about-overlay{position:fixed; inset:0; z-index:1000; padding:24px; display:flex;
  align-items:center; justify-content:center; background:rgba(2,10,20,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.about-modal{max-width:760px; width:100%; max-height:85vh; overflow-y:auto;
  border-radius:var(--radio-panel); padding:30px 34px; background:var(--vidrio-2);
  border:1px solid var(--vidrio-br); box-shadow:var(--vidrio-sh);
  -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px)}
[data-theme="claro"] .about-modal{background:rgba(255,255,255,.94)}
.about-modal-header{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.about-icon{font-size:20px}
.about-title{flex:1; font-size:20px; font-weight:800; letter-spacing:-.3px; margin:0}
.about-close{width:34px; height:34px; border-radius:11px; cursor:pointer; font-size:14px;
  color:var(--txt-2); background:var(--btn-bg); border:1px solid var(--vidrio-br);
  transition:background .18s ease}
.about-close:hover{background:var(--btn-bg-hover); color:var(--txt)}
.about-body{font-size:14px; line-height:1.7; color:var(--txt-2)}
.about-body p{margin:0 0 13px}
.about-body p:last-child{margin-bottom:0}
.about-body strong{color:var(--txt); font-weight:800}

/* ── Pie ─────────────────────────────────────────────────────── */
.site-footer{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  padding:22px 40px 40px; border-top:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:12px 24px;
  flex-wrap:wrap; font-size:12px; color:var(--txt-3)}
.footer-izq{display:flex; flex-direction:column; gap:4px}
.footer-cc{display:flex; align-items:center; gap:12px}
.footer-cc strong{color:var(--txt-2); font-weight:800}
.cc-badge img{display:block; height:26px; opacity:.75}

/* ── Pantallas pequeñas ──────────────────────────────────────── */
/* marca + controles en una línea necesitan ~1120 px: por debajo, dos filas.
   Medido, no estimado: si se agrega o quita algo de la barra, volver a medirlo. */
@media (max-width:1120px){
  .barra{flex-direction:column; align-items:stretch; gap:14px}
  .controles{justify-content:flex-end}
}
@media (max-width:900px){
  .placa img{height:56px}
  .sello img{height:38px}
  .envoltura{padding:18px 18px 30px; gap:16px}
  .site-footer{padding:20px 18px 32px}
  .controles{justify-content:space-between}
  .fila-2{grid-template-columns:minmax(0,1fr)}
  .panel{padding:24px 20px}
  .journal-card{padding:20px}
  .franja{justify-content:flex-start}
  .btn-row .btn-primary,.btn-row .btn-ghost{flex:1 1 auto; min-height:44px}
  /* el de los avisos también se pulsa con el dedo: se quedaba en 34 px */
  .notice-box .btn-ghost{min-height:44px}
  .chip,.sub-toggle,.riel button,.btn-manual{min-height:44px}
  .riel button{min-width:44px}
}
@media (max-width:560px){
  .divisor-v{display:none}
  .marca{flex-wrap:wrap; row-gap:12px}
  .sello{width:100%}
  .sello img{height:32px}
  .jc-top{flex-direction:column; gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .chip:hover,.journal-card:hover,.btn-primary:hover,.jc-link:hover,.manual-link-card:hover{transform:none}
}