/* ============================================================
   Sistema Madrina — Design System 2.0
   Moderno, amigable y claro. Misma distribución que el sistema
   actual (buscar → ficha → agendar + historial) con mejor estética.
   ============================================================ */
:root{
  --rojo:#D9412A; --rojo-h:#bb3521; --granate:#8a1c2b;
  --tinta:#232834; --gris:#69707d; --gris-2:#9aa1ac; --gris-3:#c7ccd4;
  --linea:#e9ebef; --linea-2:#f0f2f5; --bg:#f5f7fa; --panel:#ffffff;
  --azul:#2563eb; --azul-bg:#eaf1ff;
  --ok:#15803d; --ok-bg:#e6f6ec; --ok-brd:#b7e4c7;
  --warn:#b45309; --warn-bg:#fef3e2; --warn-brd:#f5d99b;
  --err:#b91c1c; --err-bg:#fdeceb; --err-brd:#f3c0bc;
  --rosa-bg:#fdeef2; --rosa:#be185d;
  --amar-obs:#fff8e6; --amar-brd:#f2e2b0;
  --granate-bg:#f6e9eb; --granate-brd:#e3c4ca;
  --radio:14px; --radio-sm:10px;
  --sombra:0 1px 2px rgba(20,25,40,.04), 0 8px 24px rgba(20,25,40,.06);
  --sombra-sm:0 1px 3px rgba(20,25,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--tinta); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:var(--rojo); text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0}

/* ---------- Barra superior ---------- */
.topbar{background:var(--panel); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:40; box-shadow:var(--sombra-sm)}
.topbar::before{content:''; display:block; height:3px; background:linear-gradient(90deg,var(--granate),var(--rojo) 55%,#e8894f)}
.topbar .row{max-width:1320px; margin:0 auto; padding:9px 22px; display:flex; align-items:center; gap:16px}
/* Marca: logo real de la fundación arriba, texto debajo, enlaza al inicio */
.brand{display:flex; flex-direction:column; align-items:center; gap:2px; white-space:nowrap; padding-right:16px; border-right:1px solid var(--linea)}
.brand:hover{text-decoration:none}
.brand .logo-img{height:28px; width:auto; display:block}
.brand .txt{display:flex; flex-direction:column; line-height:1.2; text-align:center}
.brand .txt b{color:var(--granate); font-weight:800; font-size:11px; letter-spacing:.02em}
.brand .txt small{color:var(--gris-2); font-size:9px; letter-spacing:.03em; text-transform:uppercase}
@media(max-width:1180px){.brand .txt{display:none}}
/* Enlaces del menú (y el botón del desplegable comparten aspecto) */
.nav{display:flex; align-items:center; gap:2px; flex:1; flex-wrap:wrap}
.nav a, .nav .nav-drop-btn{display:inline-flex; align-items:center; gap:6px; color:var(--gris); padding:8px 12px;
  border-radius:10px; font-weight:600; font-size:13px; line-height:1.25; white-space:nowrap;
  border:0; background:none; cursor:pointer; font-family:inherit; transition:background .15s, color .15s}
.nav a:hover, .nav .nav-drop-btn:hover{background:var(--linea-2); color:var(--tinta); text-decoration:none}
.nav a.activo, .nav .nav-drop.activo > .nav-drop-btn{background:#fdeae6; color:var(--rojo); box-shadow:inset 0 0 0 1px #f7d3cb}
.nav .ic{font-size:14px; line-height:1}
/* Desplegable de Recogidas: abre al pasar el ratón (escritorio) o al hacer clic */
.nav-drop{position:relative}
.nav-drop-btn .flecha{font-size:8px; opacity:.65; margin-left:1px; transition:transform .15s}
.nav-drop.abierto .nav-drop-btn .flecha{transform:rotate(180deg)}
.nav-drop-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:210px; padding:6px; display:none; z-index:50;
  background:var(--panel); border:1px solid var(--linea); border-radius:12px; box-shadow:var(--sombra)}
.nav-drop-menu::before{content:''; position:absolute; top:-10px; left:0; right:0; height:10px}  /* puente para no perder el hover */
.nav-drop-menu a{display:flex; width:100%; border-radius:8px; padding:9px 11px; font-size:13px}
.nav-drop.abierto .nav-drop-menu{display:block}
@media(hover:hover){.nav-drop:hover .nav-drop-menu{display:block}}
.userbox{display:flex; align-items:center; gap:10px; white-space:nowrap}
.userbox .rol{background:#fdeae6; color:var(--rojo); border-radius:20px; padding:3px 11px; font-size:11.5px; font-weight:700}
.userbox .nom{font-size:13.5px; font-weight:600}
.btn-salir{background:none; border:1px solid var(--linea); border-radius:8px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; color:var(--gris)}
.btn-salir:hover{border-color:var(--gris-3); color:var(--tinta)}

/* ---------- Contenedor ---------- */
.wrap{max-width:1320px; margin:24px auto; padding:0 24px}
.page-title{font-size:20px; font-weight:700}
.page-sub{color:var(--gris); margin:2px 0 20px; font-size:13.5px}

/* ---------- Tarjetas ---------- */
.card{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--linea); font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-h .ico{margin-right:7px}
.card-b{padding:18px}
.card + .card, .stack > * + *{margin-top:16px}
/* Dentro de un grid, las tarjetas se alinean arriba (sin el margen de apilado). */
.grid-datos > *, .grid-2-3 > *, .grid-cita > *, .citas-cols > *, .split > *{margin-top:0 !important}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radio-sm); border:1px solid transparent;
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; text-decoration:none; white-space:nowrap}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--rojo); color:#fff} .btn-primary:hover{background:var(--rojo-h); text-decoration:none}
.btn-success{background:var(--ok); color:#fff} .btn-success:hover{background:#12692f}
.btn-ghost{background:#fff; color:var(--tinta); border-color:var(--linea)} .btn-ghost:hover{border-color:var(--gris-3)}
.btn-danger-ghost{background:#fff; color:var(--err); border-color:var(--err-brd)} .btn-danger-ghost:hover{background:var(--err-bg)}
.btn-sm{padding:6px 11px; font-size:12.5px}
.btn-block{width:100%; justify-content:center}

/* ---------- Formularios ---------- */
label{display:block; font-size:12px; font-weight:600; color:var(--gris); margin-bottom:5px}
.input{width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:var(--radio-sm);
  font:inherit; font-size:13.5px; background:#fff; transition:.15s; color:var(--tinta)}
.input:focus{outline:none; border-color:var(--rojo); box-shadow:0 0 0 3px rgba(217,65,42,.13)}
/* El espaciado vertical de campos lo da cada contenedor (grid con gap o .form-v);
   así, dentro de un grid todos los campos quedan alineados arriba. */
.form-v{display:grid; gap:12px}
.modal .m-b .field{margin-top:12px}

/* ---------- Buscador ---------- */
.buscador{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap}
.buscador .crit{min-width:180px} .buscador .val{flex:1; min-width:240px}
.buscador .field{margin:0}

/* ---------- Tabla de resultados (2 por fila, como el actual) ---------- */
.tabla{width:100%; border-collapse:collapse; font-size:13.5px}
.tabla th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--gris-2);
  padding:9px 12px; border-bottom:1px solid var(--linea); font-weight:700}
.tabla td{padding:10px 12px; border-bottom:1px solid var(--linea-2)}
.tabla .sep{border-left:2px solid var(--linea)}
.tabla .nom{color:var(--rojo); font-weight:600; cursor:pointer}
.tabla .nom:hover{text-decoration:underline}
.tabla tr:hover td{background:#fbfcfe}
.vacio{color:var(--gris); text-align:center; padding:22px}

/* ---------- Paginación (controles arriba y abajo de una tabla) ---------- */
.paginacion{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; font-size:12px}
.paginacion:empty{display:none}

/* ---------- Ficha: cabecera ---------- */
.perfil{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.perfil .avatar{width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,var(--rojo),var(--granate));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:23px; flex-shrink:0}
.perfil .info{flex:1; min-width:220px}
.perfil .id-chip{display:inline-block; background:var(--azul-bg); color:var(--azul); font-size:11.5px; font-weight:700;
  padding:2px 10px; border-radius:20px; margin-bottom:5px}
.perfil h2{font-size:20px}
.perfil .alta{color:var(--gris); font-size:13px; margin-top:2px}
.perfil .acciones{display:flex; gap:8px; flex-wrap:wrap}
.perfil.penal{background:linear-gradient(0deg,#fff,var(--warn-bg)); padding:12px; border-radius:12px}
/* Penalizada: la tarjeta "Agendar nueva cita" toma el mismo tono amarillento que la cabecera. */
#cardAgendar.penal{background:linear-gradient(0deg,#fff,var(--warn-bg))}

/* switch penalización */
.switch-pen{display:flex; align-items:center; gap:10px; margin-top:10px; padding:8px 12px; border:1px solid var(--linea);
  border-radius:var(--radio-sm); background:#fff; width:fit-content}
.switch{position:relative; width:40px; height:22px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:var(--gris-3); border-radius:20px; transition:.2s; cursor:pointer}
.slider::before{content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--err)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* ---------- Grid de la ficha ---------- */
.grid-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.grid-2-3{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
.grid-cita{display:grid; grid-template-columns:300px 1fr; gap:16px}
@media(max-width:900px){.grid-2-3,.grid-cita{grid-template-columns:1fr}}

/* filas etiqueta/valor */
.kv{display:flex; flex-direction:column; gap:1px; padding:7px 0; border-bottom:1px dashed var(--linea)}
.kv:last-child{border-bottom:0}
.kv .k{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--gris-2); font-weight:600}
.kv .v{font-weight:600; font-size:13.5px}
.obs{background:var(--amar-obs); border:1px solid var(--amar-brd); border-radius:9px; padding:9px 11px; margin-top:4px;
  white-space:pre-wrap; font-size:13px; min-height:20px}
.obs-lbl{font-size:11.5px; font-weight:700; color:var(--gris); margin-top:10px}

/* ---------- Hijos ---------- */
.hijo{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea-2)}
.hijo:last-child{border-bottom:0}
.sexo-ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:15px; flex-shrink:0; margin-top:1px}
.sexo-f{background:var(--rosa-bg); color:var(--rosa)} .sexo-m{background:var(--azul-bg); color:var(--azul)} .sexo-x{background:var(--linea); color:var(--gris)}
.hijo .h-body{flex:1; min-width:0}
.hijo .h-nom{font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hijo .h-nac{font-size:12.5px; color:var(--gris); margin-top:1px}
.hijo .h-linea{display:flex; gap:8px; align-items:baseline; margin-top:7px}
.hijo .h-linea-lbl{font-size:11px; font-weight:700; color:var(--gris-2); white-space:nowrap; flex-shrink:0; min-width:82px}
.hijo .h-linea-val{display:flex; gap:6px; flex-wrap:wrap}

/* ---------- Chips / badges ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700}
.chip-ok{background:var(--ok-bg); color:var(--ok)} .chip-warn{background:var(--warn-bg); color:var(--warn)}
.chip-err{background:var(--err-bg); color:var(--err)} .chip-info{background:var(--azul-bg); color:var(--azul)}
.chip-gris{background:var(--linea-2); color:var(--gris)} .chip-rosa{background:var(--rosa-bg); color:var(--rosa)}

/* ---------- Embarazo ---------- */
.emb-vigente{border:1px solid var(--ok-brd); background:var(--ok-bg); border-radius:10px; padding:12px; margin-bottom:10px}
.emb-hist{border-top:1px dashed var(--gris-3); margin-top:12px; padding-top:10px}
.emb-hist h5{color:var(--gris); font-size:12px; text-transform:uppercase; letter-spacing:.04em; text-align:right; margin-bottom:8px}
.emb-hist .item{font-size:12.5px; color:var(--gris); text-align:right; padding:4px 0}

/* ---------- Citas ---------- */
.citas-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:760px){.citas-cols{grid-template-columns:1fr}}
.col-citas{background:var(--bg); border:1px solid var(--linea); border-radius:11px; padding:12px}
.col-citas h4{text-align:center; color:var(--gris); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px}
.cita{background:#fff; border:1px solid var(--linea); border-left:4px solid var(--gris-3); border-radius:9px; padding:9px 11px;
  margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px}
.cita:last-child{margin-bottom:0}
.cita.ok{border-left-color:var(--ok); background:var(--ok-bg)}
.cita.no{border-left-color:var(--err); background:var(--err-bg)}
.cita.just{border-left-color:var(--warn); background:var(--warn-bg)}
.cita.rec{border-left-color:var(--azul)}
.cita .c-main{display:flex; flex-direction:column; gap:1px}
.cita .c-fecha{font-weight:700}
.cita .c-tipo{color:var(--gris)}
.cita .c-act{display:flex; align-items:center; gap:7px; white-space:nowrap}
.mini-check{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gris); cursor:pointer}

/* ---------- Alertas ---------- */
.alert{border-radius:11px; padding:11px 14px; font-size:13px; margin-bottom:14px; display:flex; gap:8px; align-items:flex-start}
.alert-warn{background:var(--warn-bg); border:1px solid var(--warn-brd); color:var(--warn)}
.alert-err{background:var(--err-bg); border:1px solid var(--err-brd); color:var(--err)}
.alert-ok{background:#eef9f0; border:1px solid var(--ok-brd); color:var(--ok)}
.alert-info{background:var(--azul-bg); color:var(--azul)}
/* Aviso de "dónde sacar este documento" bajo un campo de archivo del formulario público de
   voluntariado: antes era una nota gris fácil de pasar por alto justo donde más hace falta verla
   (el certificado es obligatorio y quien no lo tiene necesita el enlace, no solo el nombre). */
.aviso-doc{margin-top:6px; background:var(--azul-bg); border:1px solid #c7dbfb; border-radius:8px;
  padding:7px 10px; font-size:12.5px; color:var(--azul)}
.aviso-doc a{font-weight:700; color:var(--azul); text-decoration:underline}
/* El aviso de recogida mensual mezcla texto suelto con <b>/<span>: en flex, cada fragmento de texto
   se vuelve un flex item y el gap del .alert mete espacio antes de comas/puntos y parte el mensaje
   en "columnas". Aquí se fuerza flujo de texto normal (una sola línea que envuelve si no cabe). */
.rec-mensual{display:block}
/* El aviso de penalización mezcla texto suelto con <b>: mismo bug que .rec-mensual arriba. */
.alert-penal{display:block}
/* "Penalizada" junto al nombre del beneficiario: destacado, no una simple etiqueta gris. */
.chip-penal{display:inline-flex; align-items:center; gap:3px; margin-left:8px; padding:2px 11px;
  border-radius:20px; background:var(--err); color:#fff; font-size:12px; font-weight:700; vertical-align:middle}

/* ---------- Vigencia de la derivación ----------
   Violeta a propósito: el rojo ya significa "penalizada" y son cosas distintas. Casi siempre
   avisa sin bloquear; solo el bloqueo real (derivación caducada pasado el margen) sube a rojo. */
.alert-vig{display:block; background:#f4f0fb; border:1px solid #d7c9f0; color:#5b3fa0}
.alert-vig b{color:#452e80}
.chip-vig{display:inline-flex; align-items:center; gap:3px; margin-left:8px; padding:2px 11px;
  border-radius:20px; background:#6d4bc4; color:#fff; font-size:12px; font-weight:700; vertical-align:middle}
.perfil.vig{background:linear-gradient(0deg,#fff,#f4f0fb); padding:12px; border-radius:12px}

/* ---------- Instrucciones (panel "?") ---------- */
.instrucciones{background:#fff; border:1px solid var(--linea); border-left:4px solid var(--rojo); border-radius:11px;
  padding:12px 15px; margin-bottom:18px; font-size:13px; color:var(--gris)}
.instrucciones b{color:var(--granate)}

/* ---------- Modal ---------- */
.modal-ov{position:fixed; inset:0; background:rgba(15,20,30,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px}
.modal-ov.abierto{display:flex}
/* Modal que se abre ENCIMA de otro modal (p. ej. el historial de versiones sobre la ficha).
   Todos los .modal-ov comparten z-index:100, así que el que esté antes en el DOM queda debajo y
   parece que no ha pasado nada al pulsar. Con esto sube por encima del que lo invocó. */
.modal-ov.encima{z-index:120}
.modal{background:#fff; border-radius:var(--radio); width:100%; max-width:460px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden}
.modal .m-h{padding:16px 20px; border-bottom:1px solid var(--linea); font-weight:700; display:flex; justify-content:space-between; align-items:center}
.modal .m-b{padding:20px} .modal .m-f{padding:14px 20px; border-top:1px solid var(--linea); display:flex; gap:8px; justify-content:flex-end}
.modal .cerrar{cursor:pointer; color:var(--gris-2); font-size:22px; line-height:1}

/* ---------- Pestañas de proceso (nivel 1) ---------- */
.tabs-l1{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center}
.tab-l1{padding:12px 18px; border-radius:13px; border:2px solid var(--linea); background:#fff; cursor:pointer;
  font:inherit; font-weight:700; font-size:14px; color:var(--gris); transition:.15s; display:flex; align-items:center; gap:8px}
.tab-l1:hover{border-color:var(--gris-3); color:var(--tinta)}
.tab-l1.activo{border-color:var(--rojo); color:var(--rojo); background:#fdeae6}
.tab-l1 small{display:block; font-weight:500; font-size:11px; color:var(--gris-2)}

/* ---------- Zona de proceso (Derivaciones): une con color de fondo la tarjeta
   de nivel 1 con sus bandejas y su contenido, para reconocer el área de un vistazo ---------- */
#zonaProceso{transition:background-color .2s ease}
#zonaProceso.zona-sesion, #zonaProceso.zona-alta{border-radius:18px; padding:16px}
#zonaProceso.zona-sesion{background:var(--azul-bg)}
#zonaProceso.zona-alta{background:var(--granate-bg)}
/* La tarjeta activa "flota" en blanco sobre el color de su zona (misma pista de color en el borde/texto). */
.zona-sesion .tab-l1.activo{border-color:var(--azul); color:var(--azul); background:#fff}
.zona-alta .tab-l1.activo{border-color:var(--granate); color:var(--granate); background:#fff}
/* Bandejas (nivel 2) rellenas con el color de la zona activa. */
.zona-sesion .tab.activo{background:var(--azul); border-color:var(--azul)}
.zona-alta .tab.activo{background:var(--granate); border-color:var(--granate)}

/* ---------- Panel dividido (sesión: lista + detalle) ---------- */
.split{display:grid; grid-template-columns:340px 1fr; gap:16px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.persona-item{padding:10px 12px; border:1px solid var(--linea); border-radius:10px; margin-bottom:8px; cursor:pointer; background:#fff; transition:.12s}
.persona-item:hover{border-color:var(--gris-3)}
.persona-item.sel{border-color:var(--rojo); background:#fdeae6}
.persona-item .pi-nom{font-weight:700; font-size:13.5px}
.persona-item .pi-sub{font-size:12px; color:var(--gris); display:flex; gap:8px; align-items:center; margin-top:2px}

.modal-xl{max-width:1040px !important}

/* ---------- Pestañas ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.tab{padding:8px 14px; border-radius:20px; border:1px solid var(--linea); background:#fff; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--gris); transition:.15s}
.tab:hover{border-color:var(--gris-3); color:var(--tinta)}
.tab.activo{background:var(--rojo); border-color:var(--rojo); color:#fff}
.tab .n{background:rgba(0,0,0,.08); border-radius:10px; padding:0 7px; margin-left:5px; font-size:11px}
.tab.activo .n{background:rgba(255,255,255,.25)}

/* ---------- Código temporal ---------- */
.codigo-chip{font-family:ui-monospace,Consolas,monospace; font-weight:800; letter-spacing:.08em;
  background:var(--azul-bg); color:var(--azul); border-radius:8px; padding:2px 9px; font-size:13px}
.codigo-big{font-family:ui-monospace,Consolas,monospace; font-size:34px; font-weight:800; letter-spacing:.14em;
  background:var(--ok-bg); border:2px dashed var(--ok-brd); color:var(--ok); border-radius:14px;
  padding:14px 26px; display:inline-block}

/* ---------- Timeline de intentos ---------- */
.intento{display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--linea)}
.intento:last-child{border-bottom:0}
.intento .num{width:30px; height:30px; border-radius:50%; background:var(--linea-2); color:var(--gris);
  display:grid; place-items:center; font-weight:800; font-size:13px; flex-shrink:0}
.intento .num.ok{background:var(--ok-bg); color:var(--ok)}
.intento .num.err{background:var(--err-bg); color:var(--err)}
.intento .num.extra{background:var(--warn-bg); color:var(--warn)}

/* ---------- Estado de campos (portal completar-datos) ---------- */
.campo-lleno{background:#eef9f0 !important; border-color:var(--ok-brd) !important}
.campo-vacio{background:#fffbe8 !important; border-color:var(--amar-brd) !important}
.campo-error{border-color:var(--err) !important; background:var(--err-bg) !important}
/* Campo OBLIGATORIO: fondo amarillo suave (mismo tono que los avisos) para distinguirlo del opcional */
.input.oblig, select.oblig, textarea.oblig{background:var(--warn-bg)}
.input.oblig:focus, select.oblig:focus, textarea.oblig:focus{background:#fffdf8}
/* Campo obligatorio que faltaba al intentar enviar: la página lleva hasta él y lo resalta */
.campo-falta{border-radius:10px; box-shadow:0 0 0 3px var(--err-bg), 0 0 0 4px var(--err);
  animation:latido-falta .5s ease-in-out 2}
.campo-falta .input, .campo-falta select, .campo-falta textarea{border-color:var(--err) !important; background:var(--err-bg) !important}
@keyframes latido-falta{0%,100%{transform:scale(1)} 50%{transform:scale(1.015)}}
/* Cabecera del detalle de una sesión: fecha corta arriba y el nº de citadas debajo */
.card-h.cab-sesion{display:block}
.cab-sesion .sesion-cont{font-size:12px; font-weight:400; color:var(--gris); margin-top:2px}
.cab-sesion .sesion-cont b{color:var(--tinta); font-weight:700}
/* Cabecera de Derivaciones: título a la izquierda, enlaces públicos compactos a la derecha */
.cab-derivaciones{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap}
.enlaces-importantes{flex-shrink:0; text-align:right}
.enlaces-importantes .ei-lbl{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gris); margin-bottom:4px}
.enlaces-importantes .ei-fila{display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-bottom:3px}
.enlaces-importantes a{font-size:12px; color:var(--azul); text-decoration:none}
.enlaces-importantes a:hover{text-decoration:underline}
.enlaces-importantes a small{color:var(--gris); font-size:11px}
/* Botón "copiar": rojo y muy pequeño, delante del enlace */
.btn-copiar{background:var(--rojo); color:#fff; border:0; border-radius:5px; padding:1px 7px; font-size:10px;
  font-weight:600; cursor:pointer; line-height:1.75; white-space:nowrap}
.btn-copiar:hover{background:var(--rojo-h)}
@media (max-width:700px){ .enlaces-importantes{text-align:left} .enlaces-importantes .ei-fila{justify-content:flex-start} }
/* Tags con su etiqueta delante (detalle de derivación): un chip suelto no dice qué informa */
.tags-etiquetados{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin-bottom:10px}
.tag-par{display:inline-flex; align-items:center; gap:5px}
.tag-par .tag-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); font-weight:700}
/* Campo DESTACADO por su importancia (p. ej. el móvil: es como se localiza a la persona) */
.field.destacado{background:var(--warn-bg); border:1px solid var(--warn-brd); border-radius:10px; padding:9px 11px}
.field.destacado > label{color:var(--warn); font-weight:700}
.field.destacado .input{background:#fff}

/* ---------- Secciones de formulario (popup de edición / alta) ---------- */
.ed-sec{border:1px solid var(--linea); border-left:4px solid var(--gris-3); border-radius:12px;
  padding:14px 16px; margin-bottom:16px; background:#fbfcfe}
.ed-sec > h4{margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--linea);
  font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px}
.ed-sec .grid-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.ed-sec.s-datos{border-left-color:var(--azul)}       .ed-sec.s-datos > h4{color:var(--azul)}
.ed-sec.s-contacto{border-left-color:var(--ok)}      .ed-sec.s-contacto > h4{color:var(--ok)}
.ed-sec.s-clasif{border-left-color:var(--warn)}      .ed-sec.s-clasif > h4{color:var(--warn)}
.ed-sec.s-obs{border-left-color:var(--gris-2)}       .ed-sec.s-obs > h4{color:var(--gris)}
.ed-sec.s-hijos{border-left-color:var(--granate)}    .ed-sec.s-hijos > h4{color:var(--granate)}
.ed-sec.s-emb{border-left-color:var(--rosa)}         .ed-sec.s-emb > h4{color:var(--rosa)}
/* Consentimientos: panel diferenciado a la derecha (no se confunden con el check de discapacidad) */
.ed-consent{margin-top:14px; margin-left:auto; width:fit-content; max-width:100%; background:var(--azul-bg);
  border:1px solid #cfe0ff; border-radius:11px; padding:11px 14px; display:flex; flex-direction:column; gap:8px}
.ed-consent .ec-titulo{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--azul); margin-bottom:1px}
/* Botón celeste (añadir hijo) */
.btn-celeste{background:var(--azul-bg); color:var(--azul); border-color:var(--azul-bg)}
.btn-celeste:hover{background:#d7e6ff; text-decoration:none}

/* ---------- Hijo: primero el certificado de nacimiento ---------- */
.nota-leche{font-size:11.5px; font-weight:600; color:var(--warn); margin-bottom:3px}
.cert-primero{display:block; font-size:12px; font-weight:600; color:var(--warn); background:var(--warn-bg);
  border:1px solid var(--warn-brd); border-radius:7px; padding:4px 9px; margin:0 0 6px}
.cert-primero.resalta{animation:certPulso .45s ease 5 alternate}
@keyframes certPulso{from{transform:scale(1)} to{transform:scale(1.02); background:#ffe1a8; box-shadow:0 0 0 3px rgba(255,170,0,.3)}}
.hijo-resto{position:relative}
.hijo-resto.bloqueado{opacity:.5}
.hijo-resto .velo{display:none}
.hijo-resto.bloqueado .velo{display:block; position:absolute; inset:0; z-index:5; cursor:not-allowed}

/* ---------- Guía visual de renovación (paso a paso) ---------- */
/* 4 paneles oscuros alrededor del campo activo: bloquean clics fuera y dejan el campo interactivo */
.tour-panel{position:fixed; background:rgba(10,14,22,.62); z-index:300}
.tour-borde{position:fixed; border:2px solid #ffd76a; border-radius:10px; box-shadow:0 0 0 4px rgba(255,215,106,.35); pointer-events:none; z-index:301; transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease}
.tour-caja{position:fixed; z-index:302; width:min(360px, calc(100vw - 28px)); background:#fff; border-radius:13px; box-shadow:0 12px 40px rgba(0,0,0,.35); padding:14px 38px 14px 16px; font-size:13.5px}
.tour-caja h5{margin:0 0 6px; font-size:14px; color:var(--granate); display:flex; align-items:center; gap:6px}
.tour-caja p{margin:0 0 12px; color:var(--gris); line-height:1.45}
.tour-pie{display:flex; align-items:center; gap:8px}
.tour-paso{font-size:11.5px; color:var(--gris-2); font-weight:700; margin-right:auto; white-space:nowrap}
.tour-cerrar{position:absolute; top:8px; right:11px; cursor:pointer; color:var(--gris-2); font-size:16px; line-height:1}
.tour-cerrar:hover{color:var(--err)}

/* ---------- Módulo Citas: agenda y widget Banco ---------- */
.banco-chip{border-radius:11px; padding:8px 14px; text-align:center; cursor:pointer; min-width:86px; border:1px solid}
.banco-chip:hover{filter:brightness(.97)}
.banco-chip .bc-fecha{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.banco-chip .bc-num{font-size:22px; font-weight:800; line-height:1.15}
.banco-chip .bc-sub{font-size:10.5px; opacity:.8}
.bc-ok{background:#eef9f0; border-color:var(--ok-brd); color:var(--ok)}
.bc-alto{background:var(--warn-bg); border-color:var(--warn-brd); color:var(--warn)}
.bc-lleno{background:var(--err-bg); border-color:var(--err-brd); color:var(--err)}
.bc-bloq{background:#f1f2f5; border-color:var(--linea); color:var(--gris-2)}
.lote-barra{display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--azul-bg); border:1px solid #cfe0ff;
  border-radius:10px; padding:8px 12px; margin-bottom:10px}
.semana-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.dia-box{border:1px solid var(--linea); border-radius:12px; padding:10px 12px; text-align:center; cursor:pointer; background:#fbfcfe}
.dia-box:hover{border-color:var(--azul); background:var(--azul-bg)}
.dia-box.hoy{border-color:var(--granate); box-shadow:0 0 0 2px rgba(140,30,50,.12)}
.dia-box.vacio-dia{opacity:.55}
.dia-box .db-cab{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gris)}
.dia-box .db-total{font-size:26px; font-weight:800; margin-top:2px}
.dia-box .db-sub{font-size:11px; color:var(--gris-2); margin-bottom:6px}
.dia-box .db-chips{display:flex; gap:4px; justify-content:center; flex-wrap:wrap}

/* ---------- Módulo Recogidas (Banco del Bebé) ---------- */
/*
 * Las dos columnas de las mesas (lista de personas | ficha de la persona elegida) se mantienen en
 * TABLET, que es donde se trabaja (4-ago). Antes colapsaban por debajo de 900 px, y una tablet en
 * vertical mide 768: se quedaba en una sola columna y había que bajar hasta la ficha cada vez que se
 * elegía a alguien, justo en la pantalla que más se usa y con cola delante.
 *
 * En tablet la columna de la izquierda se estrecha (290 → 210 px) en vez de desaparecer: es una lista
 * de nombres y horas, aguanta bien, y así la ficha se queda con el ancho que necesita.
 *
 * Solo colapsa en MÓVIL (≤ 640 px, el mismo corte que usa la barra superior), donde dos columnas no
 * caben de ninguna manera.
 */
.rec-layout{display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start}
@media (max-width:900px){ .rec-layout{grid-template-columns:250px 1fr; gap:12px} }
@media (max-width:640px){ .rec-layout{grid-template-columns:1fr; gap:16px} }
/*
 * Las dos columnas empiezan a la MISMA altura. `align-items:start` no bastaba: la regla global
 * `.card + .card{margin-top:16px}` —pensada para tarjetas APILADAS en vertical— también alcanzaba al
 * panel, porque dentro de la rejilla es un `.card` que va justo detrás de otro. Resultado: la lista de
 * personas quedaba 16 px por encima de la ficha. Aquí no hace falta ese margen: la separación, en
 * columnas y también al apilarse en móvil, ya la da el `gap` de la rejilla.
 */
.rec-layout > .card + .card{margin-top:0}
.rec-sidebar .card-b{max-height:72vh; overflow-y:auto}
.rec-firmadas{font-size:12px; font-weight:600; color:var(--ok); margin:-2px 0 8px}
/* Color distintivo por mesa: borde superior del panel + fondo del bloque de artículos */
.mesa-full .rec-panel{border-top:4px solid #f0c94b}       /* Recogida full — amarillo */
.mesa-registro .rec-panel{border-top:4px solid #5b9bd5}   /* Mesa registro — celeste */
.mesa-bebes .rec-panel{border-top:4px solid #d982b5}      /* Mesa bebés — rosa */
.mesa-full .rec-articulos{background:#fffbd6; border:1px solid #efe4a3}    /* amarillo (banco full) */
.mesa-bebes .rec-articulos{background:#feebff; border:1px solid #f0cdf3}   /* rosa (mesa bebés) */
.rec-articulos{border-radius:12px; padding:4px 16px 14px; margin-top:6px}
/* Secciones más separadas (divisor) y artículos indentados (más a la derecha) */
.rec-articulos .rec-sec{margin:16px 0 6px; padding-top:11px; border-top:1px dashed rgba(0,0,0,.16)}
.rec-articulos .rec-sec:first-child, .rec-referencia .rec-sec:first-child{margin-top:4px; padding-top:0; border-top:0}
.rec-item, .rec-panal{margin-left:16px}
/* Cabecera: hijos (izq, indentado) y, DEBAJO, el embarazo en una sola línea */
.rec-cab-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap}
.rec-cab-cols{margin-top:12px; padding-top:10px; border-top:1px solid var(--linea)}
.rec-col-hijos{padding-left:14px}
.rec-col-hijos h5{font-size:12px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 6px; color:var(--gris)}
.rec-embarazo-linea{padding-left:14px; margin-top:8px; font-size:13px}
.rec-hijo-linea{padding:3px 0; font-size:13px; border-bottom:1px dotted var(--linea)}
.rec-hijo-linea:last-child{border-bottom:0}
/* Justificante de leche JUSTO tras el hijo (no al extremo derecho) */
.rh-just{margin-left:8px; white-space:nowrap; font-size:12px}
.rh-just.ok{color:var(--ok); font-weight:600}
/* Justificante guardado en la ficha: se puede pinchar para abrir el documento */
.rh-just.ver{background:none; border:1px solid var(--ok-brd); border-radius:20px; padding:1px 9px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:600; color:var(--ok)}
.rh-just.ver:hover{background:var(--ok-bg)}
.rec-hijo-linea .rh-leche{margin-left:8px; white-space:nowrap; font-size:12.5px}
/* Insignia de discapacidad: ♿ pegado a "Discapacidad", texto blanco sobre el mismo azul del símbolo */
.rec-discap{display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding:1px 8px 1px 4px; border-radius:20px; background:#1a7fd0; color:#fff; font-size:10.5px; font-weight:600; line-height:1.6; white-space:nowrap; vertical-align:middle}
/* Dentro de la insignia, el dato "¿necesita pañales?" va entre paréntesis y algo más suave */
.rec-discap .rd-panal{font-weight:500; opacity:.93}
/* Falta ese dato en la ficha → insignia en ámbar para que se note que hay que preguntarlo */
.rec-discap.falta{background:#b45309}
/* Texto legal bajo el recuadro de firma (el mismo que se imprime en la nota de entrega) */
.rec-legal{margin-top:12px; padding:10px 13px; background:var(--bg); border:1px solid var(--linea);
  border-radius:10px; font-size:11px; line-height:1.55; color:var(--gris); text-align:justify; white-space:pre-line}
/* Pista con el dato original de la derivación cuando su vocabulario no casa con el catálogo */
.pista-deriv{font-size:11.5px; line-height:1.4; margin-top:4px}
.pista-deriv:empty{display:none}
/* ---------- Combo buscable (países / nacionalidades) ---------- */
.combo-wrap{position:relative}
.combo-lista{position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:70; max-height:260px; overflow:auto;
  background:var(--panel); border:1px solid var(--linea); border-radius:10px; box-shadow:var(--sombra)}
.combo-op{padding:8px 11px; font-size:13.5px; cursor:pointer}
.combo-op:hover, .combo-op.activa{background:var(--azul-bg); color:var(--azul)}
.combo-vacio{padding:9px 11px; font-size:12.5px; color:var(--gris-2); font-style:italic}
/* Se escribió algo que no está en la lista: se vacía y se avisa un instante */
.combo-invalido{border-color:var(--err) !important; background:var(--err-bg)}
/* ---------- Dashboard de recogidas ---------- */
.dash-barra{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.dash-barra .dash-gen{font-size:11.5px; color:var(--gris-2); margin-bottom:8px}
.dash-barra .dash-exports{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap}
.dash-periodo{margin:16px 0 10px; font-size:15px; color:var(--gris)}
.dash-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.dash-kpi{background:var(--panel); border:1px solid var(--linea); border-top:3px solid var(--gris-3);
  border-radius:var(--radio); padding:13px 15px; box-shadow:var(--sombra-sm); position:relative}
.dash-kpi .dk-ico{font-size:17px; line-height:1}
.dash-kpi .dk-num{font-size:27px; font-weight:800; line-height:1.15; margin-top:2px}
.dash-kpi .dk-nom{font-size:11.5px; color:var(--gris); font-weight:600; text-transform:uppercase; letter-spacing:.02em}
.dash-kpi .dash-ver{margin-top:7px; background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:600; color:var(--azul); text-decoration:underline}
.dash-kpi .dash-ver:hover{color:var(--tinta)}
/* Color por indicador (mismo criterio cromático que el resto del sistema) */
.dash-kpi.ok{border-top-color:var(--ok)} .dash-kpi.ok .dk-num{color:var(--ok)}
.dash-kpi.err{border-top-color:var(--err)} .dash-kpi.err .dk-num{color:var(--err)}
.dash-kpi.warn{border-top-color:var(--warn)} .dash-kpi.warn .dk-num{color:var(--warn)}
.dash-kpi.azul{border-top-color:var(--azul)} .dash-kpi.azul .dk-num{color:var(--azul)}
.dash-kpi.morado{border-top-color:#7c3aed} .dash-kpi.morado .dk-num{color:#7c3aed}
.dash-kpi.gris .dk-num{color:var(--tinta)}
/* Desglose por artículo */
.dash-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}
.dash-item{background:var(--bg); border:1px solid var(--linea); border-radius:11px; padding:11px; text-align:center}
.dash-item .di-ico{font-size:19px; line-height:1}
.dash-item .di-num{font-size:20px; font-weight:800; margin-top:3px}
.dash-item .di-nom{font-size:11.5px; color:var(--gris); line-height:1.3; margin-top:1px}
.dash-ml-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
  font-size:13px; font-weight:600; color:var(--gris)}
/* Caja de alimentos: solo la cifra, sin barra — su cantidad no es comparable con la del resto */
.dash-caja-cifra{margin:8px 0 4px; font-size:14px; font-weight:600}
.dash-caja-cifra b{font-size:18px; font-weight:800; color:var(--ok)}
.dash-sub-grafico{margin:12px 0 2px; font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--gris-2)}
/* Popup "¿requiere pañales?" (dato que falta en fichas con discapacidad venidas del legado) */
.modal-panales .mp-intro{font-size:13px; color:var(--gris); margin:0 0 12px}
.modal-panales .mp-hijo{background:var(--bg); border:1px solid var(--linea); border-radius:11px; padding:11px 13px}
.modal-panales .mp-nom{font-weight:700; font-size:14px}
.modal-panales .mp-tipo{margin-top:4px}
.modal-panales .mp-tipo .rec-discap{margin-left:0}
.modal-panales .mp-aviso{margin-top:8px; font-size:12.5px; color:var(--gris)}
.modal-panales .mp-preg{margin:15px 0 10px; font-weight:700; font-size:14px}
.modal-panales .mp-btns{display:flex; gap:9px}
.modal-panales .mp-btns .btn{flex:1; justify-content:center}
.modal-panales .mp-luego{display:block; width:100%; margin-top:12px; background:none; border:0; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--gris-2); text-decoration:underline}
.modal-panales .mp-luego:hover{color:var(--tinta)}
/* Mesa de bebés: indicador de cuántas personas deben pasar todavía */
.rec-deben-pasar{margin-bottom:10px; text-align:center}
.rec-deben-pasar:empty{display:none}
/* Estados de la lista: firmada → verde (el backend la ordena al final) */
.rec-persona.firmada, .rec-persona.atendida{background:#e9f9ef; border-color:#bfe6cc}
.rec-persona.firmada.activa, .rec-persona.atendida.activa{background:#8ae0a7; border-color:#28a745}
/* Atendida pero SIN firmar (P19): se le empezó a registrar productos y quedó a medias. El backend la
   ordena al final igual que una firmada, así que tiene que cambiar de aspecto —si no, baja sin avisar—,
   pero NO puede ser verde: eso diría "ya firmó", que es justo lo que falta. Ámbar = a medio hacer. */
.rec-persona.atendida:not(.firmada){background:var(--warn-bg); border-color:var(--warn-brd)}
.rec-persona.atendida:not(.firmada).activa{background:#f8d99b; border-color:var(--warn)}
/*
 * Mesa de bebés: citada del día a la que esta mesa NO puede atender. No sale en el listado; solo
 * aparece al buscarla, y entonces tiene que cantar. Rojo y borde discontinuo —"esto no es de la
 * cola"—, distinto del ámbar de la mesa de registro, que significa otra cosa (a medio hacer).
 * Gana a las reglas de arriba por especificidad y por venir después.
 */
.rec-persona.no-elegible{background:var(--err-bg); border:1px dashed var(--err-brd)}
.rec-persona.no-elegible .rp-nom{color:var(--err)}
.rec-persona.no-elegible.activa{background:#f9d4d1; border-color:var(--err); border-style:solid}
/* Referencia de artículos en Mesa registro (solo lectura) */
.rec-referencia{background:#eef4ff; border:1px solid #dbe8fb; border-radius:10px; padding:6px 16px 12px}
.rec-referencia .rec-sec{margin:14px 0 4px}
.rec-bullet{font-size:13.5px; padding:2px 0; margin-left:14px}
/* Edición embebida en iframe: se oculta el cromo para mostrar solo el popup de edición */
body.embed-edicion .topbar{display:none}
body.embed-edicion main, body.embed-edicion .contenido{padding:0; margin:0}
/* En modo embebido, el popup de edición ocupa todo el ancho del iframe (no una columna estrecha) */
body.embed-edicion .modal-ov{padding:10px}
body.embed-edicion .modal{max-width:none !important}
/* Modal con iframe para editar la ficha desde Recogidas: ocupa ~94% de la ventana */
#modalEditarFicha .modal{width:94vw; max-width:none; height:92vh; padding:0; display:flex; flex-direction:column; overflow:hidden}
#modalEditarFicha iframe{flex:1; width:100%; border:0}
/* Visor del justificante de leche (popup con iframe: sirve para imagen o PDF) */
#modalDocLeche .modal.doc-viewer{width:min(900px,95vw); max-width:none; height:88vh; padding:0; display:flex; flex-direction:column; overflow:hidden}
#modalDocLeche .doc-viewer iframe{flex:1; width:100%; border:0; background:#fff}
.rec-persona{border:1px solid var(--linea); border-radius:10px; padding:8px 10px; margin-bottom:7px; cursor:pointer; background:#fbfcfe}
.rec-persona:hover{border-color:var(--azul); background:var(--azul-bg)}
.rec-persona.activa{border-color:var(--granate); box-shadow:0 0 0 2px rgba(140,30,50,.12)}
.rec-persona .rp-nom{font-weight:600; font-size:13px}
.rec-sec-main{margin:16px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--linea); color:var(--granate)}
.rec-sec{margin:14px 0 8px; font-size:13.5px}
.rec-item{display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--linea); border-radius:9px;
  margin-bottom:6px; cursor:pointer; font-size:13.5px; background:#fff; transition:background .2s}
.rec-item:hover{background:#fbfcfe}
.rec-item.entregado{background:#eef9f0; border-color:var(--ok-brd)}
.rec-item input{width:16px; height:16px}
.rec-panal{border:1px solid var(--linea); border-radius:9px; padding:9px 11px; margin-bottom:7px; background:#fff; transition:background .2s}
.rec-tallas{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.rec-talla{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; cursor:pointer; color:var(--gris)}
.flash-ok{background:#dff5e4 !important}
.rec-peligro{margin-top:26px; background:var(--err-bg); border:1px solid var(--err-brd); border-radius:10px;
  padding:12px 14px; font-size:12.5px; color:var(--err); line-height:1.45}

/* ---------- Copiar código temporal ---------- */
.copy-cod{cursor:pointer; margin-left:4px; font-size:12px; opacity:.65; text-decoration:none}
.copy-cod:hover{opacity:1; text-decoration:none}

/* ---------- Utilidades ---------- */
.oculto{display:none!important}
.spinner{display:inline-block; width:34px; height:34px; border:3px solid var(--linea); border-top-color:var(--rojo); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:grid; place-items:center; padding:40px; color:var(--gris)}
.muted{color:var(--gris)}
@media(max-width:640px){.topbar .row{flex-wrap:wrap; gap:12px} .nav{order:3; width:100%}}