@import url("fonts.css");
/* =====================================================================
   Clínica Santa Fe · Plataforma de Certificados
   Identidad: azul marino + azul clínico, fondo claro, estilo salud.
   Tipografía: Sora (títulos) + IBM Plex Sans (texto) + IBM Plex Mono.
   ===================================================================== */
:root{
  /* Marca */
  --navy-900:#0f1944; --navy-800:#16245e; --navy-700:#1d2d72; --navy-600:#243a8a;
  --azul-700:#155bb0; --azul-600:#1f7fd1; --azul-500:#2e93e0; --azul-400:#52aef0;
  --cian:#8fd0f5;

  /* Superficies (tema claro, sector salud) */
  --bg:#eaf1f8; --panel:#ffffff; --panel-2:#f3f7fc; --panel-3:#e9f1fa;
  --linea:#e0e8f2; --linea-fuerte:#cdd9ea;

  /* Texto */
  --txt:#15223f; --txt-mute:#566480; --txt-dim:#8896ad;

  /* Acentos (reutilizados por estilos en línea heredados) */
  --acento:var(--azul-600); --acento-2:var(--azul-700); --acento-soft:rgba(31,127,209,.12);

  /* Estados */
  --ok:#0f9d6b; --ok-bg:#e3f6ee;
  --err:#d63d54; --err-bg:#fbe7ea;
  --info:#1f7fd1; --info-bg:#e6f1fb;
  --warn:#c77d12; --warn-bg:#fbf0dc;

  --radio:16px; --radio-sm:10px;
  --sombra:0 1px 2px rgba(22,36,94,.06), 0 12px 32px rgba(22,36,94,.10);
  --sombra-sm:0 1px 2px rgba(22,36,94,.06), 0 4px 14px rgba(22,36,94,.07);
  --fuente:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fuente-titulo:'Sora','IBM Plex Sans',system-ui,sans-serif;
  --fuente-mono:'IBM Plex Mono','Courier New',monospace;
}
/* Fuentes del generador de certificados (para que el editor sea fiel a la imagen final) */
@font-face{font-family:'CertSerif';src:url('../fonts/LiberationSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CertSerif';src:url('../fonts/LiberationSerif-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CertSans';src:url('../fonts/DejaVuSans.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CertSans';src:url('../fonts/DejaVuSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CertMontserrat';src:url('../fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CertMontserrat';src:url('../fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CertPlayfair';src:url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CertPlayfair';src:url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CertScript';src:url('../fonts/GreatVibes-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* overflow-x:clip evita el scroll horizontal SIN crear contenedor de scroll (hidden rompía el sticky del sidebar);
   sin height:100% el body crece con el contenido y el scroll vuelve al viewport. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--fuente);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- Scrollbars modernos (todo el sistema) ---------- */
*{scrollbar-width:thin;scrollbar-color:#c2cfe0 transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c2cfe0;border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#9fb2cf;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* Menú lateral (fondo navy): pulgar translúcido claro */
.sidebar{scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar ::-webkit-scrollbar-thumb,.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box;border:3px solid transparent}
.sidebar ::-webkit-scrollbar-thumb:hover,.sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38);background-clip:content-box}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--fuente-titulo);letter-spacing:-.01em}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:244px;flex-shrink:0;color:#dfe7f5;background:var(--navy-800);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .18s ease}
.brand{display:flex;gap:13px;align-items:center;padding:18px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .logo-img{flex-shrink:0}
.brand a{display:block}
.brand .marca-mini{display:none}
.sidebar nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden}
.sidebar nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;white-space:nowrap;
  color:#b7c6e2;font-size:14px;font-weight:500;transition:.14s ease;position:relative}
.ico-svg{width:20px;height:20px;flex-shrink:0}
.sidebar nav a .ico-svg{opacity:.85;transition:.14s}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar nav a:hover .ico-svg{opacity:1}
/* Ítem activo: pastilla azul de marca (sin barrita lateral) — se ve al instante
   dónde estás y refuerza la identidad sobre el navy del menú. */
.sidebar nav a.activo{background:var(--azul-600);color:#fff;font-weight:700}
.sidebar nav a.activo .ico-svg{opacity:1;color:#fff}
.sidebar nav a.activo:hover{background:var(--azul-700);color:#fff}
.sidebar .nav-grupo{padding:15px 12px 5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#7e93bb}
.nav-colapsar{display:flex;align-items:center;gap:11px;margin:4px 10px;padding:9px 12px;border-radius:9px;
  background:none;border:none;cursor:pointer;color:#8ea2c8;font-size:13px;font-weight:500;white-space:nowrap}
.nav-colapsar:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-user{display:flex;align-items:center;gap:8px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.09)}
.sidebar-user-link{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:inherit;padding:4px 6px;border-radius:10px;transition:.14s}
.sidebar-user-link:hover{background:rgba(255,255,255,.08)}
.avatar{width:38px;height:38px;border-radius:11px;background:var(--azul-600);flex-shrink:0;
  display:grid;place-items:center;font-weight:700;color:#fff;font-family:var(--fuente-titulo)}
.sidebar-user-info{flex:1;overflow:hidden}
.sidebar-user-info strong{display:block;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-info span{display:inline-block;font-size:10.5px;color:#cdd9ea;text-transform:capitalize;
  background:rgba(255,255,255,.10);padding:1px 8px;border-radius:20px;margin-top:3px;letter-spacing:.02em}
.logout{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;color:#cdd9ea;background:rgba(255,255,255,.07);border-radius:9px;transition:.15s}
.logout svg{width:18px;height:18px}
.logout:hover{color:#fff;background:rgba(214,69,69,.45)}

/* Menú contraído (solo escritorio) */
@media(min-width:1024px){
  .sidebar{transition:width .18s ease}
  html.nav-colapsado .sidebar{width:72px}
  /* Con pocos ítems no hace falta scroll: overflow visible para que el tooltip no se recorte */
  html.nav-colapsado .sidebar nav{overflow:visible}
  /* Tooltip propio (con la marca) al pasar sobre un ícono del menú contraído */
  html.nav-colapsado .sidebar nav a:hover::after{content:attr(title);position:absolute;left:calc(100% + 12px);top:50%;
    transform:translateY(-50%);background:var(--navy-900);color:#fff;font-size:12px;font-weight:600;
    padding:6px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 22px rgba(6,12,40,.4);z-index:40;pointer-events:none}
  html.nav-colapsado .sidebar .marca-full{display:none}
  html.nav-colapsado .sidebar .marca-mini{display:block;margin:0 auto}
  html.nav-colapsado .brand{justify-content:center;padding:16px 0}
  html.nav-colapsado .sidebar nav{padding:12px 8px}
  html.nav-colapsado .sidebar nav a{justify-content:center;padding:10px 0}
  html.nav-colapsado .sidebar nav a .nav-txt{display:none}
  html.nav-colapsado .sidebar .nav-grupo{padding:0;height:0;margin:9px 16px;border-top:1px solid rgba(255,255,255,.14)}
  html.nav-colapsado .sidebar .nav-grupo span{display:none}
  html.nav-colapsado .nav-colapsar{justify-content:center;margin:4px 8px}
  html.nav-colapsado .nav-colapsar .nav-txt{display:none}
  html.nav-colapsado .nav-colapsar .ico-svg{transform:rotate(180deg)}
  html.nav-colapsado .sidebar-user{justify-content:center;padding:13px 0}
  html.nav-colapsado .sidebar-user-link{display:none}
}

.contenido{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 26px;border-bottom:1px solid var(--linea);position:sticky;top:0;
  background:var(--panel);z-index:5}
.topbar h1{font-size:20px;font-weight:700;color:var(--navy-800)}
/* Barra de acciones: migas de pan (izq) + botón principal (der), bajo el título */
.barra-accion{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:11px 26px;background:var(--panel);border-bottom:1px solid var(--linea)}
.migas{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-mute);flex-wrap:wrap;min-width:0}
.migas a{color:var(--txt-mute);text-decoration:none}
.migas a:hover{color:var(--azul-700);text-decoration:underline}
.migas .sep{color:var(--txt-dim)}
.migas .actual{color:var(--navy-800);font-weight:600}
.barra-accion-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
@media(max-width:860px){.barra-accion{padding:11px 16px}}
.contenido-inner{padding:22px 26px;max-width:1240px;width:100%;margin-inline:auto}

/* ---------- Tarjetas / paneles ---------- */
.card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px;margin-bottom:18px;box-shadow:var(--sombra-sm)}
.card h2{font-family:var(--fuente-titulo);font-size:16px;margin-bottom:16px;font-weight:650;color:var(--navy-800)}
.card h2 small{font-weight:400;color:var(--txt-dim);font-size:12.5px;margin-left:6px;font-family:var(--fuente)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2>*,.grid-3>*{min-width:0}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:18px}

/* ---------- Tarjetas de plantilla ---------- */
.tpl-card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra-sm);transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column}
.tpl-card:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--azul-400)}
.tpl-thumbs{display:flex;aspect-ratio:1.414;position:relative;padding:12px;
  background:#e9eef5;background-image:radial-gradient(rgba(24,37,95,.10) 1px,transparent 1px);background-size:14px 14px}
.tpl-thumb{flex:1;min-width:0;position:relative;display:block;overflow:hidden}
.tpl-thumb img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 5px 12px rgba(22,36,94,.20));transition:transform .18s;
  animation:tplFade .3s ease both}   /* fundido de entrada: evita el parpadeo al cargar */
@keyframes tplFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.tpl-thumb img{animation:none}}
.tpl-card:hover .tpl-thumb img{transform:scale(1.025)}
.tpl-toggle{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:inline-flex;
  background:#fff;border:1px solid var(--linea-fuerte);border-radius:8px;overflow:hidden;box-shadow:var(--sombra-sm);z-index:3}
.tpl-toggle button{border:0;background:#fff;color:var(--txt-mute);font-family:var(--fuente);font-size:11.5px;font-weight:600;padding:6px 13px;cursor:pointer;line-height:1}
.tpl-toggle button + button{border-left:1px solid var(--linea)}
.tpl-toggle button.activo{background:var(--azul-600);color:#fff}
.tpl-toggle button:hover:not(.activo){background:var(--panel-2)}
/* Plantilla cuyo PNG de fondo no está en disco (típico al mover la base de datos sin la
   carpeta uploads/plantillas/). Sustituye a la imagen rota por un aviso accionable. */
.tpl-thumb-falta{display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--err);border-radius:10px;background:var(--err-bg)}
.tpl-falta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:14px;color:var(--err)}
.tpl-falta svg{width:26px;height:26px;opacity:.85}
.tpl-falta strong{font-size:13px;line-height:1.3}
.tpl-falta small{font-size:11.5px;color:var(--txt-mute);line-height:1.35;max-width:26ch}
.tpl-edit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(24,37,95,.5);color:#fff;font-weight:700;font-size:13.5px;opacity:0;transition:opacity .16s}
.tpl-edit svg{width:17px;height:17px}
.tpl-thumb:hover .tpl-edit,.tpl-thumb:focus-visible .tpl-edit{opacity:1}
.tpl-body{padding:14px 15px;display:flex;flex-direction:column;gap:10px;flex:1}
.tpl-nombre{font-weight:700;color:var(--navy-800);font-size:15px;line-height:1.25}
.tpl-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpl-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:nowrap}
.tpl-actions>.btn:first-child{flex:1}
/* Galería de fondos prediseñados (modal Nueva plantilla) */
.fondo-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:4px}
.fondo-op{position:relative;cursor:pointer;border:2px solid var(--linea);border-radius:11px;overflow:hidden;background:#fff;transition:.14s;display:block}
.fondo-op input{position:absolute;opacity:0;pointer-events:none}
.fondo-op img{width:100%;display:block;aspect-ratio:1.414;object-fit:cover;background:#eef3f9}
.fondo-op>span{display:block;padding:6px 8px;font-size:12px;font-weight:600;color:var(--navy-800);text-align:center}
.fondo-op:hover{border-color:var(--azul-400)}
.fondo-op:has(input:checked){border-color:var(--azul-600);box-shadow:0 0 0 2px var(--acento-soft)}
.fondo-subir-ph{aspect-ratio:1.414;display:grid;place-items:center;gap:6px;color:var(--azul-700);background:var(--panel-2)}
.fondo-subir-ph svg{width:26px;height:26px}
.fondo-subir-ph span{font-size:12px;font-weight:600}
/* Vista previa en vivo del modal "Nueva plantilla" */
.pl-preview-wrap{display:flex;gap:10px;margin-bottom:14px}
.pl-preview{flex:1;min-width:0;height:210px;margin:0;border:1px solid var(--linea);border-radius:10px;background:#eef3f9;
  overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8px;position:relative}
.pl-preview img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:opacity .15s}
.pl-preview img.cargando{opacity:.35}
.pl-preview-cap{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(24,37,95,.82);color:#fff;
  font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px}
.pl-preview-msg{color:var(--txt-mute);font-size:12.5px;padding:14px;text-align:center}
/* Selector de archivo estilizado (dropzone) */
.file-drop{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-top:2px;border:1.5px dashed var(--linea-fuerte);
  border-radius:12px;background:var(--panel-2);cursor:pointer;transition:border-color .15s,background .15s}
.file-drop:hover,.file-drop.arrastrando{border-color:var(--azul-600);background:var(--acento-soft)}
.file-drop input[type=file]{display:none}
.file-drop-ico{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center}
.file-drop-ico svg{width:22px;height:22px}
.file-drop-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.file-drop-txt strong{color:var(--navy-800);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-drop-txt small{color:var(--txt-mute);font-size:12px}
.file-drop-txt small.file-warn{color:var(--warn)}
.file-drop-txt small.file-ok{color:#1f9d57}
/* Visor de logs (diagnóstico) */
.log-box{background:#0f1530;color:#cdd9ea;border-radius:12px;padding:16px;font-family:var(--fuente-mono);font-size:12px;line-height:1.6;max-height:440px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0}
/* Lista de comprobación del sistema (health check) */
.chk-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.chk-list li{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border:1px solid var(--linea);border-radius:11px;background:#fff}
.chk-list li svg{width:19px;height:19px;flex-shrink:0;margin-top:1px}
.chk-list li>div{display:flex;flex-direction:column;line-height:1.35}
.chk-list li strong{color:var(--navy-800);font-size:14px}
.chk-list li small{color:var(--txt-mute);font-size:12.5px}
.chk-list li.chk-ok{border-color:rgba(34,160,94,.3);background:var(--ok-bg)}
.chk-list li.chk-ok svg{color:var(--ok)}
.chk-list li.chk-error{border-color:rgba(214,69,69,.3);background:var(--err-bg)}
.chk-list li.chk-error svg{color:var(--err)}
.chk-list li.chk-info svg{color:var(--azul-700)}
/* Desglose de almacenamiento (diagnóstico) */
.alm-tabla{width:100%;border-collapse:collapse;margin-top:4px;font-size:14px}
.alm-tabla td{padding:11px 4px;border-bottom:1px solid var(--linea)}
.alm-tabla .alm-lbl{color:var(--navy-800);font-weight:600}
.alm-tabla .alm-n{color:var(--txt-dim);font-size:12.5px;white-space:nowrap;text-align:center}
.alm-tabla .alm-sz{text-align:right;font-family:var(--fuente-titulo);font-weight:700;color:var(--navy-800);white-space:nowrap}
.alm-tabla tfoot td{border-bottom:none;border-top:2px solid var(--linea-fuerte);padding-top:12px;color:var(--txt-mute)}
.alm-tabla tfoot .alm-lbl{color:var(--txt-mute)}
@media(max-width:560px){.alm-tabla .alm-n{display:none}}
/* Lista de archivos huérfanos (mantenimiento) */
.huerf-lista{max-height:210px;overflow-y:auto;border:1px solid var(--linea);border-radius:10px;background:var(--panel-2);font-size:12.5px}
.huerf-lista>div{display:flex;justify-content:space-between;gap:12px;padding:7px 12px;border-bottom:1px solid var(--linea)}
.huerf-lista>div:last-child{border-bottom:none}
.huerf-lista .mono{font-family:var(--fuente-mono);color:var(--navy-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.huerf-lista .huerf-sz{color:var(--txt-mute);white-space:nowrap}
.huerf-lista .huerf-mas{color:var(--txt-dim);font-style:italic;justify-content:center}
/* Avisos del sistema (superadmin) */
.avisos{display:flex;flex-direction:column;gap:8px}
.aviso{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;font-size:13.5px}
.aviso svg{width:18px;height:18px;flex-shrink:0}
.aviso span{flex:1;min-width:0}
.aviso a{font-weight:600;white-space:nowrap}
.aviso-warn{background:#fef3c7;color:#7c4a03}
.aviso-warn a{color:#7c4a03;text-decoration:underline}
.aviso-info{background:var(--acento-soft);color:var(--azul-700)}
.aviso-info a{color:var(--azul-700);text-decoration:underline}
/* Banner de modo mantenimiento (para usuarios con sesión) */
.mant-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#fde68a;color:#7c4a03;padding:9px 16px;font-size:13.5px;font-weight:600;text-align:center}
.mant-banner svg{width:17px;height:17px;flex-shrink:0}
.mant-banner a{color:#7c4a03;text-decoration:underline;font-weight:700}
/* Pestañas Frente/Reverso para elegir el fondo de cada cara */
.fondo-tabs{display:inline-flex;border:1px solid var(--linea-fuerte);border-radius:9px;overflow:hidden;margin-bottom:10px}
.fondo-tab{border:0;background:#fff;color:var(--txt-mute);font-family:inherit;font-size:13px;font-weight:600;padding:7px 18px;cursor:pointer;transition:.12s}
.fondo-tab + .fondo-tab{border-left:1px solid var(--linea-fuerte)}
.fondo-tab.activo{background:var(--azul-600);color:#fff}
.fondo-tab:hover:not(.activo){background:var(--panel-2)}
/* Listado de plantillas: buscador + chips de filtro (barra pegajosa) sobre una sola rejilla */
.tpl-barra{position:sticky;top:52px;z-index:4;background:var(--bg);padding:14px 0 12px;margin-bottom:8px;
  border-bottom:1px solid var(--linea)}
.tpl-filtros{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.tpl-filtros input{flex:1;min-width:200px;padding:10px 12px;border:1.5px solid var(--linea-fuerte);border-radius:10px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--txt)}
.tpl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tpl-chip{border:1.5px solid var(--linea-fuerte);background:#fff;color:var(--txt-mute);font-family:inherit;font-size:13px;
  font-weight:600;padding:7px 14px;border-radius:20px;cursor:pointer;transition:.12s}
.tpl-chip:hover{border-color:var(--azul-400);color:var(--navy-800)}
.tpl-chip.activo{background:var(--azul-600);border-color:var(--azul-600);color:#fff}
#tpl-grid{margin-top:14px}
.rec-thumb{aspect-ratio:1.9;display:grid;place-items:center;overflow:hidden;padding:16px;
  background-color:#eef2f7;
  background-image:linear-gradient(45deg,#dde6f0 25%,transparent 25%),linear-gradient(-45deg,#dde6f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dde6f0 75%),linear-gradient(-45deg,transparent 75%,#dde6f0 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.rec-thumb img{max-width:100%;max-height:100%;object-fit:contain}
/* Recurso cuyo archivo no está en disco. Sustituye el damero de transparencia (que aquí
   solo confunde) por un aviso; la caja es apaisada y baja, así que el contenido va en una
   línea de icono + título + nota, sin botón dentro. Toda la miniatura es pulsable. */
.rec-thumb-falta{width:100%;border:1px dashed var(--err);border-radius:10px;cursor:pointer;
  background-image:none;background-color:var(--err-bg);padding:10px;font:inherit;text-align:center}
.rec-thumb-falta:hover{background-color:#fde8ec}
.rec-falta{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--err);min-width:0}
.rec-falta svg{width:22px;height:22px;opacity:.85}
.rec-falta strong{font-size:13px;line-height:1.2}
.rec-falta small{font-size:11px;color:var(--txt-mute);line-height:1.3}
.rec-datos{margin-top:9px;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--txt-mute)}
/* Aviso de uso al sustituir una firma: el dato primero y las dos salidas como opciones,
   en vez de un párrafo que nadie lee cuando está resolviendo una incidencia. */
/* Bloque de imagen dentro del modal de edición: la actual a la izquierda, el selector a la
   derecha. Así se ve qué hay antes de decidir cambiarlo. */
.rec-img-edit{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.rec-img-actual{width:120px;flex:none;aspect-ratio:1.6;display:grid;place-items:center;padding:8px;
  border:1px solid var(--linea);border-radius:10px;
  background-color:#eef2f7;
  background-image:linear-gradient(45deg,#dde6f0 25%,transparent 25%),linear-gradient(-45deg,#dde6f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dde6f0 75%),linear-gradient(-45deg,transparent 75%,#dde6f0 75%);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.rec-img-actual img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:520px){.rec-img-actual{width:100%;aspect-ratio:2.4}}
.rec-uso{border:1px solid var(--linea);border-radius:11px;overflow:hidden;margin-bottom:14px}
.rec-uso-n{background:var(--panel-2);padding:10px 13px;font-size:13px;color:var(--txt)}
.rec-uso-n strong{color:var(--navy-800);font-size:15px}
.rec-uso-n span{color:var(--txt-mute)}
.rec-uso-op{display:flex;align-items:flex-start;gap:8px;padding:9px 13px;font-size:12.5px;
  color:var(--txt-mute);border-top:1px solid var(--linea)}
.rec-uso-op strong{color:var(--txt)}
.rec-uso-op .ico-svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ok)}
.rec-uso-no .ico-svg{color:var(--err)}
.rec-datos .ico-svg{width:14px;height:14px;vertical-align:-2px;color:var(--azul-600)}
/* Editor al subir firma/sello (recortar + quitar fondo) */
.rec-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:560px){.rec-editor-grid{grid-template-columns:1fr}}
.rec-sub{display:block;font-size:13px;color:var(--navy-800);font-weight:600;margin-bottom:6px}
.rec-crop{max-height:300px;background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
/* Recorte: manijas grandes y visibles (las de fábrica de cropper son puntos de 5px al 75%) */
.rec-crop .cropper-view-box{outline:2px solid var(--azul-600);outline-offset:-1px}
.rec-crop .cropper-line{background:var(--azul-600)}
.rec-crop .cropper-point{width:13px;height:13px;background:#fff;border:2px solid var(--azul-600);border-radius:50%;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rec-crop .cropper-point.point-nw{top:-7px;left:-7px}
.rec-crop .cropper-point.point-ne{top:-7px;right:-7px}
.rec-crop .cropper-point.point-sw{bottom:-7px;left:-7px}
.rec-crop .cropper-point.point-se{bottom:-7px;right:-7px;width:13px;height:13px}
.rec-crop .cropper-point.point-n{top:-7px;margin-left:-7px}
.rec-crop .cropper-point.point-s{bottom:-7px;margin-left:-7px}
.rec-crop .cropper-point.point-e{right:-7px;margin-top:-7px}
.rec-crop .cropper-point.point-w{left:-7px;margin-top:-7px}
.rec-crop img{display:block;max-width:100%}
.rec-crop-btns{display:flex;gap:6px;margin-top:8px}
.rec-preview-wrap{min-height:150px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:10px;padding:10px;
  background-color:#eef2f7;
  background-image:linear-gradient(45deg,#dde6f0 25%,transparent 25%),linear-gradient(-45deg,#dde6f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dde6f0 75%),linear-gradient(-45deg,transparent 75%,#dde6f0 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.rec-preview-wrap canvas{max-width:100%;max-height:210px}
.cfg-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px 20px;box-shadow:var(--sombra-sm);color:var(--txt);transition:.14s}
.cfg-card:hover{border-color:var(--azul-400);box-shadow:var(--sombra);transform:translateY(-2px)}
.cfg-intro{color:var(--txt-mute);font-size:14px;margin:0}
.cfg-card:hover .cfg-arrow{color:var(--azul-600);transform:translateX(2px)}
.cfg-card .cfg-ico{width:48px;height:48px;border-radius:13px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;flex-shrink:0}
.cfg-card .cfg-ico .ico-svg{width:24px;height:24px}
.cfg-card .cfg-txt{flex:1;min-width:0}
.cfg-card .cfg-txt strong{display:block;color:var(--navy-800);font-size:15.5px}
.cfg-card .cfg-txt small{color:var(--txt-mute);font-size:13px}
.cfg-card .cfg-arrow{color:var(--txt-dim);flex-shrink:0;transition:.14s}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.cfg-seccion{font-family:var(--fuente-titulo);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt-mute);margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.guia-pasos{list-style:none;display:flex;flex-direction:column;gap:16px}
.guia-pasos li{display:flex;gap:14px;align-items:flex-start}
.guia-pasos .paso-n{width:30px;height:30px;border-radius:50%;background:var(--azul-600);color:#fff;font-weight:700;
  display:grid;place-items:center;flex-shrink:0;font-family:var(--fuente-titulo);font-size:14px}
.guia-pasos strong{color:var(--navy-800);font-size:15px}
.guia-pasos p{color:var(--txt-mute);font-size:13.5px;margin-top:3px;line-height:1.5}
.guia-faq dt{font-weight:600;color:var(--navy-800);margin-top:14px}
.guia-faq dt:first-child{margin-top:0}
.guia-faq dd{color:var(--txt-mute);font-size:13.5px;margin:3px 0 0;line-height:1.5}
.ph-chip{background:var(--acento-soft);border:1px solid var(--linea-fuerte);color:var(--azul-700);border-radius:20px;
  padding:4px 10px;font-size:12px;font-family:var(--fuente-mono);cursor:pointer;font-weight:600}
.ph-chip:hover{background:var(--azul-600);color:#fff;border-color:var(--azul-600)}

/* ---------- Métricas ---------- */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-bottom:18px}
/* Con EXACTAMENTE 4 tarjetas (el dashboard), el auto-fit de arriba elegía 3 columnas en
   anchos intermedios y dejaba la cuarta huérfana abajo (tablet), o metía 4 apretadas con
   los textos partidos en dos líneas (portátil de 1024 con la barra colapsada). Para 4
   elementos solo hay dos repartos que se ven bien: 2×2 o los 4 en fila — nunca 3+1.
   El :has limita la regla a grids de 4; las páginas con 3 métricas siguen con el auto-fit
   (para 3, tres columnas SÍ es lo correcto). Sin :has (navegador viejo) todo queda como
   estaba: es una mejora, no un requisito. */
@media (min-width:561px){
  .metricas:has(> .metrica:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
  .metricas:has(> .metrica:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
.metrica{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:15px 16px;box-shadow:var(--sombra-sm);position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px}
.metrica .m-ico{width:42px;height:42px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:var(--acento-soft);color:var(--azul-700)}
.metrica .m-ico .ico-svg{width:22px;height:22px}
.metrica .m-txt{min-width:0}
.metrica .valor{font-family:var(--fuente-titulo);font-size:27px;font-weight:700;letter-spacing:-.5px;color:var(--navy-800);line-height:1.1}
.metrica .etq{color:var(--txt-mute);font-size:12.5px;margin-top:2px}
/* Acento por métrica: franja superior + tile de color (planos, sin gradiente) */
.metrica{border-top:3px solid var(--azul-600)}
.metrica.m-ok{border-top-color:var(--ok)}
.metrica.m-ok .m-ico{background:var(--ok-bg);color:var(--ok)}
.metrica.m-verif{border-top-color:var(--warn)}
.metrica.m-verif .m-ico{background:var(--warn-bg);color:var(--warn)}
.metrica.m-navy{border-top-color:var(--navy-700)}
.metrica.m-navy .m-ico{background:rgba(22,36,94,.10);color:var(--navy-700)}

.chart-box{position:relative;height:260px;width:100%}
.chart-box-alta{height:300px}
@media(max-width:560px){.chart-box,.chart-box-alta{height:240px}}

/* Listas compactas (dashboard) */
.lista-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--linea);color:var(--txt);transition:.12s}
.lista-item:last-child{border-bottom:none}
.lista-item:hover{background:var(--panel-2)}
.lista-item .li-txt{flex:1;min-width:0}
.lista-item .li-ico{width:34px;height:34px;border-radius:9px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;flex-shrink:0}
/* Cabecera del dashboard: saludo + filtro de periodo en la misma fila */
/* Cabecera en UNA fila: título a la izquierda, chips de periodo a la derecha. El
   formulario de fechas vive plegado en el chip "Fechas", así que la fila cabe incluso
   a 1024 y los KPI suben a la primera vista. Si no cabe, envuelve solo. */
.dash-cab{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}
.saludo h2{font-family:var(--fuente-titulo);font-size:21px;font-weight:700;color:var(--navy-800);letter-spacing:-.3px}
.saludo small{display:block;color:var(--txt-mute);font-size:13px;margin-top:2px}
.dash-cab .dash-filtro{margin-bottom:0}
/* Chip de tendencia en la métrica (delta con signo vs periodo anterior) */
.m-delta{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;font-weight:700}
.m-delta .ico-svg{width:13px;height:13px}
.m-delta span{font-weight:500;color:var(--txt-dim)}
.m-delta.arriba{color:var(--ok)}
.m-delta.abajo{color:var(--err)}
.m-delta.igual{color:var(--txt-mute)}

/* "Ya puedes cerrar": aparece solo cuando el trabajo está guardado y el cron puede
   terminarlo, nunca antes — si no, sería una promesa falsa. */
.wz-cerrar-ok{display:flex;align-items:flex-start;gap:9px;margin-top:16px;padding:11px 13px;
  background:var(--ok-bg);border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius:10px;color:var(--navy-800);font-size:13px;line-height:1.45;text-align:left}
.wz-cerrar-ok .ico-svg{width:17px;height:17px;color:var(--ok);flex:0 0 auto;margin-top:1px}
.wz-cerrar-ok strong{color:var(--ok)}
/* Sin cron no se puede prometer nada: el mismo hueco avisa lo contrario. */
/* Sin cron el mensaje informa (se pausa y se retoma con un clic), no advierte de un
   riesgo: en ámbar parecía que cerrar rompía algo. Va en azul de información. */
.wz-cerrar-ok.aviso{background:var(--acento-soft);border-color:color-mix(in srgb, var(--info) 28%, transparent)}
.wz-cerrar-ok.aviso .ico-svg,.wz-cerrar-ok.aviso strong{color:var(--azul-700)}
.trab-banner.trab-parado{background:var(--warn-bg);border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.trab-banner.trab-parado .ico-svg{color:var(--warn)}
.trab-banner.trab-parado .trab-barra i{background:var(--warn)}

/* Banner de emisión en curso: al volver, dice qué está pasando sin tener que buscarlo. */
.trab-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:13px 16px;
  background:var(--acento-soft);border:1px solid color-mix(in srgb, var(--azul-600) 25%, transparent);
  border-radius:12px}
.trab-banner .ico-svg{width:18px;height:18px;color:var(--azul-600);flex:0 0 auto}
.trab-txt{flex:1;min-width:200px;font-size:13.5px;color:var(--navy-800)}
.trab-txt small{display:block;color:var(--txt-dim);font-size:12px;margin-top:2px}
/* Quién dejó la emisión a medias (solo si no fuiste tú). */
.trab-autor{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;background:#fff;
  border:1px solid var(--linea);color:var(--txt-dim);font-size:11.5px;font-weight:600;vertical-align:1px}
/* display:block es obligatorio: es un <span> y en línea se ignoran alto y ancho. */
.trab-barra{display:block;width:100%;height:6px;background:#fff;border-radius:99px;overflow:hidden;margin-top:7px}
.trab-barra i{display:block;height:100%;background:var(--azul-600);border-radius:99px;transition:width .4s}

/* Atajos de periodo: el rango deja de ser algo que hay que deducir de dos calendarios. */
.per-chips{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:5px;box-shadow:var(--sombra-sm)}
.per-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:600;color:var(--txt-dim);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.per-chip:hover{background:var(--acento-soft);color:var(--azul-700)}
.per-chip.activo{background:var(--azul-600);color:#fff}
.per-chip.activo:hover{background:var(--azul-700);color:#fff}
.per-chip .ico-svg{width:14px;height:14px}

/* Chip "Fechas": pliega el formulario de rango a medida en un desplegable (details/
   summary, sin JavaScript). Antes el formulario ocupaba una fila entera SIEMPRE, para
   algo que se usa de vez en cuando; los atajos cubren el uso diario. */
.df-det{position:relative;display:inline-flex}
.df-det summary{list-style:none}
.df-det summary::-webkit-details-marker{display:none}
.df-pop{position:absolute;right:0;top:calc(100% + 9px);z-index:40;margin:0}

/* Aclara que el KPI de cursos activos es un estado de hoy, no del periodo filtrado. */
.metrica .etq-fijo{display:block;color:var(--txt-mute);font-size:11px;font-weight:500;margin-top:1px;opacity:.85}

.dash-filtro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:10px 14px;box-shadow:var(--sombra)}
.dash-filtro .df-lbl{font-weight:600;color:var(--txt-mute);font-size:13px}
.dash-filtro input[type=date]{padding:7px 10px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);border-radius:8px;color:var(--txt);font-size:13.5px;font-family:inherit}

/* Pantallas medianas (tablet, portátil angosto): con las etiquetas completas, el título
   y los chips no caben en una fila y la barra saltaba debajo. Se oculta el "Últimos " y
   se compactan los chips: "3 meses" y "12 meses" dicen lo mismo en contexto. El span
   sigue en el HTML, así que en pantallas anchas se lee completo. */
@media(max-width:900px){
  .pc-u{display:none}
  .per-chip{padding:7px 10px;font-size:12.5px}
}

/* Móvil: los chips a lo ancho y el desplegable de fechas deja de flotar —en pantalla
   angosta un popover anclado a la derecha se saldría— y fluye a lo ancho, con los dos
   calendarios compartiendo fila y "Aplicar" completo para el dedo. */
@media(max-width:560px){
  .per-chips{width:100%;justify-content:center}
  .df-det{display:block;width:100%}
  .df-det summary{justify-content:center;width:100%}
  .df-pop{position:static;width:100%;margin-top:6px}
  .dash-filtro input[type=date]{flex:1;min-width:0}
  .dash-filtro > span{color:var(--txt-mute)}   /* el guion entre fechas */
  .dash-filtro .btn{width:100%;margin-top:2px}
}
/* Muy angosto (≈425 px y menos): los 4 chips no caben en una fila y se partían 3 + 1,
   dejando "Todo" solo y centrado. Un grid de 2 columnas los reparte 2×2 y el chip de
   fechas ocupa la fila completa de abajo. */
@media(max-width:460px){
  .per-chips{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .per-chip{justify-content:center;text-align:center}
  .df-det{grid-column:1/-1}
}
.lista-item .li-ico .ico-svg{width:18px;height:18px}
.lista-item .li-txt{min-width:0;display:flex;flex-direction:column}
.lista-item .li-txt strong{font-size:13.5px;color:var(--navy-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-item .li-txt small{font-size:12px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Badges de ranking (podio): oro/plata/bronce suaves para el top 3 */
.li-ico.rk{font-family:var(--fuente-titulo);font-weight:700;font-size:14px}
.li-ico.rk.pos1{background:#fbf0cf;color:#9a6f00}
.li-ico.rk.pos2{background:#eceef3;color:#5f6b7e}
.li-ico.rk.pos3{background:#f6e7d8;color:#9c5a25}
.lista-item .rk-n{margin-left:auto;font-family:var(--fuente-titulo);font-weight:700;color:var(--navy-800);font-size:15px}
/* Encabezado de sección del dashboard: etiqueta + línea (plano) */
.dash-sec{display:flex;align-items:center;gap:9px;margin:26px 0 14px;font-family:var(--fuente-titulo);
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-mute)}
.dash-sec .ico-svg{width:17px;height:17px;color:var(--azul-600)}
.dash-sec::after{content:"";flex:1;height:1px;background:var(--linea)}

/* ---------- Formularios ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;color:var(--txt-mute);margin-bottom:7px;font-weight:600}
.campo input:not([type=checkbox]):not([type=radio]):not([type=range]),.campo select,.campo textarea{width:100%;padding:11px 13px;background:var(--panel-2);
  border:1.5px solid var(--linea-fuerte);border-radius:var(--radio-sm);color:var(--txt);font-size:14.5px;transition:.15s;font-family:inherit}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-dim)}
.campo input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul-600);
  background:#fff;box-shadow:0 0 0 3px var(--acento-soft)}
.campo textarea{resize:vertical;min-height:80px}
.campo .ayuda{font-size:11.5px;color:var(--txt-dim);margin-top:6px}
/* Estados de validación */
.campo.campo-mal input,.campo.campo-mal select,.campo.campo-mal textarea{border-color:var(--err);background:#fff}
.campo.campo-mal input:focus,.campo.campo-mal select:focus,.campo.campo-mal textarea:focus{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.campo.campo-ok input,.campo.campo-ok select,.campo.campo-ok textarea{border-color:#7ec4a3}
.campo.campo-ok input:focus,.campo.campo-ok select:focus,.campo.campo-ok textarea:focus{box-shadow:0 0 0 3px var(--ok-bg)}
.campo-msj{display:flex;align-items:center;gap:5px;color:var(--err);font-size:12px;margin-top:6px;font-weight:500}
.campo-msj svg{width:13px;height:13px;flex-shrink:0}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:flex;align-items:center;gap:7px;padding:8px 13px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);
  border-radius:30px;font-size:13.5px;cursor:pointer;user-select:none;transition:.15s}
.check:has(input:checked){border-color:var(--azul-600);color:var(--azul-700);background:var(--acento-soft);font-weight:600}

/* ---------- Checkbox / radio personalizados (consistentes en todo el sistema) ---------- */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none;appearance:none;margin:0;flex:0 0 auto;
  width:18px;height:18px;border:1.6px solid var(--linea-fuerte);background:#fff;
  border-radius:5px;cursor:pointer;position:relative;transition:.14s;vertical-align:-4px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--azul-500)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--azul-600);border-color:var(--azul-600)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acento-soft)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
/* Deslizadores (range): pista fina con relleno hasta la posición (--pos, la fija el JS) y
   bolita que llega a ambos extremos — sin el borde/padding de las cajas de texto. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;padding:0;margin:0;background:transparent;border:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(to right,var(--azul-600) var(--pos,50%),var(--linea-fuerte) var(--pos,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2.5px solid var(--azul-600);margin-top:-6px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--acento-soft)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--linea-fuerte)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--azul-600)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--azul-600);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ---------- Botones (plano, sin degradado) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;
  border:1.5px solid var(--linea-fuerte);background:#fff;color:var(--navy-800);font-size:14px;font-weight:600;
  cursor:pointer;transition:background .14s,border-color .14s,color .14s,transform .08s;line-height:1.2}
.btn:hover{border-color:var(--azul-400);color:var(--azul-700);background:#f5f9fe}
.btn:active{background:#eef4fb;transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--azul-500);outline-offset:2px}
.btn-primario{background:var(--azul-600);color:#fff;border-color:var(--azul-600)}
.btn-primario:hover{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.btn-primario:active{background:#114a92;border-color:#114a92}
.btn-secundario{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-secundario:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-peligro{color:var(--err);border-color:#f1c6cd;background:#fff}
.btn-peligro:hover{background:var(--err-bg);color:var(--err);border-color:var(--err)}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px}
.btn-bloque{width:100%}

/* ---------- Utilidades de texto / listas / buscador ---------- */
.nota{color:var(--txt-mute);font-size:14px;line-height:1.6;margin-bottom:16px}
.nota:last-child{margin-bottom:0}
.nota code{background:var(--panel-3);padding:1px 6px;border-radius:5px;font-size:.92em}
.radio-op{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:6px 0}
.radio-op input{margin-top:3px;flex-shrink:0}
.radio-op span{display:flex;flex-direction:column;line-height:1.3}
.radio-op small{color:var(--txt-mute);font-size:12px;margin-top:2px}

/* ---------- Mi cuenta ---------- */
.cuenta-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cuenta-avatar{width:62px;height:62px;border-radius:50%;background:var(--navy-800);color:#fff;display:grid;place-items:center;
  font-size:25px;font-weight:700;font-family:var(--fuente-titulo);flex-shrink:0}
.cuenta-cab-info{min-width:0}
.cuenta-cab-info .nom{font-family:var(--fuente-titulo);font-size:21px;font-weight:700;color:var(--navy-800);line-height:1.2}
.cuenta-cab-info .mail{color:var(--txt-mute);font-size:14px;margin-top:3px;word-break:break-word}
.sesion-actual{display:flex;flex-direction:column;gap:9px;background:var(--panel-2);border:1px solid var(--linea);
  border-radius:12px;padding:13px 15px;margin:0 0 16px}
.sesion-actual .si{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--txt-mute)}
.sesion-actual .si svg{width:16px;height:16px;color:var(--azul-600);flex-shrink:0}
.sesion-actual .si b{color:var(--navy-800);font-weight:600}
.lista-vinetas{margin:0;padding-left:18px;color:var(--txt-mute);font-size:13.5px;line-height:1.7}
.lista-vinetas li{margin-bottom:6px}
.buscador{display:flex;gap:10px;margin-bottom:18px;max-width:460px;flex-wrap:wrap}
.buscador input[type=text]{flex:1;min-width:0;padding:10px 13px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);border-radius:9px;color:var(--txt);font-size:14px}
.buscador input[type=text]:focus{outline:none;border-color:var(--azul-600)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtros input,.filtros select{padding:8px 11px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);border-radius:8px;color:var(--txt);font-size:13.5px;font-family:inherit;min-width:0}
.filtros input[type=text]{flex:1;min-width:150px}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--azul-600)}
/* Filtros con búsqueda prominente + panel avanzado plegable */
.filtros-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
/* Acciones secundarias de la página (exportar, importar…) empujadas a la derecha de la
   barra de filtros. En móvil se van a su propia fila, a lo ancho, tras la búsqueda. */
.filtros-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
@media(max-width:640px){
  .filtros-acciones{margin-left:0;width:100%}
  .filtros-acciones .btn{flex:1;min-width:0;justify-content:center}
}
.filtro-buscar{position:relative;flex:1;min-width:220px;display:flex;align-items:center}
.filtro-buscar svg{position:absolute;left:12px;width:17px;height:17px;color:var(--txt-dim);pointer-events:none}
.filtro-buscar input{width:100%;padding:10px 13px 10px 38px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);
  border-radius:10px;color:var(--txt);font-size:14px;font-family:inherit}
.filtro-buscar input:focus{outline:none;border-color:var(--azul-600);background:#fff;box-shadow:0 0 0 3px var(--acento-soft)}
.filtro-badge{background:var(--azul-600);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;margin-left:5px;font-weight:700;font-family:var(--fuente)}
#btn-filtros-avz[aria-expanded="true"]{border-color:var(--azul-400);color:var(--azul-700);background:#f5f9fe}
.filtros-avz{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:12px;
  margin-top:6px;padding:15px 16px;background:var(--panel-2);border:1px solid var(--linea);border-radius:12px}
.campo-min label{display:block;font-size:11.5px;color:var(--txt-mute);font-weight:600;margin-bottom:5px}
.campo-min select,.campo-min input{width:100%;padding:8px 10px;background:#fff;
  border:1.5px solid var(--linea-fuerte);border-radius:8px;color:var(--txt);font-size:13.5px;font-family:inherit}
.campo-min select:focus,.campo-min input:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}

/* ---------- Certificados: acciones globales / barra contextual de selección ---------- */
.acciones-globales{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.acciones-globales .ayuda{font-size:12.5px}
.sel-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;
  background:var(--acento-soft);border:1.5px solid var(--azul-400);border-radius:11px;padding:9px 14px}
.sel-bar .sel-n{font-size:13.5px;color:var(--navy-800);font-weight:600;margin-right:4px}
.sel-bar .sel-n b{color:var(--azul-700);font-size:15px}
.sel-bar .sel-quitar{margin-left:auto;color:var(--txt-mute)}

/* ---------- Formulario de curso: chips de ponentes, plantillas y firmas, interruptor ---------- */
.chips-buscar{width:100%;padding:8px 11px;border:1.5px solid var(--linea-fuerte);border-radius:9px;font-family:inherit;font-size:13.5px;margin-bottom:8px}
.chips-buscar:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}
.chips-check{display:flex;flex-wrap:wrap;gap:8px;max-height:158px;overflow:auto;padding:2px}
.chip-check{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1.5px solid var(--linea-fuerte);border-radius:22px;cursor:pointer;font-size:13px;background:#fff;transition:.12s}
.chip-check input{margin:0}
.chip-check:has(input:checked){background:var(--acento-soft);border-color:var(--azul-400);color:var(--azul-700);font-weight:600}

.cp-lista{display:flex;flex-direction:column;gap:8px}
.cp-item{border:1.5px solid var(--linea);border-radius:11px;overflow:hidden;background:#fff}
.cp-item.abierto{border-color:var(--azul-400)}
.cp-head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;margin:0}
.cp-head input{margin:0}
.cp-nombre{font-weight:600;color:var(--navy-800)}
.cp-tipo{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--azul-700);background:var(--acento-soft);padding:3px 9px;border-radius:20px}
.cp-firmas{padding:4px 13px 13px;border-top:1px dashed var(--linea);display:flex;flex-direction:column;gap:8px}
.cp-firma{display:grid;grid-template-columns:66px 1.2fr 1fr 1fr;gap:8px;align-items:center}
.cp-slot{font-size:12px;font-weight:700;color:var(--txt-mute)}
.cp-firma select,.cp-firma input{padding:7px 9px;border:1.5px solid var(--linea-fuerte);border-radius:8px;font-family:inherit;font-size:13px;min-width:0;background:#fff}
.cp-firma select:focus,.cp-firma input:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}
@media(max-width:600px){.cp-firma{grid-template-columns:1fr}.cp-slot{margin-top:4px}}

.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-pista{width:42px;height:24px;border-radius:20px;background:var(--linea-fuerte);position:relative;transition:.15s;flex-shrink:0}
.switch-bolita{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .switch-pista{background:var(--azul-600)}
.switch input:checked + .switch-pista .switch-bolita{transform:translateX(18px)}
.switch input:focus-visible + .switch-pista{box-shadow:0 0 0 3px var(--acento-soft)}
/* Dentro de .campo, "label" fuerza display:block y aplastaba la pista del switch */
.campo label.switch{display:inline-flex;font-size:inherit;font-weight:400;color:inherit}
.txt-dim{color:var(--txt-dim)}
.tlink{color:var(--azul-700);font-weight:600;text-decoration:none}
.tlink:hover{text-decoration:underline}
button.tlink{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:inherit}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;padding:13px 16px;background:var(--panel-3);color:var(--navy-700);font-weight:700;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--linea)}
tbody td{padding:14px 16px;border-bottom:1px solid var(--linea)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--panel-2)}
.acciones-celda{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---------- Spinner de "procesando" ---------- */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes spin{to{transform:rotate(360deg)}}
.esta-cargando{pointer-events:none;opacity:.8}

/* ---------- Menú de acciones (kebab) ---------- */
.kebab{position:relative;display:inline-flex}
.kebab-btn{padding:6px 8px;line-height:0}
.kebab-btn .ico-svg,.kebab-btn svg{width:18px;height:18px}
.kebab-pop{position:fixed;z-index:120;min-width:184px;background:#fff;border:1px solid var(--linea);
  border-radius:12px;box-shadow:var(--sombra);padding:6px;display:none;flex-direction:column;gap:2px}
.kebab-pop.abierto{display:flex;animation:kebab-in .12s ease}
@keyframes kebab-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kebab-pop form{margin:0;width:100%}
.kebab-pop .btn{width:100%;justify-content:flex-start;border:0;background:transparent;box-shadow:none;
  border-radius:8px;padding:9px 11px;font-weight:600;color:var(--txt)}
.kebab-pop .btn:hover{background:var(--panel-2)}
.kebab-pop .btn-peligro{color:var(--err)}
.kebab-pop .btn-peligro:hover{background:var(--err-bg)}
.kebab-pop .btn .ico-svg{width:16px;height:16px}

.vacio{text-align:center;padding:46px 22px;color:var(--txt-mute)}
.vacio .vacio-ico{width:62px;height:62px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  background:var(--acento-soft);border-radius:50%;color:var(--azul-600)}
.vacio .vacio-ico svg,.vacio .vacio-ico .ico-svg{width:28px;height:28px}
.vacio .vacio-titulo{font-family:var(--fuente-titulo);font-weight:700;color:var(--navy-800);font-size:16.5px;margin-bottom:5px;letter-spacing:-.2px}
.vacio>div:not(.vacio-ico):not(.vacio-titulo){max-width:380px;margin-left:auto;margin-right:auto;font-size:13.5px;line-height:1.55}

/* ---------- Paginación ---------- */
.paginacion-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.pag-info{color:var(--txt-mute);font-size:13px}
.paginacion-barra .paginacion{margin-top:0}
.paginacion{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.pg-i{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;
  border:1.5px solid var(--linea-fuerte);border-radius:8px;background:#fff;color:var(--navy-800);font-size:13.5px;font-weight:600}
a.pg-i:hover{border-color:var(--azul-400);color:var(--azul-700);background:#f5f9fe}
.pg-act{background:var(--azul-600);border-color:var(--azul-600);color:#fff}
.pg-dis{color:var(--txt-dim);border-color:var(--linea);background:var(--panel-2)}

/* ---------- Etiquetas de estado ---------- */
.tag{display:inline-block;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600}
.tag:has(.ico-tag){display:inline-flex;align-items:center;gap:4px}
.ico-tag{width:13px;height:13px}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-err{background:var(--err-bg);color:var(--err)}
.tag-info{background:var(--info-bg);color:var(--info)}
.tag-mute{background:var(--panel-3);color:var(--txt-mute)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
a.tag{text-decoration:none;transition:.12s}
a.tag:hover{filter:brightness(.94);text-decoration:underline}
.mono{font-family:var(--fuente-mono);letter-spacing:.3px;font-size:13px}

/* ---------- Alertas ---------- */
.alerta{padding:14px 16px;border-radius:var(--radio-sm);margin-bottom:18px;font-size:14px;
  border:1px solid transparent;display:flex;gap:9px;align-items:flex-start}
.alerta::before{font-weight:700;flex-shrink:0}
.alerta-ok{background:var(--ok-bg);color:#0b7a52;border-color:#bce8d6}
.alerta-ok::before{content:"✓"}
.alerta-error{background:var(--err-bg);color:#b32a40;border-color:#f3c4cc}
.alerta-error::before{content:"!"}
.alerta-info{background:var(--info-bg);color:var(--azul-700);border-color:#c7e0f7}
.alerta-info::before{content:"i";font-style:italic}

/* ---------- Notificaciones (toasts) ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:11px;background:#fff;border:1px solid var(--linea);
  border-left:4px solid var(--azul-600);border-radius:12px;padding:13px 14px;box-shadow:var(--sombra);
  font-size:14px;color:var(--txt);animation:toast-in .24s ease}
.toast.saliendo{animation:toast-out .22s ease forwards}
.toast .toast-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.toast .toast-msg{flex:1;min-width:0;line-height:1.4}
.toast .toast-x{background:none;border:none;color:var(--txt-dim);font-size:20px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0}
.toast .toast-x:hover{color:var(--txt)}
.toast-ok{border-left-color:var(--ok)} .toast-ok .toast-ico{color:var(--ok)}
.toast-error{border-left-color:var(--err)} .toast-error .toast-ico{color:var(--err)}
.toast-info{border-left-color:var(--azul-600)} .toast-info .toast-ico{color:var(--azul-600)}
.toast-warn{border-left-color:var(--warn)} .toast-warn .toast-ico{color:var(--warn)}
@keyframes toast-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(30px)}}
@media(max-width:560px){.toasts{top:auto;bottom:14px;left:14px;right:14px;width:auto}}

/* ---------- Acceso / instalación ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:stretch}
.login-aside{flex:1;display:none;flex-direction:column;justify-content:space-between;padding:48px;color:#eaf1fb;
  background:var(--navy-800);position:relative;overflow:hidden}
.login-aside::before{content:"";position:absolute;left:-120px;bottom:-150px;width:300px;height:300px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.05)}
.login-aside::after{content:"";position:absolute;right:-140px;top:-140px;width:360px;height:360px;border-radius:50%;
  border:2px solid rgba(255,255,255,.06)}
.login-aside .la-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-aside .la-brand strong{font-family:var(--fuente-titulo);font-size:19px;color:#fff}
.login-aside .la-brand span{display:block;font-size:12px;color:#9fb2d6;text-transform:uppercase;letter-spacing:.04em}
.login-aside h2{font-family:var(--fuente-titulo);font-size:30px;line-height:1.2;font-weight:700;max-width:460px;position:relative;z-index:1}
.login-aside p{color:#b9c8e6;max-width:430px;position:relative;z-index:1}
.login-aside .la-foot{font-size:12.5px;color:#8ea2c8;position:relative;z-index:1}
.login-panel{width:100%;max-width:480px;display:grid;place-items:center;padding:28px;background:var(--panel)}
.login-card{width:100%;max-width:380px}
.login-card .login-logo{display:flex;justify-content:center;margin-bottom:18px}
.login-card h1{text-align:center;font-size:23px;margin-bottom:4px;color:var(--navy-800)}
.login-card .sub{text-align:center;color:var(--txt-dim);font-size:13.5px;margin-bottom:28px}
.login-aside .la-mid{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px}
.login-aside .la-features{list-style:none;display:flex;flex-direction:column;gap:15px;max-width:420px}
.login-aside .la-features li{display:flex;align-items:flex-start;gap:13px;color:#cdd9f0;font-size:14.5px;line-height:1.4}
.login-aside .la-features li svg{width:21px;height:21px;flex-shrink:0;color:#8fc4f5;margin-top:1px}
.login-card form{display:flex;flex-direction:column;gap:16px}
.login-card form .campo{margin:0}
.login-input{position:relative;display:flex;align-items:center}
.login-input .li-ico{position:absolute;left:13px;width:18px;height:18px;color:var(--txt-dim);pointer-events:none}
.login-input input:not([type=checkbox]):not([type=radio]):not([type=range]){width:100%;padding:12px 13px 12px 42px}
.login-input input.es-pass:not([type=checkbox]):not([type=radio]):not([type=range]){padding-right:44px}
.login-input .li-toggle{position:absolute;right:7px;background:none;border:0;padding:7px;cursor:pointer;
  color:var(--txt-dim);display:flex;border-radius:8px;transition:.14s}
.login-input .li-toggle:hover{color:var(--azul-700);background:var(--panel-2)}
.login-input .li-toggle svg{width:18px;height:18px}
.login-card form .btn-bloque{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px}
.li-caps{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;font-weight:600;color:var(--warn)}
.li-caps svg{width:14px;height:14px;flex-shrink:0}
.login-ayuda{text-align:center;color:var(--txt-dim);font-size:12.5px;margin-top:22px;line-height:1.5}
@media(min-width:900px){
  .login-aside{display:flex}
  .login-panel{box-shadow:-10px 0 40px rgba(15,25,68,.12)}
  /* El logo del formulario se oculta cuando aparece el panel de al lado, que ya lo trae:
     en escritorio salía DOS veces en la misma pantalla. En móvil ese panel no está, así
     que allí el logo del formulario es el único y se mantiene.
     Va con las dos clases a propósito: la regla que lo muestra es ".login-card
     .login-logo", y un media query NO añade especificidad — con una sola clase esta
     regla perdía y el logo seguía saliendo. */
  .login-card .login-logo{display:none}
}
/* Sin el panel de marca (<900px), el panel del formulario ocupa todo el ancho
   (antes quedaba a 480px pegado a la izquierda con espacio vacío al lado). */
@media(max-width:899px){.login-wrap{justify-content:center}.login-panel{max-width:none}}

/* ---------- Modal ---------- */
dialog{border:none;border-radius:var(--radio);background:var(--panel);color:var(--txt);
  padding:0;max-width:620px;width:94%;max-height:92vh;box-shadow:0 24px 70px rgba(15,25,68,.32);
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;
  overflow:hidden} /* el dialog NUNCA scrollea él mismo (Chrome nuevo le pone overflow:auto
  de fábrica y aparecía una 2ª barra con espacio vacío); el scroll vive en .modal-body */
/* El display SOLO cuando está abierto: si se pone en el `dialog` base, anula la
   regla del navegador `dialog:not([open]){display:none}` (el autor gana sobre la
   UA) y TODOS los modales aparecerían abiertos al cargar la página. */
dialog[open]{display:flex;flex-direction:column}
/* El form dentro del dialog hereda el layout de columna: así .modal-body (flex:1,
   overflow:auto) scrollea bien aunque el pie del modal quede fuera del form. */
dialog[open]>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:hidden}
dialog::backdrop{background:rgba(15,25,68,.5);backdrop-filter:blur(3px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--linea);flex-shrink:0}
.modal-head h3{font-family:var(--fuente-titulo);font-size:17px;color:var(--navy-800)}
.modal-body{padding:24px;flex:1 1 auto;min-height:0;overflow-y:auto}
.modal-foot{padding:16px 24px;border-top:1px solid var(--linea);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;background:var(--panel-2);border-radius:0 0 var(--radio) var(--radio);flex-shrink:0}
.modal-cerrar{background:none;border:none;color:var(--txt-dim);font-size:24px;cursor:pointer;line-height:1;padding:0 4px;border-radius:8px}
/* ---------- Libro de registro: fila de filtros compacta ---------- */
.libro-filtros{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 16px;box-shadow:var(--sombra-sm)}
.libro-filtros .lf-anio{flex:0 1 140px;min-width:120px}
.libro-filtros .lf-tipo{flex:0 1 280px;min-width:200px}
.libro-filtros .lf-hint{margin-left:auto;padding-bottom:9px;font-size:12px}
@media(max-width:640px){
  .libro-filtros .lf-anio,.libro-filtros .lf-tipo{flex:1 1 100%}
  .libro-filtros .lf-hint{margin-left:0;padding-bottom:0}
}

/* ---------- Libro de registro: asientos anulados atenuados ---------- */
.libro-tabla .fila-anulada td{background:rgba(214,69,69,.045)}
.libro-tabla .fila-anulada td:not(:last-child){color:var(--txt-mute)}
.libro-tabla th{white-space:nowrap}
.libro-tabla .c-fijo{white-space:nowrap}
.libro-tabla .estado-celda{text-align:center}
.est-ok{color:var(--ok);font-weight:700}
.est-no{color:var(--err);font-weight:700}

/* ---------- Reportes: buscador universal por entidad ---------- */
.rep-buscador{position:relative;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;box-shadow:var(--sombra-sm);max-width:640px}
.rep-buscar-caja{position:relative;display:flex;align-items:center}
.rep-buscar-caja svg{position:absolute;left:14px;width:18px;height:18px;color:var(--txt-dim);pointer-events:none}
.rep-buscar-caja input{width:100%;padding:12px 14px 12px 44px;border:1.5px solid var(--linea-fuerte);border-radius:11px;
  font-family:inherit;font-size:14.5px;background:var(--panel-2)}
.rep-buscar-caja input:focus{outline:none;border-color:var(--azul-600);background:#fff;box-shadow:0 0 0 3px var(--acento-soft)}
.rep-res{position:absolute;left:18px;right:18px;top:calc(100% - 10px);z-index:15;background:#fff;border:1px solid var(--linea);
  border-radius:12px;box-shadow:0 16px 44px rgba(15,25,68,.18);max-height:340px;overflow-y:auto;padding:6px}
.rep-res-grupo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-mute);
  padding:9px 12px 4px}
.rep-res-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--txt);font-size:13.5px;min-width:0}
.rep-res-item:hover{background:var(--acento-soft);color:var(--navy-800)}
.rep-res-item>svg:first-child{width:16px;height:16px;flex-shrink:0;color:var(--azul-600)}
.rep-res-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-res-item small{color:var(--txt-dim)}
.rep-res-item .rep-res-ir{width:14px;height:14px;color:var(--txt-dim);flex-shrink:0}
.rep-res-mas,.rep-res-vacio{padding:8px 12px;font-size:12px;color:var(--txt-dim)}

/* ---------- Filas de personas: mini avatar con iniciales ---------- */
.fila-persona{display:inline-flex;align-items:center;gap:9px;min-width:0}
.mini-avatar{width:28px;height:28px;border-radius:8px;background:var(--acento-soft);color:var(--azul-700);flex-shrink:0;
  display:inline-grid;place-items:center;font-family:var(--fuente-titulo);font-weight:700;font-size:11px;letter-spacing:.02em}

/* ---------- Ponentes: tarjetas de directorio ---------- */
.pon-card{display:flex;flex-direction:column;gap:12px;padding:16px;transition:transform .15s,box-shadow .15s,border-color .15s}
.pon-card:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--azul-400)}
.pon-cab{display:flex;align-items:center;gap:12px;min-width:0}
.pon-avatar{width:46px;height:46px;border-radius:13px;background:var(--acento-soft);color:var(--azul-700);flex-shrink:0;
  display:grid;place-items:center;font-family:var(--fuente-titulo);font-weight:700;font-size:16px;letter-spacing:.02em}
.pon-idn{min-width:0}
/* El nombre y el cargo se ven COMPLETOS: envuelven en varias líneas en vez de
   cortarse con "…" (antes un nombre largo salía como "Dr. Ricar…" en móvil). */
.pon-idn strong{display:block;color:var(--navy-800);font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.pon-idn small{display:block;color:var(--txt-mute);font-size:12px;margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
.pon-datos{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--txt-mute)}
/* align-items:flex-start = si el correo envuelve, el ícono se queda arriba alineado. */
.pon-datos span{display:flex;align-items:flex-start;gap:8px;min-width:0;overflow-wrap:anywhere}
.pon-datos svg{margin-top:2px}
.pon-datos svg{width:14px;height:14px;flex-shrink:0;color:var(--azul-600)}
.pon-datos .pon-sin{color:var(--txt-dim)}
.pon-datos .pon-sin svg{color:var(--txt-dim)}
.pon-stats{display:flex;gap:16px;padding:9px 12px;background:var(--panel-2);border-radius:9px;font-size:12px;color:var(--txt-mute)}
.pon-stats b{color:var(--navy-800);font-family:var(--fuente-titulo);font-size:14px;margin-right:3px}
.pon-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.pon-actions>.btn:first-child{flex:1}

/* Rótulo de sección dentro de un modal (agrupa campos) */
.modal-sec{font-family:var(--fuente-titulo);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--azul-700);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--linea)}
.modal-sec:first-child{margin-top:0}
/* Acordeón del modal de curso: la cabecera de sección actúa de interruptor */
.modal-sec.acc-tit{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.modal-sec.acc-tit .acc-badge{margin-left:auto;font-weight:600;font-size:11px;color:var(--txt-mute);text-transform:none;letter-spacing:0}
.modal-sec.acc-tit .acc-chev{display:inline-flex;color:var(--txt-mute);transition:transform .15s}
.modal-sec.acc-tit .acc-chev svg{width:16px;height:16px}
.modal-sec.acc-tit.colapsado .acc-chev{transform:rotate(-90deg)}
.modal-cerrar:hover{color:var(--err)}

/* ---------- Diálogo de confirmación ---------- */
.confirm-dlg{max-width:430px;width:92%;padding:28px 26px 22px;text-align:center}
.confirm-dlg[open]{animation:confirm-in .18s ease}
@keyframes confirm-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.confirm-ico{width:54px;height:54px;border-radius:50%;background:var(--err-bg);color:var(--err);
  display:grid;place-items:center;margin:0 auto 14px}
.confirm-ico svg{width:26px;height:26px}
.confirm-titulo{font-family:var(--fuente-titulo);font-size:18px;color:var(--navy-800);margin-bottom:6px}
.confirm-msg{color:var(--txt-mute);font-size:14px;line-height:1.5;margin-bottom:22px}
.confirm-acciones{display:flex;gap:10px;justify-content:center}
.motivo-dlg .motivo-input{width:100%;box-sizing:border-box;margin:0 0 20px;padding:11px 13px;
  border:1.5px solid var(--linea-fuerte);border-radius:10px;font-family:inherit;font-size:14px;
  color:var(--txt);background:var(--panel-2);resize:vertical;min-height:66px;text-align:left}
.motivo-dlg .motivo-input:focus{outline:none;border-color:var(--azul-600);background:#fff;box-shadow:0 0 0 3px var(--acento-soft)}
.confirm-acciones .btn{min-width:120px;justify-content:center}
.confirm-acciones .confirm-ok{background:var(--err);border-color:var(--err);color:#fff}
.confirm-acciones .confirm-ok:hover{background:#bf3145;border-color:#bf3145;color:#fff}
.aviso-ico{background:var(--acento-soft);color:var(--azul-700)}
.confirm-acciones .aviso-ok{min-width:140px}

/* ---------- Aviso sin conexión ---------- */
.offline-banner{position:fixed;right:18px;bottom:18px;transform:translateY(160%);
  display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100% - 32px));
  background:var(--navy-800);color:#fff;padding:11px 16px;border-radius:12px;font-size:13px;font-weight:500;
  box-shadow:0 12px 34px rgba(15,25,68,.4);z-index:1200;transition:transform .28s ease;pointer-events:none}
.offline-banner svg{width:18px;height:18px;flex-shrink:0;color:var(--azul-400)}
body.sin-conexion .offline-banner{transform:translateY(0)}

/* ---------- Barra de progreso de navegación ---------- */
#nav-progreso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--azul-600);
  z-index:2000;opacity:0;pointer-events:none;box-shadow:0 0 8px rgba(31,127,209,.6)}
#nav-progreso.activo{opacity:1;animation:nav-prog 9s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes nav-prog{0%{width:0}25%{width:48%}55%{width:74%}80%{width:88%}100%{width:94%}}

/* ---------- Vista previa al emitir ---------- */
.emit-preview{margin:4px 0 16px;border:1px solid var(--linea);border-radius:12px;padding:14px;
  background:#e9eef5;background-image:radial-gradient(rgba(24,37,95,.10) 1px,transparent 1px);background-size:14px 14px}
.emit-preview-lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy-800);margin-bottom:10px}
.emit-preview-lbl .ico-svg{width:15px;height:15px;color:var(--azul-600)}
.emit-preview img{display:block;width:auto;max-width:100%;max-height:240px;margin:0 auto;border-radius:4px;background:#fff;
  filter:drop-shadow(0 6px 14px rgba(22,36,94,.22));transition:opacity .2s}
.emit-preview img.cargando{opacity:.4}
.emit-preview .alerta{margin:0}

/* ---------- Asistente de emisión (wizard) ---------- */
.emitir-dlg{max-width:860px;width:96%}
.wz-pasos{display:flex;gap:4px;padding:14px 24px 0;flex-shrink:0}
.wz-paso{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--txt-dim);padding:8px 4px;border-bottom:2.5px solid var(--linea)}
.wz-paso b{width:21px;height:21px;border-radius:50%;background:var(--panel-3);color:var(--txt-mute);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.wz-paso.activo{color:var(--azul-700);border-color:var(--azul-600)}
.wz-paso.activo b{background:var(--azul-600);color:#fff}
.wz-paso.hecho{color:var(--ok);border-color:var(--ok)}
.wz-paso.hecho b{background:var(--ok);color:#fff;font-size:0}
.wz-paso.hecho b::after{content:"✓";font-size:12px;line-height:1}
.wz-tipo-doc{margin:0 0 0 auto;min-width:180px}
.wz-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
/* Métodos para agregar participantes: tarjetas con ícono + título + pista */
.wz-metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px;margin:0 0 14px}
.wz-metodo{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1.5px solid var(--linea-fuerte);border-radius:11px;
  background:var(--panel-2);cursor:pointer;font-family:inherit;text-align:left;transition:.13s;min-width:0;margin:0}
.wz-metodo:hover{border-color:var(--azul-500);background:var(--acento-soft)}
.wz-metodo svg{width:20px;height:20px;flex-shrink:0;color:var(--azul-600)}
.wz-metodo span{display:flex;flex-direction:column;gap:1px;min-width:0}
.wz-metodo strong{font-size:13px;color:var(--navy-800)}
.wz-metodo small{font-size:11.5px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Opciones del paso 3 como interruptores */
.wz-opciones{display:flex;flex-direction:column;gap:12px;margin-top:14px;font-size:13.5px;color:var(--txt)}
.wz-base{border:1px solid var(--linea-fuerte);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--panel-2)}
.base-lista{max-height:220px;overflow-y:auto;margin:10px 0;display:flex;flex-direction:column;gap:2px}
.base-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13.5px;cursor:pointer}
.base-item:hover{background:#fff}
.base-item input{flex-shrink:0}
.base-item small{color:var(--txt-dim);margin-left:auto;white-space:nowrap}
.wz-resumen{background:var(--acento-soft);border-left:4px solid var(--azul-600);border-radius:12px;padding:14px 16px;margin-bottom:14px;color:var(--navy-800)}
.wz-resumen b{font-family:var(--fuente-titulo);font-size:20px;color:var(--azul-700)}
.wz-lista-rev{max-height:230px;overflow-y:auto;border:1px solid var(--linea);border-radius:10px;font-size:13px}
.wz-lista-rev div{padding:7px 12px;border-bottom:1px solid var(--linea)}
.wz-lista-rev div:last-child{border-bottom:none}
.wz-proc{text-align:center;padding:6px 0 2px}
.wz-proc-pct{font-family:var(--fuente-titulo);font-size:48px;font-weight:800;color:var(--azul-600);line-height:1;letter-spacing:-1.5px;margin-bottom:4px}
.wz-proc-pct small{font-size:24px;font-weight:700;margin-left:2px;opacity:.7}
.wz-prog-barra{height:14px;background:var(--panel-3);border-radius:20px;overflow:hidden;margin:10px 0 8px}
.wz-prog-relleno{height:100%;width:0;background:var(--azul-600);transition:width .3s ease;position:relative;overflow:hidden}
/* Brillo que recorre la barra mientras genera (afford. de "en proceso", no decorativo) */
.wz-prog-relleno.wz-anim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:wz-shine 1.2s ease-in-out infinite}
@keyframes wz-shine{to{transform:translateX(100%)}}
.wz-prog-txt{text-align:center;font-weight:700;color:var(--navy-800);font-family:var(--fuente-titulo);font-size:15px}
.wz-proc-nota{color:var(--txt-mute);font-size:13px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
.wz-proc-nota #wz-actual{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-dot{width:9px;height:9px;border-radius:50%;background:var(--azul-600);animation:wz-pulse 1s ease-in-out infinite}
@keyframes wz-pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.wz-cont{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;color:var(--txt-mute);font-size:13px}
.wz-res-cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wz-res-cards .c{flex:1;min-width:90px;text-align:center;background:var(--panel-2);border:1px solid var(--linea);
  border-radius:12px;padding:12px 8px;border-top:3px solid var(--linea-fuerte)}
.wz-res-cards .c b{display:block;font-size:22px;font-family:var(--fuente-titulo);color:var(--navy-800);line-height:1}
.wz-res-cards .c small{color:var(--txt-mute);font-size:11.5px}
.wz-res-cards .c-ok{border-top-color:var(--ok)}   .wz-res-cards .c-ok b{color:var(--ok)}
.wz-res-cards .c-err{border-top-color:var(--err)} .wz-res-cards .c-err b{color:var(--err)}
.wz-res-cards .c-info{border-top-color:var(--info)}.wz-res-cards .c-info b{color:var(--info)}
.wz-res-cards .c-send{border-top-color:var(--azul-400)}
.wz-res-cards .c-mute{border-top-color:var(--linea-fuerte)}
.envio-lista-tit{font-weight:700;color:var(--navy-800);font-size:13px;margin:4px 0 8px}
.envio-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea);font-size:13.5px;color:var(--txt)}
.envio-fila:last-child{border-bottom:0}
.envio-dlg{max-width:520px;width:calc(100% - 36px)}
.wz-res-tabla{max-height:240px;overflow-y:auto;border:1px solid var(--linea);border-radius:10px}
.wz-res-tabla table{width:100%;font-size:12.5px;border-collapse:collapse}
.wz-res-tabla td{padding:7px 12px;border-bottom:1px solid var(--linea)}
.wz-res-tabla tr:last-child td{border-bottom:none}

/* ---------- Detalle de curso ---------- */
.curso-cab{display:flex;flex-direction:column;gap:6px}
.curso-cab-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.curso-cab-titulo{font-family:var(--fuente-titulo);font-size:21px;font-weight:700;color:var(--navy-800);line-height:1.2;letter-spacing:-.3px}
.curso-cab-sub{color:var(--txt-mute);font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.curso-cab-sub span{display:inline-flex;align-items:center;gap:5px}
.curso-cab-sub svg{width:14px;height:14px;color:var(--azul-600)}
.curso-cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(min(100%,270px),1fr);gap:18px;align-items:start}
@media(max-width:880px){.curso-cols{grid-template-columns:1fr}}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:4px}
.info-item{display:flex;align-items:flex-start;gap:11px;padding:11px 10px;border-radius:11px;transition:.12s}
.info-item:hover{background:var(--panel-2)}
.info-item .ii-ico{width:34px;height:34px;border-radius:9px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;flex-shrink:0}
.info-item .ii-ico svg{width:17px;height:17px}
/* min-width:0 es obligatorio: en flex los hijos no bajan de su contenido (min-width:auto),
   así que un dato largo sin espacios —un correo, una web— no se encogía y se DESBORDABA
   encima de la casilla vecina, pisando el texto. Con esto se queda en su celda y parte. */
.info-item > *:last-child{min-width:0;flex:1}
.info-item .ii-k{font-size:11px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.info-item .ii-v{font-size:14px;color:var(--navy-800);font-weight:600;margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
.curso-desc{color:var(--txt-mute);font-size:13.5px;line-height:1.6;margin-top:14px;padding-top:14px;border-top:1px dashed var(--linea)}
.ponente-card{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--panel-2);margin-bottom:10px}
.ponente-card:last-child{margin-bottom:0}
.ponente-card .pc-avatar{width:42px;height:42px;border-radius:11px;background:var(--navy-800);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--fuente-titulo);font-size:16px;flex-shrink:0}
.ponente-card .pc-nom{font-weight:700;color:var(--navy-800);font-size:14px;line-height:1.25}
.ponente-card .pc-rol{font-size:12.5px;color:var(--azul-700);font-weight:600}
.ponente-card .pc-esp{font-size:12.5px;color:var(--txt-mute)}
.part-filtro{position:relative;max-width:300px;flex:1;min-width:180px}
.part-filtro input{width:100%;padding:9px 12px 9px 34px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);border-radius:9px;color:var(--txt);font-size:14px}
.part-filtro input:focus{outline:none;border-color:var(--azul-600)}
.part-filtro svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--txt-dim)}
.part-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}

/* ---------- Reporte de participante (imprimible) ---------- */
.reporte{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra-sm)}
.reporte-cab{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:2px solid var(--navy-800);margin-bottom:18px}
.reporte-titulo h2{font-family:var(--fuente-titulo);font-size:20px;color:var(--navy-800);margin:0}
.reporte-titulo p{color:var(--txt-mute);font-size:13px;margin-top:2px}
.reporte-part{margin-bottom:16px}
.reporte-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin-bottom:20px}
.rep-stat{background:var(--panel-2);border:1px solid var(--linea);border-radius:12px;padding:14px;text-align:center}
.rep-stat .rep-num{display:block;font-family:var(--fuente-titulo);font-size:24px;font-weight:700;color:var(--navy-800);line-height:1}
.rep-stat .rep-lbl{font-size:12px;color:var(--txt-mute);margin-top:4px;display:block}
.reporte-pie{margin-top:18px;font-size:12px;color:var(--txt-dim);line-height:1.5;border-top:1px dashed var(--linea);padding-top:14px}
@media(max-width:560px){.reporte-stats{grid-template-columns:repeat(2,1fr)}}
@media print{
  .sidebar,.topbar,.toasts,.no-print,.offline-banner,#nav-progreso{display:none!important}
  /* Controles de pantalla que no deben imprimirse: migas/acciones, filtros, botones, paginación… */
  .barra-accion,.filtros-bar,.filtros-avz,.dash-filtro,.dash-cab .dash-filtro,.per-chips,.acciones-globales,.sel-bar,
  .btn,button,.paginacion-barra,.acciones-celda,.pon-actions,.kebab,.kebab-pop,.tpl-barra,.editor-ayuda{display:none!important}
  /* Sin esto, el alto fijo de html/body recorta la impresión a UNA sola página. */
  html,body{height:auto!important;overflow:visible!important}
  body{background:#fff}
  .layout,.contenido,.contenido-inner{display:block;margin:0;padding:0;max-width:none;min-height:0}
  .card{border:none;box-shadow:none;padding:0 0 14px;margin:0 0 14px}
  .grid-2,.grid-3{display:block}
  .grid-2>*,.grid-3>*{margin-bottom:14px}
  .tabla-wrap{overflow:visible;border:none}
  /* Tablas ajustadas al ancho del papel (sin recorte a la derecha) */
  table{width:100%!important;font-size:10.5px}
  th,td{white-space:normal!important;word-break:break-word;overflow-wrap:anywhere;padding:5px 6px!important}
  /* Cabeceras SIEMPRE en una línea (más chicas); los datos envuelven con normalidad */
  th{white-space:nowrap!important;font-size:9px;letter-spacing:0}
  thead{display:table-header-group}   /* repite la cabecera en cada página */
  tr{page-break-inside:avoid}
  .reporte{border:none;box-shadow:none;padding:0;margin:0}
  .reporte-tabla{font-size:12px}
  .tag{border:1px solid currentColor}
  a[href]{color:inherit;text-decoration:none}
  /* Cabecera institucional que solo aparece al imprimir (reportes del panel) */
  .print-cab{display:flex!important;align-items:center;gap:14px;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid #18255f}
  .print-cab img{height:40px;width:auto}
  .print-cab .pc-tit{font-family:var(--fuente-titulo);font-size:17px;color:#18255f;font-weight:700}
  .print-cab .pc-sub{font-size:11.5px;color:#5a6b85}
}
.print-cab{display:none}

/* ---------- Transición suave entre páginas (navegación multipágina) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  #nav-progreso.activo{animation:none}
  .confirm-dlg[open]{animation:none}
}

/* ---------- Control segmentado (modos de emisión) ---------- */
.segmento{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--linea-fuerte);
  border-radius:12px;padding:4px;margin-bottom:20px}
.segmento label{flex:1;text-align:center;padding:9px 8px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--txt-mute);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:7px}
.segmento label .ico-svg{width:17px;height:17px}
.segmento input{position:absolute;opacity:0;pointer-events:none}
.segmento label:hover{color:var(--navy-700)}
.segmento input:checked + span,.segmento label:has(input:checked){background:#fff;color:var(--azul-700);
  box-shadow:var(--sombra-sm)}

/* ---------- Tabla de participantes (registro directo) ---------- */
.parts{border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.parts-head,.parts-fila{display:grid;grid-template-columns:0.85fr 1fr 1.5fr 1.3fr 1.1fr 36px;gap:10px;align-items:center}
.parts-head{padding:10px 14px;background:var(--panel-3);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--navy-700)}
.parts-body{max-height:260px;overflow-y:auto;padding:8px}
.parts-fila{padding:4px;border-radius:9px}
/* Destello al autocompletar desde la base (confirmación visual). */
.parts-fila.fila-base{animation:fila-base-flash 1.1s ease}
@keyframes fila-base-flash{0%{background:var(--ok-bg,#e7f7ee)}100%{background:transparent}}
.parts-fila input,.parts-fila select{padding:9px 11px;font-size:14px;min-width:0;width:100%;background:#fff;border:1.5px solid var(--linea-fuerte);border-radius:9px;color:var(--txt);font-family:inherit}
.parts-fila input:focus,.parts-fila select:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}
.parts-quitar{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--linea-fuerte);background:#fff;
  color:var(--txt-dim);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:.15s}
.parts-quitar:hover{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.parts-add{margin-top:10px}

/* ---------- Zona de carga de archivo (importar) ---------- */
.dropzone{border:2px dashed var(--linea-fuerte);border-radius:14px;padding:30px 20px;text-align:center;
  background:var(--panel-2);transition:.15s;cursor:pointer;display:block}
.dropzone:hover,.dropzone.drag{border-color:var(--azul-500);background:var(--acento-soft)}
.dropzone .dz-ico{width:46px;height:46px;margin:0 auto 12px;border-radius:13px;display:grid;place-items:center;
  background:var(--azul-600);color:#fff;font-size:22px}
.dropzone .dz-ico .ico-svg{width:24px;height:24px}
.nav-toggle .ico-svg{width:22px;height:22px}
.dropzone strong{display:block;color:var(--navy-800);font-size:15px;margin-bottom:3px}
.dropzone small{color:var(--txt-dim);font-size:12.5px}
.dropzone input[type=file]{display:none}
.dz-elegido{margin-top:12px;font-size:13.5px;color:var(--ok);font-weight:600;display:none}

/* ---------- Página pública (landing) ---------- */
html{scroll-behavior:smooth}
.pub-head{background:var(--navy-800);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.pub-head-in{max-width:1080px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.pub-head .logo-img{display:block}
.pub-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.pub-nav a.pub-link{color:#cdd9ea;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;transition:.14s}
.pub-nav a.pub-link:hover{color:#fff;background:rgba(255,255,255,.08)}
/* En móvil el nav se reduce a lo esencial: Cursos y Verificar (+ WhatsApp). */
@media(max-width:720px){
  .pub-nav a.pub-link{display:none}
  .pub-nav a.pub-link.nav-clave{display:inline-block;padding:8px 9px;font-size:13px}
}

.pub-hero{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
/* Motivo geométrico plano (anillos de contorno), sin glows ni degradados */
.pub-hero::after{content:"";position:absolute;right:-110px;top:-110px;width:330px;height:330px;border-radius:50%;border:1.5px solid rgba(255,255,255,.07)}
.pub-hero::before{content:"";position:absolute;right:90px;bottom:-150px;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(255,255,255,.05)}
.pub-hero-in{max-width:1080px;margin:0 auto;padding:56px 22px 60px;position:relative;z-index:1}
.pub-hero h1{font-family:var(--fuente-titulo);font-size:34px;line-height:1.12;max-width:680px;font-weight:800;letter-spacing:-.5px}
.pub-hero p{color:#b9c8e6;max-width:600px;margin-top:13px;font-size:15.5px;line-height:1.6}
/* Los CTA del hero eran del tamaño de un botón de tabla. Son las dos únicas acciones de
   toda la página: merecen peso. */
.pub-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pub-hero-cta .btn{padding:13px 26px;font-size:15px;border-radius:11px}
.pub-hero-chips{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:#9fb2d6;font-size:13.5px}
.pub-hero-chips span{display:inline-flex;align-items:center;gap:7px}
.pub-hero-chips svg{width:16px;height:16px;color:var(--azul-400)}
/* Botón secundario sobre navy: contorno PLANO, sin relleno.
   Antes tenía un fondo blanco translúcido (efecto cristal). Ese acabado es la marca de
   fábrica del diseño de plantilla —y contradice el criterio del proyecto, que es plano—,
   así que se elimina. No se usa blanco sólido a propósito: sobre el navy gritaría más
   que el botón principal e invertiría la jerarquía. El borde va en rgba, no en un hex
   fijo, para que siga funcionando si la clínica cambia su color de marca. */
.btn-translucido{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-translucido:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.pub-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#d4e2f5;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:30px;margin-bottom:20px}
.pub-eyebrow svg{width:15px;height:15px;color:var(--azul-400)}
.pub-hero-art{display:none}
@media(min-width:900px){
  .pub-hero-in{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:44px}
  .pub-hero-art{display:block}
  .pub-hero h1{font-size:38px}
}
.hero-card{background:#fff;color:var(--txt);border-radius:18px;padding:22px;max-width:350px;margin-left:auto;
  box-shadow:0 30px 70px rgba(6,12,40,.42);position:relative}
.hero-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hc-badge{display:inline-flex;align-items:center;gap:7px;background:var(--ok-bg);color:var(--ok);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:30px}
.hc-badge svg{width:15px;height:15px}
.hc-qr{width:48px;height:48px;border-radius:11px;background:var(--navy-800);color:#fff;display:grid;place-items:center;flex-shrink:0}
.hc-qr svg{width:28px;height:28px}
.hc-rows{display:flex;flex-direction:column}
.hc-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--linea)}
.hc-row span{color:var(--txt-mute)}
.hc-row b{color:var(--navy-800);font-weight:600;text-align:right}
.hc-foot{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--txt-dim);font-size:12px}
.hc-foot svg{width:15px;height:15px;color:var(--ok)}

.pub-sec{max-width:1080px;margin:0 auto;padding:48px 22px;scroll-margin-top:68px}
.pub-sec-tit{font-family:var(--fuente-titulo);color:var(--navy-800);font-size:24px;margin-bottom:4px;font-weight:700}
.pub-sec-sub{color:var(--txt-mute);font-size:14.5px;margin-bottom:24px}

.curso-pub{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:20px;box-shadow:var(--sombra-sm);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.curso-pub:hover{box-shadow:var(--sombra);border-color:var(--azul-400);transform:translateY(-3px)}
.curso-pub .fechas{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--acento-soft);color:var(--azul-700);font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:20px}
.curso-pub .fechas svg{width:14px;height:14px}
.curso-pub h3{font-family:var(--fuente-titulo);color:var(--navy-800);font-size:17px;margin:13px 0 8px;line-height:1.25}
.curso-pub .desc{color:var(--txt-mute);font-size:13.5px;line-height:1.55;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.curso-pub .meta{color:var(--txt-mute);font-size:13px;display:flex;flex-direction:column;gap:9px;
  border-top:1px solid var(--linea);padding-top:14px}
.curso-pub .meta>span{display:flex;align-items:flex-start;gap:9px}
.curso-pub .meta svg{width:15px;height:15px;color:var(--azul-600);flex-shrink:0;margin-top:1.5px}
.curso-pub .meta strong{color:var(--navy-800);font-weight:600}
.curso-pub-foot{margin-top:16px}
/* Cabecera de la tarjeta de curso: fecha + modalidad */
.curso-pub-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.curso-mod{display:inline-flex;align-items:center;gap:6px;background:#eef3fb;color:var(--navy-800);font-weight:600;font-size:12px;padding:5px 10px;border-radius:20px}
.curso-mod svg{width:13px;height:13px;color:var(--azul-600)}
/* Sección de beneficios (página pública) */
.pub-features{background:#fff;border-bottom:1px solid var(--linea)}
.pub-features-in{max-width:1080px;margin:0 auto;padding:40px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:22px}
.feature-card .fc-ico{width:46px;height:46px;border-radius:13px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;margin-bottom:12px}
.feature-card .fc-ico svg{width:23px;height:23px}
.feature-card h3{font-family:var(--fuente-titulo);color:var(--navy-800);font-size:16px;margin-bottom:5px;font-weight:700}
.feature-card p{color:var(--txt-mute);font-size:13.5px;line-height:1.55}
/* Encabezado de sección + contador */
.pub-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.pub-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:20px;background:var(--acento-soft);color:var(--azul-700);font-size:14px;font-weight:700;vertical-align:2px}
/* Estado vacío de cursos */
.cursos-vacio{text-align:center;background:#fff;border:1px dashed var(--linea-fuerte);border-radius:18px;padding:46px 26px;max-width:560px;margin:0 auto}
.cursos-vacio .cv-ico{width:64px;height:64px;border-radius:50%;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;margin:0 auto 16px}
.cursos-vacio .cv-ico svg{width:30px;height:30px}
.cursos-vacio h3{font-family:var(--fuente-titulo);color:var(--navy-800);font-size:18px;margin-bottom:8px}
.cursos-vacio p{color:var(--txt-mute);font-size:14px;line-height:1.6;max-width:420px;margin:0 auto 18px}
/* Servicios (página pública) */
.servicios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.servicio-card{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:22px;box-shadow:var(--sombra-sm);transition:transform .16s,box-shadow .16s,border-color .16s;display:block;color:var(--txt)}
a.servicio-card:hover{box-shadow:var(--sombra);border-color:var(--azul-400);transform:translateY(-3px)}
.servicio-card .sv-ico{width:50px;height:50px;border-radius:14px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;margin-bottom:14px}
.servicio-card .sv-ico svg{width:25px;height:25px}
.servicio-card h3{font-family:var(--fuente-titulo);color:var(--navy-800);font-size:16.5px;margin-bottom:6px;font-weight:700}
.servicio-card p{color:var(--txt-mute);font-size:13.5px;line-height:1.55}
.servicio-card .sv-mas{display:inline-block;margin-top:6px;color:var(--azul-700);font-weight:600}
.servicios-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding:20px 24px;background:var(--acento-soft);border-radius:16px;text-align:center}
.servicios-cta span{color:var(--navy-800);font-weight:600;font-size:15px}

.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;border:none;border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;transition:.14s;width:100%}
.btn-wa:hover{background:#1eb858;color:#fff}
.btn-wa svg{width:18px;height:18px;fill:currentColor}
.pub-head .btn-wa{width:auto;padding:9px 15px;font-size:13.5px}

/* align-items:start = cada tarjeta con su altura natural (sin estirarse a la más
   alta de la fila): así ninguna queda con espacio vacío por dentro. */
.cursos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px;align-items:start}
/* Tarjeta de curso: badge tipo calendario + chips de estado */
.curso-pub-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.cfb{flex-shrink:0;width:56px;border:1.5px solid var(--linea-fuerte);border-radius:12px;overflow:hidden;text-align:center;background:#fff}
.cfb-dia{display:block;font-family:var(--fuente-titulo);font-weight:800;font-size:21px;color:var(--navy-800);padding:5px 0 2px;line-height:1.15}
.cfb-mes{display:block;background:var(--azul-600);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 0}
.curso-pub-tit{min-width:0;flex:1}
.curso-pub-chips{display:flex;flex-wrap:wrap;gap:6px}
.curso-pub-tit h3{margin:7px 0 0}
.chip-estado{font-size:11.5px;font-weight:700;padding:3.5px 10px;border-radius:20px}
.chip-estado.pronto{background:#fbf0cf;color:#8a5a00}
.chip-estado.en-curso{background:var(--ok-bg);color:var(--ok)}
.curso-pub .meta-cert svg{color:var(--ok)}
/* Banda de cifras de confianza (entre features y servicios) */
.pub-stats{background:var(--navy-800);color:#fff;padding:32px 22px}
.pub-stats-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
.ps-item b{display:block;font-family:var(--fuente-titulo);font-weight:800;font-size:33px;line-height:1.15}
.ps-item span{color:#cdd9ea;font-size:13.5px;font-weight:600}
@media(max-width:640px){.pub-stats{padding:24px 18px}.pub-stats-in{gap:12px}.ps-item b{font-size:24px}.ps-item span{font-size:12px}}
/* Franja navy: antes era #eef4fb —un color inventado, fuera de la paleta, a 4 puntos del
   fondo de la página—. Esa diferencia mínima no se lee como una decisión sino como una
   mancha. En navy la tarjeta blanca resalta, la sección se reconoce como la acción
   principal (que es lo que la clínica vende) y corta la racha de franjas claras de
   Servicios y Cursos. Los bordes sobran: el propio color define el corte. */
.pub-verif-wrap{background:var(--navy-800)}
.verif-box .vb-ico{width:54px;height:54px;border-radius:15px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;margin:0 auto 14px}
.verif-box .vb-ico svg{width:26px;height:26px}
.verif-box{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:34px 30px;box-shadow:var(--sombra);max-width:620px;margin:0 auto;text-align:center}
.verif-box form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;max-width:500px;margin-left:auto;margin-right:auto}
/* El campo de esta caja ahora es .verif-campo (el mismo que la página de verificación).
   Las reglas de un input suelto que había aquí ya no aplican a nada y además chocaban
   con las de .verif-campo con IGUAL especificidad: ganaba una u otra según el orden del
   archivo, que es una bomba de relojería. Se quitan; el estilo vive en un solo sitio. */
.verif-box .verif-campo{background:#fff}

.pub-contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.contacto-card{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px;box-shadow:var(--sombra-sm);color:var(--txt)}
.contacto-card .cc-ico{width:44px;height:44px;border-radius:12px;background:var(--acento-soft);color:var(--azul-700);display:grid;place-items:center;flex-shrink:0}
.contacto-card .cc-ico svg{width:20px;height:20px}
.ico-brand{fill:currentColor}
.contacto-card .cc-k{font-size:11.5px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.contacto-card .cc-v{color:var(--navy-800);font-weight:600;font-size:14px;margin-top:3px;line-height:1.45;word-break:break-word}
a.contacto-card:hover{border-color:var(--azul-400);box-shadow:var(--sombra)}
a.contacto-card:hover .cc-v{color:var(--azul-700)}

.pub-foot{background:var(--navy-900);color:#9fb2d6}
.pub-foot-in{max-width:1080px;margin:0 auto;padding:30px 22px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.pub-foot-in strong{color:#fff;font-family:var(--fuente-titulo);font-size:15px}
.pub-foot-in small{display:block;color:#6c7fa6;font-size:12px;margin-top:4px;max-width:420px;line-height:1.5}
.pub-foot .soc{display:flex;gap:10px}
.pub-foot .soc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;transition:.14s}
.pub-foot .soc a:hover{background:var(--azul-600)}
.pub-foot .soc svg{width:19px;height:19px;fill:currentColor}

/* ---------- Landing: foto del hero + tarjeta de confianza superpuesta ---------- */
.pub-hero-art{position:relative}
.hero-foto{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(6,12,40,.42);
  aspect-ratio:4/3;background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}
.hero-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Sin foto NO debe parecer un hueco a medio hacer: el borde punteado es el símbolo
   universal de "arrastra tu imagen aquí" y delataba la landing como un boceto. Se
   sustituye por un panel deliberado —degradado + destello— con el logo arriba a la
   izquierda, lejos de la tarjeta que flota en la esquina opuesta. Al subir la foto,
   esto desaparece solo. */
.hero-foto-ph{position:relative;display:block;
  background:radial-gradient(120% 90% at 20% 15%, rgba(26,116,196,.30), transparent 60%),
             linear-gradient(150deg,var(--navy-700),var(--navy-900));
  border:1px solid rgba(255,255,255,.10)}
.hero-foto-ph img,.hero-foto-ph svg{position:absolute;top:32px;left:34px;width:auto;height:46px;opacity:.92}
/* La tarjeta de certificado flota superpuesta sobre la esquina de la foto. */
.pub-hero-art .hero-card{position:absolute;right:-16px;bottom:-24px;max-width:280px;margin:0}
.hc-ok{color:var(--ok);display:inline-flex;align-items:center;gap:5px;font-weight:600}
.hc-ok svg{width:15px;height:15px}
@media(max-width:900px){
  .pub-hero-art{max-width:520px;margin:0 auto}
  .hero-foto{aspect-ratio:16/10}
  .pub-hero-art .hero-card{position:static;margin:-30px auto 0;right:0;bottom:0}
}

/* ---------- Landing: sección "Sobre nosotros" (foto + texto humano) ---------- */
.pub-nosotros{padding-top:24px;padding-bottom:24px}
.nos-grid{display:grid;gap:30px;align-items:center}
@media(min-width:860px){.nos-grid{grid-template-columns:1fr 1.15fr;gap:48px}}
.nos-foto{border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sombra);
  background:linear-gradient(150deg,var(--panel-3),#dbe7f6)}
.nos-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Sin foto: panel de marca, no un hueco punteado con un letrero que diga qué falta. */
.nos-foto-ph{display:grid;place-items:center;border:1px solid var(--linea);
  background:radial-gradient(110% 80% at 30% 25%, var(--acento-soft), var(--panel-2) 70%)}
.nos-foto-ph img,.nos-foto-ph svg{opacity:.85}
.pub-eyebrow-dark{background:var(--acento-soft);border-color:transparent;color:var(--azul-700)}
.pub-eyebrow-dark svg{color:var(--azul-600)}
.nos-txt .pub-sec-tit{margin-top:12px}
.nos-txt>p{color:var(--txt-mute);font-size:15px;line-height:1.65;margin:12px 0 18px}
.nos-lista{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.nos-lista li{display:flex;align-items:center;gap:10px;color:var(--navy-800);font-size:14.5px;font-weight:500}
.nos-lista svg{width:19px;height:19px;color:var(--ok);flex-shrink:0}

/* ---------- Verificación pública ---------- */
.verif-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:#eef4fb}
.verif-card{width:100%;max-width:600px;background:var(--panel);border:1px solid var(--linea);
  border-radius:22px;overflow:hidden;box-shadow:var(--sombra)}
.verif-marca{display:flex;align-items:center;gap:12px;padding:16px 28px;background:var(--navy-800);color:#fff}
.verif-marca strong{font-family:var(--fuente-titulo);font-size:15px}
.verif-marca span{display:block;font-size:11px;color:#9fb2d6;text-transform:uppercase;letter-spacing:.04em}
.verif-marca-cap{margin-left:auto;font-size:11px;color:#9fb2d6;text-transform:uppercase;letter-spacing:.05em;text-align:right}
.verif-hero{padding:32px 30px 24px;text-align:center}
.verif-hero.ok{background:rgba(34,160,94,.05)}
.verif-hero.err{background:rgba(214,69,69,.045)}
.verif-hero.info{background:rgba(31,127,209,.045)}
.verif-estado{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px}
.verif-estado svg{width:38px;height:38px}
.verif-estado.ok{background:var(--ok-bg);color:var(--ok);box-shadow:0 0 0 7px rgba(34,160,94,.08)}
.verif-estado.err{background:var(--err-bg);color:var(--err);box-shadow:0 0 0 7px rgba(214,69,69,.07)}
.verif-estado.info{background:var(--acento-soft);color:var(--azul-600);box-shadow:0 0 0 7px rgba(31,127,209,.07)}
.verif-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.verif-eyebrow.ok{color:var(--ok)}
.verif-eyebrow.err{color:var(--err)}
.verif-eyebrow.info{color:var(--azul-600)}
.verif-tipo{display:inline-block;margin-top:10px;padding:5px 15px;border-radius:20px;background:var(--acento-soft);
  color:var(--azul-700);font-weight:700;font-size:13px;font-family:var(--fuente-titulo)}
.verif-otorga{color:var(--txt-mute);font-size:12.5px;margin-top:16px}
.verif-nombre{font-family:var(--fuente-titulo);font-size:23px;font-weight:700;color:var(--navy-800);line-height:1.22;margin-top:3px;word-break:break-word}
.verif-curso{color:var(--azul-700);font-weight:600;font-size:15px;margin-top:7px;line-height:1.35;
  max-width:440px;margin-left:auto;margin-right:auto}
.verif-emisor{color:var(--txt-mute);font-size:12.5px;margin-top:12px}
.verif-msg{color:var(--txt-mute);font-size:13.5px;margin-top:8px;max-width:430px;margin:8px auto 0;line-height:1.5}
.verif-body{padding:6px 30px 26px}
.verif-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 24px;margin:18px 0 20px;
  border-top:1px solid var(--linea);padding-top:22px}
.vg-item{display:flex;align-items:flex-start;gap:11px;min-width:0}
.vg-item>svg{width:18px;height:18px;color:var(--azul-500);flex-shrink:0;margin-top:2px}
.vg-k{display:block;font-size:11px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.vg-v{display:block;font-weight:600;font-size:14px;color:var(--navy-800);word-break:break-word;line-height:1.35}
.verif-sello{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;
  color:var(--txt-dim);font-size:12px}
.verif-sello svg{width:15px;height:15px;color:var(--ok)}
.verif-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.verif-acciones .btn{flex:1;min-width:150px;justify-content:center}
/* Constancia imprimible: la página de verificación en papel, sin controles */
@media print{
  .verif-wrap{background:#fff!important;min-height:0;padding:0;display:block}
  .verif-card{box-shadow:none;border:1px solid #999;max-width:100%;border-radius:0}
  .verif-marca{background:var(--navy-800)!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .verif-acciones,.verif-buscar,.verif-foot{display:none!important}
}
.verif-buscar{display:flex;gap:10px;margin-top:18px}
.verif-buscar input{flex:1;padding:12px 14px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);
  border-radius:10px;color:var(--txt);font-family:inherit;font-size:14.5px}

/* El prefijo "CERT-" va DENTRO del campo, fijo: antes el marcador decía
   "Ej.: CERT-XXXXXXXXXXXX" y parecía que el campo ya lo traía puesto, así que la gente
   tecleaba solo lo que sigue... y no encontraba nada. Ahora lo que se ve es lo que hay
   que escribir. */
.verif-campo{flex:1;display:flex;align-items:center;min-width:0;background:var(--panel-2);
  border:1.5px solid var(--linea-fuerte);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.verif-campo:focus-within{border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}
.verif-pref{padding:12px 2px 12px 14px;color:var(--txt-mute);font-family:var(--fuente-mono);
  font-size:14.5px;font-weight:600;user-select:none;flex:0 0 auto}
.verif-campo input{flex:1;min-width:0;padding:12px 14px 12px 2px;background:none;border:0;
  color:var(--txt);font-family:var(--fuente-mono);font-size:14.5px;letter-spacing:.06em;
  text-transform:uppercase}
.verif-campo input:focus{outline:none;box-shadow:none}
.verif-campo input::placeholder{letter-spacing:.04em;text-transform:none;opacity:.55}
.verif-foot{padding:18px 30px;text-align:center;border-top:1px solid var(--linea);color:var(--txt-dim);font-size:12px;background:var(--panel-2)}
@media(max-width:560px){
  .verif-marca,.verif-hero,.verif-body,.verif-foot{padding-left:20px;padding-right:20px}
  .verif-grid{grid-template-columns:1fr;gap:15px}
  .verif-nombre{font-size:20px}
  .verif-buscar{flex-direction:column}
  .verif-marca-cap{display:none}
}

/* ---------- Editor de plantilla ---------- */
.editor-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.editor-layout>*{min-width:0}/* permite que las columnas se encojan en móvil (evita desborde horizontal) */
.lienzo-col{display:flex;flex-direction:column;gap:8px;min-width:0}
/* Espacio de trabajo: fondo punteado (estilo herramienta de diseño) con el lienzo flotando */
.lienzo-wrap{position:relative;border:1px solid var(--linea);border-radius:var(--radio);overflow:auto;
  background:#e9eef5;background-image:radial-gradient(rgba(24,37,95,.13) 1px,transparent 1px);background-size:18px 18px;
  box-shadow:inset 0 1px 4px rgba(22,36,94,.06);max-height:76vh;padding:22px}
.lienzo{position:relative;width:100%;display:block;margin:0 auto;background:#fff;
  box-shadow:0 10px 30px rgba(22,36,94,.18),0 2px 6px rgba(22,36,94,.10);border-radius:3px}
.lienzo img{width:100%;display:block;user-select:none;-webkit-user-drag:none;border-radius:3px}
.campo-arrastrable{position:absolute;transform:translate(-50%,-50%);cursor:move;white-space:nowrap;
  padding:2px 6px;border:1px dashed rgba(31,127,209,.55);background:rgba(31,127,209,.08);border-radius:4px;
  font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);transition:border-color .1s,background .1s}
.campo-arrastrable:hover{border-color:rgba(31,127,209,.9);background:rgba(31,127,209,.14)}
.campo-arrastrable.sel{border-style:solid;border-color:var(--azul-600);background:rgba(31,127,209,.12);box-shadow:0 0 0 2px var(--acento-soft)}
.campo-arrastrable.es-qr{width:60px;height:60px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#000;border-color:var(--navy-700)}
.campo-arrastrable.es-linea{padding:0;border:none;background:var(--azul-600)}
.campo-arrastrable.es-linea.sel{outline:2px solid var(--azul-600);outline-offset:3px;box-shadow:none}
.campo-arrastrable.es-imagen{background:rgba(31,127,209,.05)}
.campo-arrastrable.es-imagen.sel{outline:2px solid var(--azul-600);outline-offset:2px;box-shadow:none}
.campo-arrastrable.es-imagen img{pointer-events:none}
/* Espacio de firma (referencia): "Aquí va la firma" + línea + nombre + cargo */
.campo-arrastrable.es-firma{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px 4px;
  background:rgba(31,127,209,.06);border-style:dashed;text-shadow:none;color:var(--navy-800);line-height:1.15}
.campo-arrastrable.es-firma.sel{outline:2px solid var(--azul-600);outline-offset:2px;box-shadow:none}
.campo-arrastrable.es-firma .fs-num{position:absolute;top:-9px;right:-6px;font-size:10px;font-weight:700;color:#fff;
  background:var(--azul-600);border-radius:20px;padding:1px 7px}
.campo-arrastrable.es-firma .fs-top{font-size:11px;font-style:italic;color:var(--azul-700);opacity:.85}
.campo-arrastrable.es-firma .fs-linea{display:block;width:100%;min-width:70px;height:2px;background:#18255f;margin:3px 0 2px}
.campo-arrastrable.es-firma .fs-nombre{font-size:12px;font-weight:700;color:var(--navy-800)}
.campo-arrastrable.es-firma .fs-cargo{font-size:11px;color:var(--txt-mute)}
/* Tiradores de redimensión (esquinas / extremos) del campo seleccionado */
.rz-handle{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid var(--azul-600);border-radius:2px;z-index:12;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rz-nw{top:-6px;left:-6px;cursor:nwse-resize}
.rz-ne{top:-6px;right:-6px;cursor:nesw-resize}
.rz-sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.rz-se{bottom:-6px;right:-6px;cursor:nwse-resize}
.rz-e{top:50%;right:-6px;margin-top:-5.5px;cursor:ew-resize}
.rz-w{top:50%;left:-6px;margin-top:-5.5px;cursor:ew-resize}
.rz-badge{position:absolute;top:-23px;left:50%;transform:translateX(-50%);background:var(--navy-800);color:#fff;
  font-size:10.5px;line-height:1.5;padding:1px 7px;border-radius:4px;white-space:nowrap;z-index:13;pointer-events:none;font-family:var(--fuente-mono)}
.guia-centro{position:absolute;top:0;bottom:0;left:50%;width:1px;background:repeating-linear-gradient(180deg,var(--azul-500),var(--azul-500) 6px,transparent 6px,transparent 12px);pointer-events:none;z-index:5}
.guia-linea{position:absolute;pointer-events:none;z-index:6}
.guia-v{top:0;bottom:0;width:1px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,#e0457a,#e0457a 6px,transparent 6px,transparent 12px)}
.guia-h{left:0;right:0;height:1px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#e0457a,#e0457a 6px,transparent 6px,transparent 12px)}
.editor-panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 20px 0;position:sticky;top:88px;
  box-shadow:var(--sombra-sm);max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.editor-panel>.ed-tab-panel{flex:1 0 auto}
.editor-panel>.ed-accion{margin-top:auto}
.editor-panel h3{font-family:var(--fuente-titulo);font-size:14px;margin-bottom:12px;color:var(--navy-800)}
.campos-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:20px;
  background:var(--acento-soft);color:var(--azul-700);font-size:11.5px;font-weight:700;vertical-align:1px}
.lista-vacia{text-align:center;color:var(--txt-dim);font-size:12px;line-height:1.6;padding:16px 10px;
  border:1.5px dashed var(--linea-fuerte);border-radius:9px;background:var(--panel-2)}

/* Ayuda desplegable del editor */
.editor-ayuda{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:14px;box-shadow:var(--sombra-sm)}
.editor-ayuda summary{display:flex;align-items:center;gap:9px;padding:12px 16px;cursor:pointer;list-style:none;
  font-weight:600;font-size:13.5px;color:var(--navy-800);user-select:none}
.editor-ayuda summary::-webkit-details-marker{display:none}
.editor-ayuda summary .ico-svg{color:var(--azul-600);width:17px;height:17px}
.editor-ayuda .ea-mas{margin-left:auto;font-size:12px;font-weight:600;color:var(--azul-700)}
.editor-ayuda[open] .ea-mas{display:none}
.editor-ayuda .ea-cuerpo{padding:0 16px 14px;border-top:1px dashed var(--linea)}
.editor-ayuda .ea-cuerpo p{color:var(--txt-mute);font-size:13px;line-height:1.6;margin:10px 0 0}
.lista-campos{display:flex;flex-direction:column;gap:6px}
.item-campo{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--panel-2);border:1.5px solid var(--linea-fuerte);
  border-radius:9px;font-size:12.5px;cursor:pointer;transition:.13s}
.item-campo:hover{border-color:var(--azul-500)}
.item-campo.sel{border-color:var(--azul-600);background:var(--acento-soft)}
.item-campo .quitar{margin-left:auto;color:var(--txt-dim);cursor:pointer}
.item-campo .quitar:hover{color:var(--err)}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-grid .campo{margin-bottom:0}
.mini-grid label{font-size:11px}
.mini-grid input,.mini-grid select{padding:8px 9px;font-size:12.5px}
/* Editor: grupos de propiedades + chips de variable + edición inline */
.prop-grupo{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.prop-grupo:last-of-type{border-bottom:0;padding-bottom:0}
.prop-grupo>h4{font-family:var(--fuente-titulo);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--azul-700);margin:0 0 10px}

/* ----- Editor: barra del lienzo, zoom y cuadrícula ----- */
.lienzo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:7px 10px;box-shadow:var(--sombra-sm)}
.lz-grupo{display:flex;align-items:center;gap:6px}
.lz-zoom{min-width:46px;text-align:center;font-weight:700;font-size:12.5px;color:var(--navy-800);font-variant-numeric:tabular-nums}
.lienzo-toolbar .btn.activo{background:var(--acento-soft);border-color:var(--azul-400);color:var(--azul-700)}
/* Cuadrícula visible cuando el imán está activo */
.lienzo.con-grid::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background-image:linear-gradient(to right,rgba(31,127,209,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(31,127,209,.18) 1px,transparent 1px);
  background-size:2.5% 2.5%}
/* Muestras de color de marca (junto a los selectores de color) */
.swatches{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.swatch{width:20px;height:20px;border-radius:5px;border:1.5px solid rgba(0,0,0,.14);cursor:pointer;padding:0;transition:transform .1s}
.swatch:hover{transform:scale(1.15)}
.swatch.blanco{border-color:var(--linea-fuerte)}
/* Guía de margen / zona segura sobre el lienzo (solo visual, no se guarda) */
.margen-guia{position:absolute;inset:6.5%;border:1.5px dashed rgba(26,116,196,.5);border-radius:3px;pointer-events:none}
.margen-guia::after{content:"zona segura";position:absolute;top:-8px;left:9px;background:var(--panel);padding:0 5px;font-size:9.5px;font-weight:600;letter-spacing:.03em;color:var(--azul-700)}
/* Combobox con búsqueda (select data-buscable): escala con muchos ítems */
.combo-oculto{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.combo-buscable{position:relative;width:100%}
.combo-trigger{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:14px;padding:9px 11px;background:#fff;border:1.5px solid var(--linea-fuerte);border-radius:9px;color:var(--txt);cursor:pointer}
.combo-trigger:hover{border-color:var(--azul-400)}
.combo-buscable.abierto .combo-trigger{border-color:var(--azul-600);box-shadow:0 0 0 3px var(--acento-soft)}
.combo-trigger .combo-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-buscable.combo-vacio .combo-trigger .combo-val{color:var(--txt-mute)}
.combo-trigger svg{width:16px;height:16px;color:var(--txt-mute);flex:0 0 auto;transition:transform .15s}
.combo-buscable.abierto .combo-trigger svg{transform:rotate(180deg)}
.combo-panel{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--linea-fuerte);border-radius:10px;box-shadow:var(--sombra);padding:8px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
/* Como popover (capa superior) el panel se muestra sobre el modal sin recortes; oculto mientras
   está cerrado (la regla de autor .combo-panel{display:flex} ganaría a la de UA, así que la fijamos). */
.combo-panel[popover]{margin:0;inset:auto;border-color:var(--linea-fuerte)}
.combo-panel[popover]:not(:popover-open){display:none!important}
.combo-search{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;border:1.5px solid var(--linea);border-radius:8px;outline:none;color:var(--txt)}
.combo-search:focus{border-color:var(--azul-600)}
.combo-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.combo-op{padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--txt);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-op:hover,.combo-op.activo{background:var(--panel-2)}
.combo-op.sel{color:var(--azul-700);font-weight:600}
.combo-nada{padding:10px;text-align:center;color:var(--txt-mute);font-size:12.5px}

/* ----- Editor: paleta para agregar campos ----- */
.paleta{margin-bottom:16px}
.paleta-grupo-tit{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-mute);margin:10px 0 6px}
.paleta-grupo-tit:first-child{margin-top:0}
.paleta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pal-btn{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1.5px solid var(--linea-fuerte);border-radius:9px;
  background:var(--panel-2);color:var(--navy-800);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:left;
  transition:.12s;min-width:0}
.pal-btn:hover{border-color:var(--azul-500);background:var(--acento-soft);color:var(--azul-700)}
.pal-btn svg{width:15px;height:15px;flex-shrink:0;color:var(--azul-600)}
/* El nombre del campo se lee COMPLETO (envuelve a 2 líneas si hace falta): antes
   se cortaba con "…" y no sabías qué campo ibas a agregar. */
.pal-btn span{line-height:1.25;overflow-wrap:anywhere}

/* ----- Editor: fila de giro (número + girar 90°) ----- */
.giro-fila{display:flex;gap:6px;align-items:stretch}
.giro-fila input{flex:1;min-width:0}
.giro-fila .btn{white-space:nowrap;padding:6px 9px}

/* ----- Editor: alinear ----- */
.alinear{display:flex;align-items:center;gap:6px;margin-top:8px}
.alinear .alinear-lbl{font-size:11px;color:var(--txt-mute);width:66px;flex-shrink:0}
.alinear .btn{flex:1;padding:6px 4px;display:inline-flex;align-items:center;justify-content:center}
.alinear .btn .ico-svg{width:14px;height:14px}

/* ----- Editor: ícono en la lista de campos ----- */
.item-campo-ico{width:15px;height:15px;flex-shrink:0;color:var(--azul-600)}
.item-campo.sel .item-campo-ico{color:var(--azul-700)}
.item-campo.arrastrando{opacity:.45}
.item-campo.drop-aqui{border-color:var(--azul-600);box-shadow:0 0 0 2px var(--acento-soft)}
.item-campo .mover,.item-campo .quitar{display:inline-flex;align-items:center;cursor:pointer;padding:0 3px;color:var(--txt-dim)}
.item-campo .mover:hover{color:var(--azul-700)}
.item-campo .mover svg,.item-campo .quitar svg{width:13px;height:13px;display:block}
.item-campo .lock-off{opacity:.4}
.item-campo .lock-on{color:var(--warn);opacity:1}

/* ----- Editor: pestañas del panel (Agregar / Capas / Ajustes) ----- */
.ed-tabs{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--linea);border-radius:11px;padding:4px;margin-bottom:14px;flex-shrink:0}
.ed-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border:0;background:none;
  border-radius:8px;font-family:var(--fuente);font-size:12.5px;font-weight:600;color:var(--txt-mute);cursor:pointer;white-space:nowrap}
.ed-tab .ico-svg{width:14px;height:14px}
.ed-tab:hover{color:var(--azul-700)}
.ed-tab.activo{background:var(--panel);color:var(--navy-800);box-shadow:0 1px 3px rgba(24,37,95,.14)}
.ed-tab .campos-count{margin-left:0}
.ed-tab-panel[hidden]{display:none!important}
.ed-tab-hint{font-size:12px;color:var(--txt-dim);line-height:1.5;margin-bottom:12px}

/* ----- Editor: estado vacío de Ajustes ----- */
.props-vacio{border:1.5px dashed var(--linea-fuerte);border-radius:11px;padding:26px 14px;text-align:center;color:var(--txt-dim)}
.props-vacio svg{width:26px;height:26px;margin-bottom:8px;color:var(--azul-500)}
.props-vacio p{font-size:12.5px;line-height:1.55;margin:0}

/* ----- Editor: cabecera del campo seleccionado ----- */
.props-head{display:flex;align-items:center;gap:6px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--linea)}
.props-titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--fuente-titulo);font-size:13px;font-weight:700;color:var(--navy-800)}
.btn-ico-sm{width:30px;height:30px;padding:0;display:inline-grid;place-items:center;flex-shrink:0}
.btn-ico-sm .ico-svg{width:14px;height:14px}
.btn-ico-sm:disabled{opacity:.45;cursor:not-allowed}
.btn-ico-peligro:hover:not(:disabled){border-color:var(--err);color:var(--err);background:var(--err-bg)}
#btn-lock .ico-lock{display:none}
#btn-lock.activo .ico-lock{display:block}
#btn-lock.activo .ico-unlock{display:none}
#btn-lock.activo{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}

/* ----- Editor: pie de acciones fijo del panel ----- */
.ed-accion{position:sticky;bottom:0;z-index:5;background:var(--panel);border-top:1px solid var(--linea);
  margin:14px -20px 0;padding:12px 20px 14px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.ed-accion-fila{display:flex;gap:8px;align-items:stretch}
.ed-accion-fila .btn-ico-sm{width:40px;height:auto;min-height:36px}
.ed-accion select{flex:1;min-width:0;padding:8px 9px;font-size:12.5px;font-family:inherit;color:var(--txt);
  border:1.5px solid var(--linea-fuerte);border-radius:9px;background:var(--panel)}
.ed-accion .btn{white-space:nowrap}

/* ----- Editor: atajos en la pestaña Agregar ----- */
.atajos-editor{margin-top:14px;padding:11px 12px;background:var(--panel-2);border:1px solid var(--linea);border-radius:11px;
  font-size:11.5px;color:var(--txt-dim);line-height:1.7}
.atajos-editor .atajos-tit{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--navy-800);margin-bottom:4px}
.atajos-editor .atajos-tit .ico-svg{width:13px;height:13px;color:var(--azul-600)}

/* ----- Plantillas: selector de contenido inicial ----- */
.pl-contenido{display:flex;gap:8px;flex-wrap:wrap}
.pl-contenido .check{flex:1;justify-content:center;min-width:110px}

/* ----- Editor: barra de borrador sin guardar ----- */
.draft-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.draft-bar .draft-txt{flex:1;min-width:0}
.draft-bar>.ico-svg{flex-shrink:0;color:var(--azul-700)}
.draft-bar .btn{flex-shrink:0}

/* ----- Editor: modal de vista previa en vivo ----- */
dialog.modal-prev{max-width:min(960px,94vw)}
.prev-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.prev-lados{display:flex;gap:6px}
.prev-lados .btn.activo{background:var(--azul-600);border-color:var(--azul-600);color:#fff}
.prev-curso-lbl{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;color:var(--txt-mute);font-weight:600}
.prev-curso-lbl select{padding:7px 9px;font-size:12.5px;font-family:inherit;color:var(--txt);
  border:1.5px solid var(--linea-fuerte);border-radius:9px;background:var(--panel);max-width:260px}
.prev-zona{display:grid;place-items:center;min-height:320px;background:var(--panel-2);
  border:1px solid var(--linea);border-radius:11px;padding:14px}
.prev-zona img{max-width:100%;max-height:62vh;border:1px solid var(--linea);border-radius:6px;
  box-shadow:0 6px 24px rgba(15,25,68,.14);background:#fff}
.prev-cargando{display:flex;align-items:center;gap:10px;color:var(--txt-mute);font-size:13.5px;font-weight:600}
.prev-nota{margin-top:10px;font-size:12px;color:var(--txt-dim);line-height:1.55}

/* ----- Selectores de color coherentes con el resto de inputs ----- */
.campo input[type=color]{height:36px;padding:3px 4px;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
input[type=color]::-moz-color-swatch{border:0;border-radius:6px}

/* ----- Editor: selección múltiple y campos bloqueados ----- */
.campo-arrastrable.msel{border-style:solid;border-color:var(--azul-500);box-shadow:0 0 0 2px rgba(31,127,209,.25)}
.campo-arrastrable.bloqueado{cursor:default;border-color:rgba(120,132,155,.55);background:rgba(120,132,155,.07)}
.lz-multi{background:var(--acento-soft);border:1px solid var(--azul-400);border-radius:9px;padding:3px 8px}
.lz-multi-n{font-size:12px;color:var(--azul-700);font-weight:600;margin-right:2px;white-space:nowrap}
#btn-reglas.activo,#btn-lock.activo{background:var(--acento-soft);border-color:var(--azul-400);color:var(--azul-700)}

/* ----- Editor: franja del "Ancho máx." + punto de anclaje del campo seleccionado ----- */
.zona-ancho{position:absolute;pointer-events:none;z-index:3;background:rgba(31,127,209,.12);
  border-left:2px dashed rgba(31,127,209,.85);border-right:2px dashed rgba(31,127,209,.85);border-radius:2px}
.zona-ancla{position:absolute;top:-8px;transform:translateX(-50%);width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--azul-600)}

/* ----- Editor: reglas con medidas (cm) ----- */
.reglas{position:absolute;inset:0;pointer-events:none;z-index:5;font-family:var(--fuente-mono)}
.regla-t{position:absolute;font-size:9.5px;color:var(--azul-700);background:rgba(255,255,255,.88);
  padding:0 3px;border-radius:3px;line-height:1.5}
.regla-top{top:2px;transform:translateX(-50%)}
.regla-top::after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:2px;background:var(--azul-600)}
.regla-izq{left:2px;transform:translateY(-50%)}
.regla-cap{position:absolute;right:6px;bottom:5px;font-size:10px;color:var(--navy-800);font-weight:700;
  background:rgba(255,255,255,.9);padding:2px 8px;border-radius:5px;border:1px solid var(--linea)}
.var-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.var-chip{border:1px solid var(--linea-fuerte);background:var(--panel-2);color:var(--azul-700);font-family:var(--fuente-mono);
  font-size:11px;padding:3px 8px;border-radius:6px;cursor:pointer;transition:.12s}
.var-chip:hover{background:var(--acento-soft);border-color:var(--azul-400)}
.campo-arrastrable.editando{cursor:text;background:#fff;color:#15223f;text-shadow:none;
  outline:2px solid var(--azul-600);outline-offset:1px;z-index:20;min-width:40px}

/* ---------- Emisión ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.preview-box{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:#f0f4f9;min-height:200px;display:grid;place-items:center}
.preview-box img{width:100%;display:block}
.preview-box .placeholder{color:var(--txt-dim);padding:40px;text-align:center}

/* ---------- Responsive (móvil / tablet / laptop / PC) ---------- */
.nav-toggle,.nav-cerrar{display:none}
.nav-backdrop{display:none}
.topbar-izq{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-izq h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-accion{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* En móvil el botón de la cabecera muestra solo el icono (+): el título de la sección ya
   dice de qué se agrega, y así no ocupa media fila ni deja un hueco grande al lado. El
   title= mantiene el texto para quien mantenga pulsado o use lector de pantalla. */
@media(max-width:560px){
  .topbar-accion .btn .btn-lbl{display:none}
  .topbar-accion .btn{padding-left:12px;padding-right:12px}
  .topbar-accion .btn .ico-svg{margin:0}
}
.topbar-accion form{display:inline-flex;margin:0}

/* Tablet y menor: el menú lateral se vuelve un cajón deslizable */
@media(max-width:1023px){
  .sidebar{position:fixed;top:0;left:0;width:280px;height:100dvh;transform:translateX(-100%);
    transition:transform .25s ease;z-index:60;box-shadow:0 0 50px rgba(0,0,0,.4)}
  body.nav-abierto .sidebar{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(15,25,68,.55);backdrop-filter:blur(2px);
    z-index:55;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  body.nav-abierto .nav-backdrop{opacity:1;visibility:visible}
  .contenido{width:100%}
  .nav-toggle{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:10px;flex-shrink:0;
    border:1.5px solid var(--linea-fuerte);background:#fff;color:var(--navy-800);cursor:pointer}
  .nav-toggle:hover{background:var(--panel-2);border-color:var(--azul-400);color:var(--azul-700)}
  .nav-cerrar{display:block;margin-left:auto;background:none;border:none;color:#9fb2d6;font-size:28px;
    line-height:1;cursor:pointer;padding:0 6px}
  .nav-cerrar:hover{color:#fff}
  /* Contraer es solo para escritorio: en el cajón móvil no aplica */
  .nav-colapsar{display:none}
}

/* Tablet vertical / móvil grande */
@media(max-width:860px){
  .topbar{flex-wrap:wrap;padding:14px 16px;gap:10px 12px}
  /* Los botones de acción van a su propia fila (todo el ancho), compactos, alineados
     a la izquierda y con salto de línea — sirve igual para 1 botón o para varios. */
  /* Acciones en angosto, dos casos distintos:
     · 1–2 botones: se quedan EN la fila del título, a la derecha (el width:100% que
       había aquí los tiraba abajo aunque cupieran, y un botón solo y suelto a la
       izquierda parecía flotando). Si no caben, el flex-wrap los baja solo.
     · 3+ botones: nunca caben junto al título, así que van en rejilla 2×2 uniforme,
       parejos y a lo ancho para el dedo — mejor que el envoltorio irregular. */
  .topbar-accion{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .topbar-accion form{display:inline-flex;margin:0!important}
  .topbar-accion:has(> :nth-child(3)){width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar-accion:has(> :nth-child(3)) .btn{width:100%}
  /* Con botones dentro, la topbar crece: fijarla robaría media pantalla al hacer scroll.
     Se suelta solo en ese caso (:has); sin :has queda fija, que es lo que había. */
  .topbar:has(.topbar-accion){position:static}
  .contenido-inner{padding:16px}
  .grid-2,.grid-3,.split,.editor-layout{grid-template-columns:1fr}
  .editor-panel{position:static}
  .card{padding:18px}
  /* El topbar se parte en varias filas: la barra de filtros no se fija (evita solapes) */
  .tpl-barra{position:static}
}

/* Móvil estrecho: las propiedades del editor en una sola columna (no se aprietan) */
@media(max-width:480px){
  .mini-grid{grid-template-columns:1fr}
}

/* Móvil */
@media(max-width:560px){
  body{font-size:14.5px}
  .topbar h1{font-size:19px}
  /* En teléfono el título NO comparte fila: compartiéndola, el que perdía era el nombre
     de la sección ("Certificados" → "Certifica…"). La fila es del título; las acciones
     van debajo ancladas a la DERECHA — sueltas a la izquierda parecían flotando. */
  .topbar-accion{width:100%;justify-content:flex-end}
  .metricas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .metrica{padding:16px;gap:12px}
  .metrica .valor{font-size:25px}
  .metrica .etq{overflow-wrap:anywhere}
  .metrica .m-ico{width:40px;height:40px}
  .contenido-inner{padding:13px}
  .card{padding:15px;border-radius:14px}
  /* El botón de la barra superior queda compacto (antes se estiraba a todo el ancho). */
  .topbar-accion .btn{flex:0 0 auto}
  /* Solo el espaciado: forzar 2 columnas aquí metía tarjetas de ~190 px en pantallas de
     425 px —por debajo del mínimo de 240 px que la propia rejilla pide— y el nombre del
     ponente se partía. La regla base (auto-fill con mínimo 240 px) ya decide sola cuántas
     caben, sin números mágicos que se contradigan entre sí. */
  .grid-cards{gap:12px}
  .modal-body{padding:18px;max-height:76vh}
  .modal-head,.modal-foot{padding:14px 18px}
  /* Asistente de emisión: pasos compactos (solo número, texto del paso activo) */
  .wz-pasos{padding:12px 16px 0}
  .wz-paso-txt{display:none}
  .wz-paso.activo .wz-paso-txt{display:inline}
  .wz-tipo-doc{margin:8px 0 0;min-width:0;width:100%}
  /* Footer del modal: botones que llenan el ancho para el dedo */
  .modal-foot{justify-content:stretch}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
  /* Filas de participantes: Tipo+Documento+quitar arriba; Nombre y Correo abajo */
  .parts-head{display:none}
  .parts-fila{grid-template-columns:auto 1fr 36px;gap:8px;row-gap:6px;padding:8px 4px}
  .parts-fila > *:nth-child(1){grid-column:1;grid-row:1}      /* Tipo */
  .parts-fila > *:nth-child(2){grid-column:2;grid-row:1}      /* Documento */
  .parts-fila > *:nth-child(6){grid-column:3;grid-row:1}      /* botón quitar */
  .parts-fila > *:nth-child(3){grid-column:1 / -1;grid-row:2} /* Nombre */
  .parts-fila > *:nth-child(4){grid-column:1 / -1;grid-row:3} /* Correo */
  .parts-fila > *:nth-child(5){grid-column:1 / -1;grid-row:4} /* Celular */
}

/* Tablas que se apilan tipo tarjeta en pantallas pequeñas (sin ocultar datos) */
@media screen and (max-width:680px){
  .tabla-wrap{border:none;background:none;overflow:visible}
  .tabla-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-cards, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td{display:block;width:100%}
  .tabla-cards tr{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-sm);
    margin-bottom:12px;padding:6px 14px}
  .tabla-cards tr:hover{background:#fff}
  .tabla-cards td{display:block;width:100%;text-align:left;word-break:break-word;overflow-wrap:anywhere;
    padding:7px 0;border-bottom:1px solid var(--linea)}
  .tabla-cards td:last-child{border-bottom:none}
  .tabla-cards td::before{content:attr(data-label);display:block;color:var(--txt-mute);font-weight:600;font-size:11px;
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .tabla-cards td[data-label=""]::before,.tabla-cards td:not([data-label])::before,.tabla-cards td.acciones-celda::before{display:none}
  .tabla-cards td.acciones-celda{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}

  /* Vista COMPACTA: tarjeta densa pero bien DISTRIBUIDA con grid por zonas (no un dato por
     línea, que era muy alto; tampoco escondiendo curso/fecha). Nombre y estado arriba
     —lo que se busca primero—, luego código, curso+fecha juntos, y correo+acciones abajo.
        [☐] Nombre                    Estado
            DNI …
            CÓDIGO · serie
            Curso…               fecha
            correo            [PDF] [⋮]        */
  .compacta .tabla-cards tr{
    display:grid; align-items:start; gap:5px 12px; padding:12px 14px;
    grid-template-columns:20px minmax(0,1fr) auto;
    grid-template-areas:
      "chk nombre estado"
      "chk codigo codigo"
      "chk curso  fecha"
      "chk correo acciones";
  }
  /* width:auto es CLAVE: la regla base de tarjeta pone width:100% en cada td, lo que
     anula justify-self:end (la celda llena la columna y el contenido queda a la izquierda).
     Con width:auto las zonas de la derecha (estado/fecha/acciones) se encogen al contenido
     y sí se pegan al borde derecho; las de la izquierda igual estiran por el stretch. */
  .compacta .tabla-cards td{display:block;width:auto;padding:0;border-bottom:none;min-width:0;line-height:1.3}
  .compacta .tabla-cards td::before{display:none}
  /* Casilla arriba, a la altura de la primera línea del nombre. */
  .compacta .tabla-cards td[data-label=""]:first-child{grid-area:chk;align-self:start;padding-top:1px}
  /* Nombre (con su DNI debajo, dentro del mismo td). El estado se alinea ARRIBA para que
     quede a la altura del nombre y no flotando entre nombre y DNI. */
  .compacta .tabla-cards td[data-label="Participante"]{grid-area:nombre;font-size:14px}
  .compacta .tabla-cards td[data-label="Participante"] a{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compacta .tabla-cards td[data-label="Participante"] small{font-size:11.5px}
  /* text-align:right para que el motivo de anulación quede alineado bajo su etiqueta. */
  .compacta .tabla-cards td[data-label="Estado"]{grid-area:estado;justify-self:end;text-align:right}
  .compacta .tabla-cards td[data-label="Código"]{grid-area:codigo;font-size:11.5px;color:var(--txt-mute)}
  .compacta .tabla-cards td[data-label="Código"] br{display:none}          /* serie en la misma línea */
  .compacta .tabla-cards td[data-label="Código"] small{margin-left:6px}
  /* Curso y fecha comparten fila y quedan alineados por arriba (una línea cada uno). */
  .compacta .tabla-cards td[data-label="Curso"]{grid-area:curso;font-size:12.5px;color:var(--txt);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compacta .tabla-cards td[data-label="Emitido"]{grid-area:fecha;justify-self:end;font-size:12px;color:var(--txt-mute);white-space:nowrap}
  .compacta .tabla-cards td[data-label="Emitido"] br,
  .compacta .tabla-cards td[data-label="Emitido"] small{display:none}      /* solo la fecha, sin "por X" */
  /* Correo y acciones comparten la fila de abajo, centradas entre sí (la etiqueta de
     correo es más baja que los botones). La celda de acciones NO lleva data-label:
     se identifica por su clase .acciones-celda. */
  .compacta .tabla-cards td[data-label="Correo"]{grid-area:correo;align-self:center;font-size:11.5px}
  .compacta .tabla-cards td[data-label="Verificaciones"]{display:none}     /* dato secundario: en Detalle */
  /* display:flex explícito: la regla de arriba pone display:block a todos los td y, por
     orden, le ganaba al flex base de .acciones-celda — por eso PDF y ⋮ salían escalonados.
     nowrap + align-items:center los deja en una sola línea y a la misma altura. */
  .compacta .tabla-cards td.acciones-celda{grid-area:acciones;justify-self:end;align-self:center;
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;
    width:auto;padding-top:0;gap:6px}

  /* Detalle de curso: esa tabla no tiene Código, Curso ni Verificaciones (el curso es el de
     la propia página), y en vez de código muestra el N.º de serie. Mismas zonas, una fila
     menos. El resto de reglas de .compacta ya le sirven tal cual. */
  .compacta #tabla-parts tr{
    grid-template-areas:
      "chk nombre estado"
      "chk serie  fecha"
      "chk correo acciones";
  }
  .compacta #tabla-parts td[data-label="N.º serie"]{grid-area:serie;font-size:11.5px;color:var(--txt-mute)}
}

@media(max-width:380px){
  .metricas{grid-template-columns:1fr}
  /* .grid-cards no necesita regla: su auto-fill ya cae a una columna mucho antes. */
  .segmento{flex-direction:column}
}

/* Toggle de vista Compacta/Detalle (Certificados). Solo tiene sentido en móvil —en
   escritorio la tabla ya es compacta—, así que se oculta con .solo-movil. */
.solo-movil{display:none}
@media screen and (max-width:680px){ .solo-movil{display:flex} }
.vista-toggle{gap:0;margin:0 0 12px;justify-content:flex-end}
.vista-toggle .vt-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:600;
  background:#fff;color:var(--txt-dim);border:1.5px solid var(--linea-fuerte);cursor:pointer}
.vista-toggle .vt-btn:first-child{border-radius:9px 0 0 9px}
.vista-toggle .vt-btn:last-child{border-radius:0 9px 9px 0;border-left:0}
.vista-toggle .vt-btn .ico-svg{width:15px;height:15px}
.vista-toggle .vt-btn.activo{background:var(--azul-600);color:#fff;border-color:var(--azul-600)}

/* =====================================================================
   Pulido visual (tipografía, formularios, animaciones sutiles)
   — va al final: por cascada refina las reglas anteriores sin tocarlas.
   ===================================================================== */

/* --- Tipografía --- */
::selection{background:var(--azul-600);color:#fff}
h1,h2,h3{text-wrap:balance}
.topbar h1{letter-spacing:-.35px}
.metrica .valor,.rk-n,.ps-item b,.pub-count,.campos-count,.lz-zoom,.pag-info,.cfb-dia{font-variant-numeric:tabular-nums}

/* --- Formularios modernos --- */
/* Selects con flecha propia (la nativa de Windows desentona) */
.campo select,.mini-grid select,.filtros select,.dash-filtro select,.ed-accion select,.prev-curso-lbl select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px}
.campo select{cursor:pointer}
/* Borde que responde al pasar el mouse (antes solo al enfocar) */
.campo input:not([type=checkbox]):not([type=radio]):not([type=range]):hover:not(:focus),
.campo select:hover:not(:focus),.campo textarea:hover:not(:focus){border-color:#b7c8de}
/* Etiquetas de campo: micro-mayúsculas, más "producto" */
.campo>label{font-size:12px;text-transform:uppercase;letter-spacing:.045em;color:var(--txt-mute)}
.campo>label small{text-transform:none;letter-spacing:0}

/* --- Iconografía consistente: alertas con icono SVG (antes glifos de texto) --- */
.alerta-ok::before,.alerta-error::before,.alerta-info::before{
  content:"";width:18px;height:18px;flex-shrink:0;margin-top:1px;background:currentColor;
  -webkit-mask:var(--al-ico) center/contain no-repeat;mask:var(--al-ico) center/contain no-repeat}
.alerta-ok{--al-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.alerta-error{--al-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E")}
.alerta-info{--al-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}

/* --- Dashboard --- */
.metrica{transition:transform .16s,box-shadow .16s,border-color .16s}
.metrica:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.metrica .valor{font-size:28px}

/* --- Animaciones sutiles --- */
dialog[open]{animation:dlg-in .16s ease}
@keyframes dlg-in{from{opacity:0;transform:translate(-50%,-49%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
dialog::backdrop{animation:bk-in .18s ease}
@keyframes bk-in{from{opacity:0}to{opacity:1}}
.btn-primario:hover{box-shadow:0 3px 10px rgba(31,127,209,.28)}
.btn-secundario:hover{box-shadow:0 3px 10px rgba(22,36,94,.28)}

/* --- Accesibilidad: contraste AA (Lighthouse) --- */
/* txt-dim y ok más profundos (pasan 4.5:1 sobre blanco/fondos suaves); azul-600
   apenas más profundo para que el texto blanco de botones/chips pase AA. */
:root{--txt-dim:#66758f;--ok:#0b7a52;--azul-600:#1a74c4}
.btn-wa{background:#0d7a44}
.btn-wa:hover{background:#0a6338}
/* Texto solo para lectores de pantalla (estructura de encabezados) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Pie público: los smalls sobre navy-900 necesitan más luz para AA */
.pub-foot-in small{color:#8b9ec7}

/* --- Accesibilidad: sin movimiento si el usuario lo pide --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* Cuota de correo restante durante el envío: el hosting corta a ~100/hora, y verlo
   avanzar evita que una pausa por límite parezca que el sistema se colgó. */
.envio-cuota{margin:12px 0 0;padding:9px 12px;background:var(--panel-2);border:1px solid var(--linea);
  border-radius:9px;color:var(--txt-dim);font-size:12.5px;text-align:center}
.envio-cuota strong{color:var(--navy-800)}