/* ATBC 2027 Admin — self-contained styles */
/* Self-hosted Inter (variable, Latin) — no external Google Fonts request.
   font-display:swap => UI paints instantly with the system fallback, then swaps. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("inter-var.woff2") format("woff2")}
:root {
  --green:#0e7c66; --green-d:#115e4a; --green-soft:#ecfdf5;
  --ink:#0f1a15; --soft:#33433a; --muted:#5b6b62; --line:#dde7df; --line-2:#c7d6ca;
  --bg:#f3f8f3; --surface:#fff; --surface-2:#f4f8f4;
  --amber:#e0532a; --blue:#2563eb; --red:#dc2626;
  --r:12px; --r-sm:8px; --shadow:0 6px 20px rgba(10,44,32,.10); --shadow-sm:0 2px 8px rgba(10,44,32,.07);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box} *{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--green);text-decoration:none}
/* Esqueleto de carga. Formas grises en lugar de la palabra «Loading»: la
   cabecera ya está pintada por el servidor, así que lo único que falta es el
   contenido, y unas formas del tamaño correcto se leen como «esto llega
   enseguida» en vez de como «esto es otra aplicación». */
.boot{padding:26px 22px;max-width:1400px;margin:0 auto}
.boot__bar{height:38px;border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:18px}
.boot__card{height:120px;border-radius:var(--r);background:var(--surface-2);margin-bottom:14px}
.boot__bar,.boot__card{animation:latido 1.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.55}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.boot__bar,.boot__card{animation:none}}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:.15s}
.btn:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn--primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--green-d);border-color:var(--green-d)}
.btn--primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn--danger{color:var(--red);border-color:#f3c7c7}
.btn--danger:hover{background:#fdeeee}
.btn--sm{padding:5px 10px;font-size:12px}
.btn--icon{padding:6px 9px;font-weight:700}

/* ---- official banner ---- */
.site-banner{display:block;width:100%;background:linear-gradient(135deg,#0d3b2e 0%,#0e7c66 62%,#14907a 100%)}
.site-banner .sb-in{max-width:1460px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px}
.site-banner .sb-logo{width:46px;height:46px;flex:none;border-radius:10px;background:#faeac6;padding:3px}
.site-banner .sb-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.site-banner .sb-txt strong{color:#fff;font-size:16px;font-weight:800;letter-spacing:.01em}
.site-banner .sb-txt span{color:#d9f2e8;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.site-banner .sb-txt span{white-space:normal}}

/* ---- login ---- */
.login-wrap{min-height:68vh;display:grid;place-items:center;padding:24px}
.login{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:32px;width:100%;max-width:380px;text-align:center}
.login .mark{width:54px;height:54px;border-radius:14px;background:linear-gradient(145deg,#0e9b73,#115e4a);display:grid;place-items:center;margin:0 auto 16px;color:#fff;font-weight:800;font-size:20px}
.login h1{font-size:20px;margin-bottom:4px}
.login p{color:var(--muted);font-size:13px;margin-bottom:20px}
.login input{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:15px;margin-bottom:12px}
.login input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,124,102,.18)}
.login .err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:8px}

/* ---- shell ---- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar__in{max-width:1460px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#0e9b73,#115e4a);display:grid;place-items:center;color:#fff;font-size:15px}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.tabs{display:flex;flex-wrap:wrap;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.tab{padding:6px 11px;border-radius:999px;font-weight:700;font-size:12.5px;color:var(--soft);white-space:nowrap}
.tab.on{background:var(--surface);color:var(--green);box-shadow:var(--shadow-sm)}
.tab span{font-weight:600;color:var(--muted);font-size:11px;margin-left:5px}
.spacer{flex:1}
.dirty{font-size:12px;color:var(--amber);font-weight:700;display:none}
.dirty.show{display:inline}

.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 80px}
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,124,102,.15)}
.select{height:40px;padding:0 32px 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-weight:600;color:var(--soft);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* ---- session group (talks tab) ---- */
.sgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.sgroup__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.sgroup__stripe{width:5px;align-self:stretch;border-radius:99px;background:var(--green)}
.sgroup__title{font-weight:700}
.sgroup__meta{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.b-symposium{color:#0e7c66;background:#0e7c6622}.b-oral{color:#2563eb;background:#2563eb1e}
.b-poster{color:#d97706;background:#d977061f}.b-ofs{color:#7c3aed;background:#7c3aed1e}
.b-workshop{color:#db2777;background:#db27771e}.b-course{color:#0891b2;background:#0891b21e}
.talkrow{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line)}
.talkrow:hover{background:var(--surface-2)}
.talkrow__num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--green);width:24px;text-align:center;flex:none}
.talkrow__main{flex:1;min-width:0}
.talkrow__title{font-weight:600;font-size:13px}
.talkrow__sub{font-size:12px;color:var(--muted)}
.talkrow__act{display:flex;gap:4px;flex:none}
.bulk-chk{flex:none;width:16px;height:16px;cursor:pointer;margin:0}
.drag{flex:none;cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;padding:0 2px}
.drag:active{cursor:grabbing}
.talkrow.drop-over{box-shadow:inset 0 2px 0 0 var(--green);background:var(--green-soft)}
.sgroup__head.drop-over{outline:2px dashed var(--green);outline-offset:-2px}
.talkrow__title[data-title]{cursor:text}
.inline-input{width:100%;font:inherit;font-weight:600;border:1px solid var(--green);border-radius:5px;padding:2px 7px;box-shadow:0 0 0 3px rgba(14,124,102,.15)}
.bulkbar{position:sticky;top:54px;z-index:6;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--green-soft);border:1px solid #0e7c6640;border-radius:var(--r);padding:10px 14px;margin-bottom:12px}
.reorder{display:flex;flex-direction:column;gap:1px}
.reorder button{padding:0 5px;font-size:10px;line-height:13px;color:var(--muted);border:1px solid var(--line);border-radius:4px}
.reorder button:hover{color:var(--green);border-color:var(--line-2)}

/* ---- generic list table (sessions/events) ---- */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}.row:hover{background:var(--surface-2)}
.row__main{flex:1;min-width:0}
.row__t{font-weight:600}
.row__s{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:600}

.empty{padding:50px;text-align:center;color:var(--muted)}

/* ---- dashboard ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat__n{font-size:26px;font-weight:800;color:var(--green);line-height:1}
.stat__l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.stat__sub{font-size:11px;color:var(--soft);margin-top:7px;line-height:1.4}
.section-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 12px}
.flags{display:flex;flex-direction:column;gap:9px}
.flag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.flag__head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer}
.flag__head:hover{background:var(--surface-2)}
.flag__dot{width:10px;height:10px;border-radius:50%;flex:none}
.flag--ok .flag__dot{background:#16a34a}.flag--warn .flag__dot{background:#e0532a}.flag--info .flag__dot{background:#2563eb}
.flag__t{font-weight:700;flex:1}
.flag__n{font-weight:800;font-size:14px}
.flag--ok .flag__n{color:#16a34a}.flag--warn .flag__n{color:#e0532a}.flag--info .flag__n{color:#2563eb}
.flag__chev{color:var(--muted);font-size:11px;transition:.15s}
.flag.open .flag__chev{transform:rotate(180deg)}
.flag__body{border-top:1px solid var(--line);display:none}
.flag.open .flag__body{display:block}
.flag__item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--line);font-size:13px;cursor:pointer}
.flag__item:first-child{border-top:0}.flag__item:hover{background:var(--surface-2)}
.flag__item.muted{cursor:default}

/* ---- modal / form ---- */
.modal-bg{position:fixed;inset:0;background:rgba(11,20,16,.45);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--r);box-shadow:0 20px 56px rgba(0,0,0,.25);width:100%;max-width:640px;margin:auto;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal__head h3{font-size:16px}.modal__head .spacer{flex:1}
.modal__body{padding:18px 20px;max-height:64vh;overflow-y:auto}
.modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--soft);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:14px}
.field textarea{min-height:90px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(14,124,102,.15)}
.field .hint{font-size:11px;color:var(--muted);margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
@media (max-width:760px){.grid3{grid-template-columns:1fr}}
.field-check{display:flex;align-items:center;gap:8px}
.field-check input{width:auto}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f1a15;color:#f6faf6;padding:11px 20px;border-radius:999px;box-shadow:var(--shadow);font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#7f1d1d}

@media(max-width:640px){.grid2{grid-template-columns:1fr}.tabs .tab span{display:none}.topbar__in{flex-wrap:wrap}}

/* ---- Schedule (big-time headers) editor ---- */
.sched{max-width:720px}
.sched h3{margin:22px 0 10px;font-size:15px}
.frow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.frow label{width:170px;flex:none;font-weight:600;font-size:13px}
.frow .in{flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.frow .in:focus{outline:none;border-color:var(--green)}
.frow--head{margin-bottom:4px}
.frow--head span{flex:1;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}

/* ---- Emails (author notifications) ---- */
.em-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--soft)}
.em-pill.ok{background:var(--green-soft);border-color:#bfe6d6;color:var(--green-d)}
.em-pill.warn{background:#fff4ec;border-color:#f3cdb4;color:var(--amber)}
.em-stats{margin:12px 0;color:var(--soft);font-size:14px}
.em-tpl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;margin:12px 0}
.em-tpl summary{cursor:pointer;font-weight:600;color:var(--green-d)}
.em-tpl label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.em-tpl input,.em-tpl textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font:inherit;font-size:13px}
.em-tpl .row{display:flex;align-items:center;gap:10px;margin-top:12px}
.em-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.em-actions input{min-width:240px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.em-actions .spacer{flex:1}
.em-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
.em-table th{background:var(--surface-2);text-align:left;padding:9px 12px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line)}
.em-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.em-table tr:last-child td{border-bottom:none}
.em-table .row{display:flex;gap:6px}
.em-chg{margin:4px 0;font-size:12px}
.em-was{color:var(--muted);text-decoration:line-through}
.em-now{color:var(--green-d);font-weight:600}
.em-modal{position:fixed;inset:0;background:rgba(10,30,22,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.em-modal__box{background:var(--surface);border-radius:var(--r);width:min(680px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.em-modal__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.em-frame{flex:1;border:none;width:100%;min-height:60vh;background:#fff;border-radius:0 0 var(--r) var(--r)}
.em-steps{margin:8px 0 12px 18px;font-size:13px;color:var(--soft);line-height:1.7}
.em-steps code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px}
.em-tpl textarea.em-script,textarea.em-script{width:100%;font-family:var(--mono);font-size:12px;background:#0a0c0b;color:#e9f6ee;border:1px solid #2a3a30;border-radius:var(--r-sm);padding:12px;line-height:1.45;white-space:pre;overflow:auto;margin:8px 0}
.em-safe{background:var(--green-soft);border:1px solid #bfe6d6;border-radius:var(--r-sm);padding:8px 12px;font-size:13px;color:var(--green-d);margin:8px 0}

/* ---- Sessions · schedule grid (mirrors first sheet of the Grid xlsx) ---- */
.schedgrid{overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);max-height:78vh}
.schedgrid table{border-collapse:collapse;font-size:12px;width:max-content;min-width:100%;background:#fff}
.schedgrid th,.schedgrid td{border:1px solid #d3dbe3;padding:5px 7px;vertical-align:top;text-align:left;line-height:1.35}
.schedgrid thead th{position:sticky;top:0;z-index:2;background:#1F4E78;color:#fff;font-weight:700;white-space:nowrap}
.schedgrid .gtime{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.schedgrid .gslot{text-align:center;font-weight:700;background:#f4f7f5}
.schedgrid .groom{white-space:nowrap;font-weight:600;background:#f9fbfa}
.schedgrid .gcell{min-width:155px;max-width:240px}
.schedgrid .gcell[data-sess]{cursor:pointer}
.schedgrid .gcell[data-sess]:hover{outline:2px solid var(--green-d,#0b6);outline-offset:-2px}
.schedgrid tr.gbandrow td{text-align:center;font-weight:600}
.schedgrid tr.gbandrow .gtime,.schedgrid tr.gbandrow .groom{font-weight:600}
.schedgrid .gconflict{outline:2px solid #c0392b;outline-offset:-2px}
.schedgrid .gwarn{color:#c0392b;font-weight:800}
.sunblock{margin-top:16px}
.sunblock table{border-collapse:collapse;font-size:12px}
.sunblock th,.sunblock td{border:1px solid #c7d2e0;padding:5px 9px;text-align:left;vertical-align:top}
.sunblock th{background:#305496;color:#fff}
.sunblock td{background:#D9E1F2}

/* ---- Attendees sub-platform ---- */
.att-stats{margin:6px 2px 12px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.att-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 2px 12px}
.att-filter .att-flabel{font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.fchip{font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--soft);cursor:pointer;transition:.12s}
.fchip:hover{border-color:var(--line-2)}
.fchip b{font-weight:700;opacity:.7}
.fchip.on{background:var(--green-d);border-color:var(--green-d);color:#fff}
.fchip.on b{opacity:.85}
.att-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);max-height:74vh}
.att-table{border-collapse:collapse;width:100%;font-size:13px;background:var(--surface)}
.att-table th,.att-table td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.att-table thead th{position:sticky;top:0;background:var(--surface-2);font-weight:600;white-space:nowrap;z-index:1}
.att-table tbody tr:hover{background:var(--surface-2)}
.att-id{white-space:nowrap;color:var(--muted);font-size:12px}
.att-checkin{margin:0 2px 12px;font-size:13px;color:var(--soft);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.att-checkin a.btn{margin-left:2px}
.att-cinum{color:var(--green-d)}
.att-ci{color:#fff;background:var(--green-d);border-radius:50%;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;vertical-align:1px;cursor:pointer}
.att-ci:hover{background:#c0392b}
.att-guess{font-size:10px;font-weight:600;color:#9a6700;background:#fdf3d6;border:1px solid #f0d98a;border-radius:4px;padding:0 5px;vertical-align:1px}
.att-progcell{white-space:nowrap}
.att-prog{display:inline-block;font-size:11px;font-weight:600;font-family:var(--mono);border-radius:4px;padding:1px 6px;margin:1px 3px 1px 0}
.att-prog.spk{color:#0a6b4e;background:#dbf3e8;border:1px solid #aedcc8}
.att-prog.org{color:#5b3a87;background:#ece6f7;border:1px solid #cfc0ec}
.att-prog.none{color:#a32d2d;background:#fde3e3;border:1px solid #f0b8b8}
.regdot{font-size:11px;vertical-align:1px}
.regdot.reg-ok{color:#1d9e6e}.regdot.reg-pend{color:#e0a516}.regdot.reg-no{color:#d24a4a}
.reg-legend{font-size:12px;margin:0 2px 10px}
.att-name{font-weight:600}
.att-mail{font-size:12px}
.att-type{max-width:230px}
.att-amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.att-table .select.att-status{padding:4px 8px;font-size:12px;min-width:128px}
.att-notes{width:100%;min-width:120px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:var(--surface);color:var(--ink)}
.att-saved{outline:2px solid var(--green-d);outline-offset:1px}
/* ---- submissions table + detail (2027) ------------------------------- */
.sub-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
.sub-table th{background:var(--surface-2);text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.sub-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.sub-table tbody tr{cursor:pointer}
.sub-table tbody tr:hover{background:var(--green-soft)}
.sub-table .id{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.st{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.st--New{background:#e0f2fe;color:#075985}
.st--Under.review,.st--Under{background:#fef3c7;color:#92400e}
.st--Accepted{background:var(--green-soft);color:var(--green-d)}
.st--Rejected{background:#fee2e2;color:#991b1b}
.st--Withdrawn{background:#f1f5f9;color:#475569}
.det{max-height:64vh;overflow:auto;margin:14px 0}
.det-row{display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.det-row dt{color:var(--muted);font-size:12px}
.det-row dd{font-size:13px;white-space:pre-wrap;word-break:break-word}
.det-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.notes{width:100%;min-height:70px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:13px}

/* ---- grouped tab bar + module launcher (2027) ------------------------- */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:24px}
.mod{display:flex;flex-direction:column;gap:5px;text-align:left;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--r);padding:15px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.mod:hover{border-color:var(--green);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.mod__t{font-size:14px;font-weight:800;color:var(--green-d)}
.mod__t b{color:var(--green);font-size:16px;margin-left:2px}
.mod__d{font-size:12px;color:var(--soft);line-height:1.4}
.mod__s{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}

/* ---- module icons + header sign-out (2027) ---------------------------- */
.tab .tico{width:14px;height:14px;margin-right:6px;vertical-align:-2px;opacity:.75}
.tab.on .tico{opacity:1}
.mod__t .mico{width:16px;height:16px;margin-right:7px;vertical-align:-3px;color:var(--green)}


/* ==========================================================================
   2027 visual pass — lighter surfaces, one accent colour per module.
   Added at the end so it layers over the inherited 2026 sheet without
   rewriting it: the palette below wins, everything else stays as it was.
   Accents come from the ATBC2027 logo — forest canopy, okoumé gold, the
   rising sun, the Atlantic — and are keyed off [data-group], which the tab
   bar and the module cards already carry.
   ========================================================================== */
:root{
  --bg:#f7faf8; --surface:#fff; --surface-2:#f2f7f3;
  --line:#e6eee9; --line-2:#d3e2d8;
  --ink:#0d1a14; --soft:#31423a; --muted:#657a6f;
  --shadow-sm:0 1px 2px rgba(13,43,31,.05),0 2px 8px rgba(13,43,31,.05);
  --shadow:0 10px 30px rgba(13,43,31,.09);
  /* module accents */
  --a-home:#0e7c66; --a-reg:#1d6fb8; --a-subs:#0e7c66; --a-program:#8a5cd6;
  --a-pres:#0f8ea3; --a-people:#c2731a; --a-certs:#b04bb8; --a-emails:#2563eb;
  --a-webinars:#d1495b; --a-awards:#c8901a; --a-surveys:#3f7d3f;
}
body{background:
  radial-gradient(1200px 420px at 15% -8%, #eaf6ef 0%, transparent 60%),
  radial-gradient(1000px 380px at 92% -4%, #fdf6e3 0%, transparent 55%),
  var(--bg);
  background-attachment:fixed}

/* --- module accents: tabs, cards and their icons ------------------------- */
[data-group="home"]{--accent:var(--a-home)}      [data-group="reg"]{--accent:var(--a-reg)}
[data-group="subs"]{--accent:var(--a-subs)}      [data-group="program"]{--accent:var(--a-program)}
[data-group="pres"]{--accent:var(--a-pres)}      [data-group="people"]{--accent:var(--a-people)}
[data-group="certs"]{--accent:var(--a-certs)}    [data-group="emails"]{--accent:var(--a-emails)}
[data-group="webinars"]{--accent:var(--a-webinars)} [data-group="awards"]{--accent:var(--a-awards)}
[data-group="surveys"]{--accent:var(--a-surveys)}

.tabs{background:rgba(255,255,255,.72);border-color:var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px)}
.tab{color:var(--soft);transition:color .13s,background .13s}
.tab:hover{color:var(--accent,var(--green))}
.tab.on{background:color-mix(in srgb, var(--accent,var(--green)) 11%, #fff);
        color:var(--accent,var(--green));box-shadow:none}
.tab.on .tico{opacity:1;color:var(--accent,var(--green))}
.tab span{background:color-mix(in srgb, var(--accent,var(--green)) 12%, #fff);
          color:var(--accent,var(--green));padding:1px 7px;border-radius:99px;margin-left:6px;font-weight:700}

/* --- module cards: a coloured icon chip, a lift on hover ----------------- */
.mods{gap:14px}
.mod{position:relative;border-color:var(--line);border-radius:14px;padding:16px 17px 15px;
     box-shadow:var(--shadow-sm);overflow:hidden}
.mod::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent,var(--green));opacity:.85}
.mod:hover{border-color:color-mix(in srgb, var(--accent,var(--green)) 45%, var(--line));
           box-shadow:var(--shadow);transform:translateY(-2px)}
.mod__t{color:var(--ink);display:flex;align-items:center;gap:9px}
.mod__t b{color:var(--accent,var(--green));font-size:17px;margin-left:auto}
.mod__t .mico{width:30px;height:30px;padding:6px;margin:0;border-radius:9px;flex:none;
              color:var(--accent,var(--green));background:color-mix(in srgb, var(--accent,var(--green)) 12%, #fff)}
.mod__s{color:var(--accent,var(--green));opacity:.85}

/* --- stat tiles ---------------------------------------------------------- */
.stats{gap:12px}
.stat{border-color:var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:16px 18px}
.stat__n{font-size:30px;letter-spacing:-.02em}
.stat:nth-child(6n+2) .stat__n{color:var(--a-reg)}
.stat:nth-child(6n+3) .stat__n{color:var(--a-program)}
.stat:nth-child(6n+4) .stat__n{color:var(--a-pres)}
.stat:nth-child(6n+5) .stat__n{color:var(--a-people)}
.stat:nth-child(6n) .stat__n{color:var(--a-certs)}

/* --- tables: lighter head, calmer rows ---------------------------------- */
.sub-table{border-color:var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.sub-table th{background:linear-gradient(#fbfdfc,#f3f8f5);color:var(--muted);
              border-bottom:1px solid var(--line);padding:11px 13px}
.sub-table td{border-top:1px solid var(--line);padding:11px 13px}
.sub-table tbody tr:hover{background:#f6fbf8}
.sub-table tbody tr:hover .id{color:var(--green)}

/* --- section headings, cards, flags -------------------------------------- */
.section-title{color:var(--soft);font-size:12.5px;letter-spacing:.05em;margin:22px 0 12px;
               display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.flag{border-color:var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.flags{display:grid;gap:8px}
.empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:14px;
       padding:34px 20px;text-align:center;color:var(--muted)}

/* --- buttons ------------------------------------------------------------- */
.btn{border-radius:9px;transition:background .13s,border-color .13s,color .13s}
.btn--primary{background:linear-gradient(180deg,#159a7e,#0e7c66);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:linear-gradient(180deg,#0e7c66,#0b6151)}

/* --- status pills: softer, readable -------------------------------------- */
.st{padding:3px 10px;font-weight:700;letter-spacing:.01em}
.st--New{background:#e7f2fd;color:#12557f}
.st--Under{background:#fdf3dd;color:#8a5a10}
.st--Accepted{background:#e6f7ef;color:#0f6b4d}
.st--Rejected{background:#fdeaea;color:#a32626}
.st--Withdrawn{background:#eff3f1;color:#5b6b62}

/* Disagreement between reviewers is worth noticing, not an alarm: warm ochre
   with a tint, instead of the red-orange that made every row look broken. */
:root{--warn:#b0761a; --warn-soft:#fdf4e2}
.sub-table td[title*="disagree"]{color:var(--warn)!important}
.sub-table td[title*="disagree"] b{background:var(--warn-soft);padding:2px 8px;border-radius:99px;display:inline-block}

/* The 2026 sheet puts the padding on .modal__head / __body / __foot. The panels
   written for 2027 place their content straight inside .modal, so it sat flush
   against the edges. This gives those — and only those — real margins, while
   letting the header keep its full-width rule. */
.modal--pad{padding:0 24px 20px}
.modal--pad .modal__head{margin:0 -24px 16px;padding:16px 24px}
.modal--pad > .toolbar:last-child{margin-bottom:0}
.modal--pad .det{margin-right:-4px;padding-right:4px}
@media(max-width:640px){.modal--pad{padding:0 16px 16px}.modal--pad .modal__head{margin:0 -16px 14px;padding:14px 16px}}


/* ── Tira de cambio entre plataformas ──────────────────────────────────────
   Socios y congreso son dos aplicaciones distintas, pero para el comité son un
   solo producto: una sesión, dos pestañas. Se ve idéntica en las dos, que es lo
   que hace que no parezcan dos sitios. */
.switchbar { background:#0b2b22; color:#cfe3d9; font-size:13px; }
.switchbar__in { max-width:1460px; margin:0 auto; padding:0 18px;
  display:flex; align-items:center; gap:4px; height:34px; }
.switchbar__org { font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:11px; color:#7fb8a3; margin-right:12px; }
.switchbar__tab { color:#cfe3d9; text-decoration:none; padding:0 14px;
  line-height:34px; border-bottom:2px solid transparent; }
.switchbar__tab:hover { color:#fff; background:rgba(255,255,255,.05); }
.switchbar__tab.is-here { color:#fff; font-weight:600; border-bottom-color:#e6c01f; }


/* La marca compacta que sustituye a la banda verde. Misma idea que en socios:
   identidad a la izquierda de la barra, no un bloque de setenta píxeles. */
.brandmin{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;
  color:var(--ink);text-decoration:none;white-space:nowrap;margin-right:6px}
.brandmin img{width:22px;height:22px;border-radius:6px;flex:none}
.brandmin:hover{color:var(--green)}
/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL ÚNICO ATBC · 2/2 — PREÁMBULO LOCAL DEL CONGRESO
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f7faf8;
  --primary:#0e7c66; --primary-strong:#115e4a; --primary-soft:#ecfdf5;
  --ink-soft:#31423a; --radius:12px; --radius-sm:8px;
}

/* ═══ PARTE COMÚN — desde aquí, idéntica en las dos hojas ═══════════════════ */

:root{
  /* nombres canónicos (existían sólo en socios) */
  --primary:#0e7c66; --primary-strong:#115e4a; --primary-soft:#ecfdf5;
  --ink-soft:#31423a; --radius:12px; --radius-sm:8px;

  /* armazón */
  --shell-w:1460px; --gutter:18px;
  --bar-h:58px;      /* alto exterior de .topbar, borde incluido            */
  --subbar-h:45px;   /* alto exterior de .subbar,  borde incluido           */
  --control-h:38px;

  /* escala tipográfica: ocho pasos, ningún medio píxel salvo --fs-nav */
  --fs-3xl:30px; --fs-2xl:22px; --fs-xl:17px; --fs-lg:15px; --fs-md:14px;
  --fs-sm:13px;  --fs-xs:12px;  --fs-2xs:11px; --fs-nav:12.5px;
  --lh-tight:1.25; --lh-ui:1.5; --lh-read:1.6;
  --w-reg:400; --w-med:600; --w-bold:700; --w-black:800;

  /* rampa de acentos: compartida. La ASIGNACIÓN sección→color es de cada app. */
  --a-home:#0e7c66; --a-reg:#1d6fb8; --a-subs:#0e7c66; --a-program:#8a5cd6;
  --a-pres:#0f8ea3; --a-people:#c2731a; --a-certs:#b04bb8; --a-emails:#2563eb;
  --a-webinars:#d1495b; --a-awards:#c8901a; --a-surveys:#3f7d3f;

  --focus:0 0 0 3px rgba(14,124,102,.15);
  --row-hover:#f6fbf8;
  --th-fill:linear-gradient(#fbfdfc,#f3f8f5);
}

/* ── Cuerpo ───────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); font-size:var(--fs-md); font-weight:var(--w-reg);
  line-height:var(--lh-ui); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(1200px 420px at 15% -8%, #eaf6ef 0%, transparent 60%),
    radial-gradient(1000px 380px at 92% -4%, #fdf6e3 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
button,input,select,textarea{font-family:inherit}

/* ── Carril 0 · tira de plataforma. NO SE TOCA: es el testigo. ─────────────── */
.switchbar__in{max-width:var(--shell-w);padding:0 var(--gutter)}

/* ── Carril 1 · barra de trabajo ──────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar__in,.topbar__inner{max-width:var(--shell-w);margin:0 auto;
  padding:9px var(--gutter);min-height:calc(var(--bar-h) - 1px);
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.spacer{flex:1}

.brandmin,.topbar__brand{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-md);font-weight:var(--w-black);letter-spacing:-.01em;
  line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;
  margin-right:6px;flex:none}
.brandmin img,.topbar__brand img{width:22px;height:22px;border-radius:6px;flex:none}
.brandmin:hover,.topbar__brand:hover{color:var(--primary)}

.tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:3px;
  min-width:0;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm);overflow-x:auto;scrollbar-width:none;margin:0}
.tabs::-webkit-scrollbar{display:none}

.tab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;flex:none;
  border:0;border-radius:999px;background:none;cursor:pointer;
  font-size:var(--fs-nav);font-weight:var(--w-bold);line-height:1.5;
  letter-spacing:0;color:var(--soft);white-space:nowrap;text-decoration:none;
  transition:color .13s,background .13s,box-shadow .13s}
.tab:hover{color:var(--accent,var(--primary));background:transparent}
.tab.on,.tab.is-active{box-shadow:none;color:var(--accent,var(--primary));
  background:var(--primary-soft);
  background:color-mix(in srgb,var(--accent,var(--primary)) 11%,#fff)}
.tab:focus-visible{outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--primary)) 30%,transparent)}
.tab .nico,.tab .tico{width:15px;height:15px;flex:none;opacity:.75;margin:0;
  vertical-align:baseline}
.tab:hover .nico,.tab:hover .tico,
.tab.on .nico,.tab.on .tico,
.tab.is-active .nico,.tab.is-active .tico{opacity:1;color:currentColor}

/* Contador. `.tab > span` está en el selector para no tocar admin.js:222/261. */
.count,.tab > span{display:inline-flex;align-items:center;justify-content:center;
  gap:3px;min-width:18px;margin-left:4px;padding:1px 7px;border-radius:99px;
  font-size:var(--fs-2xs);font-weight:var(--w-bold);line-height:1.45;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--primary-soft);color:var(--primary);
  background:color-mix(in srgb,var(--accent,var(--primary)) 12%,#fff);
  color:var(--accent,var(--primary))}
.count--quiet{background:none;color:var(--muted);padding:1px 0;min-width:0;
  font-weight:var(--w-med)}
.count--alert,.dirty{background:#fdf3dd;color:#8a5a10}
.count--lg{font-size:var(--fs-lg);padding:0;min-width:0;background:none;
  color:var(--accent,var(--primary))}

/* ── Menú de usuario: «Sign out» dentro. FUERA de .tabs, tras el .spacer. ──── */
.usermenu{position:relative;flex:none}
.usermenu > summary{list-style:none;user-select:none;
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;
  border-radius:999px;cursor:pointer;
  font-size:var(--fs-nav);font-weight:var(--w-med);color:var(--soft);
  border:1px solid transparent;transition:background .13s,border-color .13s}
.usermenu > summary::-webkit-details-marker{display:none}
.usermenu > summary::marker{content:""}
.usermenu > summary:hover{background:var(--surface-2)}
.usermenu[open] > summary{background:var(--surface);border-color:var(--line);
  color:var(--ink)}
.usermenu > summary:focus-visible{outline:none;box-shadow:var(--focus)}
.ava{width:24px;height:24px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--primary-soft);color:var(--primary);
  font-size:10px;font-weight:var(--w-black);letter-spacing:.02em}
.usermenu__p{position:absolute;right:0;top:calc(100% + 8px);min-width:222px;
  z-index:40;display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow)}
.usermenu__m{padding:8px 10px 9px;font-size:var(--fs-xs);color:var(--muted);
  border-bottom:1px solid var(--line);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu__p a,.usermenu__p button{display:block;width:100%;text-align:left;
  padding:8px 10px;border:0;background:none;border-radius:8px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--w-med);color:var(--ink-soft);
  text-decoration:none}
.usermenu__p a:hover,.usermenu__p button:hover{background:var(--surface-2);
  color:var(--primary)}
.usermenu__out{color:#b3261e!important}
.usermenu__out:hover{background:#fdeeee!important;color:#b3261e!important}

/* ── Carril 2 · subapartados. SIEMPRE presente: la cabecera mide igual. ────── */
.subbar{position:sticky;top:var(--bar-h);z-index:29;
  background:rgba(255,255,255,.80);
  background:color-mix(in srgb,var(--accent,var(--primary)) 4%,rgba(255,255,255,.80));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.subbar__in{max-width:var(--shell-w);margin:0 auto;padding:0 var(--gutter);
  min-height:calc(var(--subbar-h) - 1px);display:flex;align-items:stretch;
  gap:10px;flex-wrap:nowrap}
.subbar__gap{flex:1 1 auto}
.subbar__in > .btn{align-self:center;flex:none}
.subbar__tabs{display:flex;align-items:stretch;gap:2px;min-width:0;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.subbar__tabs::-webkit-scrollbar{display:none}

.subtab{display:inline-flex;align-items:center;gap:6px;padding:0 12px;flex:none;
  border:0;background:none;cursor:pointer;text-decoration:none;
  font-size:var(--fs-sm);font-weight:var(--w-med);line-height:1.2;
  color:var(--soft);white-space:nowrap;scroll-snap-align:start;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color .13s,background .13s,box-shadow .13s}
.subtab:hover{color:var(--accent,var(--primary));
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent,var(--primary)) 35%,transparent)}
.subtab.is-on,.subtab[aria-current="page"],.subtab[aria-selected="true"]{
  color:var(--accent,var(--primary));font-weight:var(--w-bold);
  background:color-mix(in srgb,var(--accent,var(--primary)) 7%,transparent);
  box-shadow:inset 0 -2px 0 var(--accent,var(--primary))}
.subtab:focus-visible{outline:2px solid
  color-mix(in srgb,var(--accent,var(--primary)) 55%,#fff);
  outline-offset:-3px;border-radius:6px}
.subtab__n{font-size:var(--fs-2xs);font-weight:var(--w-bold);line-height:1;
  margin-left:2px;padding:2px 7px;border-radius:99px;
  font-variant-numeric:tabular-nums;
  color:var(--accent,var(--primary));
  background:color-mix(in srgb,var(--accent,var(--primary)) 12%,#fff)}
.subbar__label{display:inline-flex;align-items:center;padding:0 12px;flex:none;
  font-size:var(--fs-sm);font-weight:var(--w-bold);line-height:1.2;
  color:var(--accent,var(--primary))}

/* ── Nivel 3 · conmutador DENTRO de la página. Filtra, no navega. ──────────── */
.segmented{display:inline-flex;gap:2px;margin:0 0 16px;padding:3px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.segmented > *{padding:5px 11px;border:0;background:none;border-radius:999px;
  font-size:var(--fs-nav);font-weight:var(--w-med);line-height:1.3;
  color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .13s,background .13s}
.segmented > *:hover{color:var(--accent,var(--primary))}
.segmented > .is-on,.segmented > .on{background:#fff;font-weight:var(--w-bold);
  color:var(--accent,var(--primary));box-shadow:var(--shadow-sm)}

/* ── Contenido: mismo ancho que las barras ────────────────────────────────── */
.page,.wrap{max-width:var(--shell-w);margin:0 auto;padding:22px var(--gutter) 80px}
.page--narrow{max-width:760px}
.prose,.lede,.post__body,.det-row dd,.mod__d{font-size:var(--fs-lg);
  line-height:var(--lh-read)}
.prose,.post__body{max-width:72ch}
.lede{color:var(--muted);margin:0 0 18px}

/* ── Estrecho ─────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .topbar__in,.topbar__inner{flex-wrap:wrap}
  .tabs{flex-wrap:wrap;overflow:visible}
  .tab{flex:0 0 auto}
}
@media(max-width:860px){.subbar{position:static}}
@media(max-width:640px){
  .usermenu__n{display:none}
  .subtab,.subbar__label{padding:0 10px}
}

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1{font-size:var(--fs-2xl);font-weight:var(--w-black);letter-spacing:-.02em;
   line-height:var(--lh-tight);margin:0 0 4px}
h2{font-size:var(--fs-xl);font-weight:var(--w-black);letter-spacing:-.01em;
   line-height:1.3;margin:0}
h3,.card__head h2,.card__head h3,.modal__head h3,.sched h3,
.sgroup__title,.row__t,.flag__t{
  font-size:var(--fs-lg);font-weight:var(--w-bold);letter-spacing:0;
  line-height:1.35;margin:0}

/* .section-title = rótulo en VERSALITA (significado del congreso).
   La fila «título + acción» de socios se renombra a .pagehead. */
.section-title,.eyebrow,.stat__l,.stat__label,
.table th,.sub-table th,.att-table thead th,.em-table th,
.frow--head span,.mod__s{
  font-size:var(--fs-2xs);font-weight:var(--w-bold);text-transform:uppercase;
  letter-spacing:.05em;line-height:1.4;color:var(--muted)}
.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.section-title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.pagehead h1,.pagehead h2{margin:0}

.small,.person__meta,.post__head,.post__foot{font-size:var(--fs-sm)}
.meta,.micro,.hint,.field .hint,.row__s,.sgroup__meta,.talkrow__sub,
.att-id,.att-mail,.em-chg,.stat__sub,.det-row dt,.flag__item{
  font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.mono,code,.sub-table .id,.talkrow__num,.em-steps code{
  font-family:var(--mono);font-size:var(--fs-xs)}
code{background:var(--surface-2);padding:1px 6px;border-radius:6px}

/* ── Botón: base NEUTRA, primario explícito ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--control-h);padding:8px 14px;border-radius:9px;
  font:inherit;font-size:var(--fs-sm);font-weight:var(--w-med);line-height:1.25;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .13s,border-color .13s,color .13s,box-shadow .13s}
.btn:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;border-color:var(--accent,var(--primary));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--primary)) 30%,transparent)}
.btn[disabled],.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed;
  box-shadow:none;pointer-events:none;transform:none}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{background:linear-gradient(180deg,#159a7e,#0e7c66);
  border-color:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:linear-gradient(180deg,#0e7c66,#0b6151);
  border-color:var(--primary-strong);color:#fff}
.btn--danger{background:var(--surface);color:#b3261e;border-color:#f3c7c7;
  box-shadow:none}
.btn--danger:hover{background:#fdeeee;border-color:#e79a97;color:#8f1d17}
.btn--sm{min-height:30px;padding:5px 10px;font-size:var(--fs-xs);
  border-radius:8px;gap:5px}
.btn--icon{padding:6px 9px;font-weight:var(--w-bold);gap:0}
.btn--block{display:flex;width:100%}
.btn--ghost{/* alias vacío de la base: 22 plantillas siguen usándolo */}
.btnrow,.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── Campos: una caja, una altura, un anillo ──────────────────────────────── */
.field{margin-bottom:14px}
.fields,.grid2{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
label,.field label,.frow label,.em-tpl label{display:block;
  font-size:var(--fs-xs);font-weight:var(--w-bold);letter-spacing:0;
  color:var(--ink-soft);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=number],input[type=date],input[type=datetime-local],
input[type=search],select,textarea,
.field input,.field select,.field textarea,
.search input,input.search,.select,.login input,.frow .in,
.em-tpl input,.em-tpl textarea,.em-actions input,.notes,.att-notes{
  width:100%;min-height:var(--control-h);height:auto;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:var(--fs-sm);line-height:var(--lh-ui)}
select,.select{padding-right:32px;font-weight:var(--w-med)}
textarea,.notes,.field textarea{min-height:90px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;padding:0;margin:0}
input:focus,select:focus,textarea:focus,.notes:focus,.att-notes:focus{
  outline:none;border-color:var(--primary);box-shadow:var(--focus)}
.hint,.field .hint{display:block;margin-top:4px}
.check,.field-check{display:flex;align-items:center;gap:8px;margin-bottom:0;
  font-size:var(--fs-sm);font-weight:var(--w-med);color:var(--ink-soft)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:150px}
.search{flex:1;min-width:220px;position:relative}
input.search{flex:1;min-width:220px}

/* ── Contenedor único ─────────────────────────────────────────────────────── */
.card,.mod,.stat,.flag,.sgroup,.rows,.em-tpl,.login{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.modal,.em-modal__box{box-shadow:var(--shadow)}
.card__head,.sgroup__head,.flag__head,.modal__head,.em-modal__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 18px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.card__body,.modal__body,.em-tpl,.mod{padding:16px 18px 18px}
.card--accent{position:relative}
.card--accent::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent,var(--primary));opacity:.85}

/* ── Cifras ───────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:22px}
.stat{padding:16px 18px}
.stat__n{font-size:var(--fs-3xl);font-weight:var(--w-black);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--primary)}
.stat:nth-child(6n+2) .stat__n{color:var(--a-reg)}
.stat:nth-child(6n+3) .stat__n{color:var(--a-program)}
.stat:nth-child(6n+4) .stat__n{color:var(--a-pres)}
.stat:nth-child(6n+5) .stat__n{color:var(--a-people)}
.stat:nth-child(6n)   .stat__n{color:var(--a-certs)}
.stat[data-accent] .stat__n{color:var(--accent)}   /* gana sobre la rotación */
.stat__l,.stat__label{margin-top:6px}
.stat__sub{font-size:var(--fs-2xs);color:var(--ink-soft);margin-top:7px;
  line-height:1.4}

/* ── Tablas: el envoltorio pone el marco, la tabla sólo la retícula ───────── */
.table-wrap,.att-table-wrap,.sub-table-wrap,.schedgrid{
  border:1px solid var(--line);border-radius:var(--radius);overflow:auto;
  background:var(--surface);box-shadow:var(--shadow-sm)}
.card > .table-wrap{border:0;border-radius:0;box-shadow:none}
.table,.sub-table,.att-table,.em-table{width:100%;border-collapse:collapse;
  background:var(--surface);border:0;border-radius:0;box-shadow:none;
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.table th,.sub-table th,.att-table thead th,.em-table th{
  background:var(--th-fill);text-align:left;padding:10px 13px;
  white-space:nowrap;border-bottom:1px solid var(--line)}
.table td,.sub-table td,.att-table td,.em-table td{
  padding:10px 13px;line-height:1.45;vertical-align:top;
  border-top:1px solid var(--line);border-bottom:0}
.table tbody tr:first-child td,.sub-table tbody tr:first-child td,
.att-table tbody tr:first-child td,.em-table tbody tr:first-child td{border-top:0}
.table tbody tr:hover,.sub-table tbody tr:hover,
.att-table tbody tr:hover,.em-table tbody tr:hover{background:var(--row-hover)}
.table--sticky thead th,.att-table thead th{position:sticky;top:0;z-index:1;
  border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
.rows .row,.talkrow{padding:10px 16px;border-top:1px solid var(--line)}
.rows .row:first-child,.talkrow:first-child{border-top:0}
.rows .row:hover,.talkrow:hover{background:var(--row-hover)}
.kv,.det-row{display:grid;grid-template-columns:minmax(140px,34%) 1fr;
  gap:0 14px;font-size:var(--fs-sm)}
.kv > *{padding:8px 0;border-bottom:1px solid var(--line)}
.kv > *:nth-last-child(-n+2){border-bottom:0}
.det-row{padding:8px 0;border-bottom:1px solid var(--line)}
.kv dd,.det-row dd{margin:0;white-space:pre-wrap;word-break:break-word}

/* ── Insignias, fichas, barra ─────────────────────────────────────────────── */
.badge,.st{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;
  border-radius:999px;font-size:var(--fs-2xs);font-weight:var(--w-bold);
  letter-spacing:.01em;text-transform:none;line-height:1.5;white-space:nowrap;
  background:var(--primary-soft);color:var(--primary-strong)}
.badge--ok    {background:#e6f7ef;color:#0f6b4d}
.badge--warn  {background:#fdf3dd;color:#8a5a10}
.badge--bad   {background:#fdeaea;color:#a32626}
.badge--info  {background:#e7f2fd;color:#12557f}
.badge--muted {background:#eff3f1;color:#5b6b62}
.badge--accent{background:color-mix(in srgb,var(--accent,var(--primary)) 12%,#fff);
  color:var(--accent,var(--primary))}
/* Versalita: OPT-IN. La única etiqueta que la lleva es el tipo de sesión. */
.badge--type{font-size:10px;font-weight:var(--w-black);text-transform:uppercase;
  letter-spacing:.03em;padding:2px 8px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip,.em-pill,.fchip,.chip--filter{display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;font-size:var(--fs-xs);
  font-weight:var(--w-med);line-height:1.5;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);color:var(--soft)}
a.chip:hover{border-color:var(--line-2);color:var(--accent,var(--primary))}
.chip--filter,.fchip{cursor:pointer;background:var(--surface);transition:.12s}
.chip--filter:hover,.fchip:hover{border-color:var(--line-2);
  color:var(--accent,var(--primary))}
.chip--filter.on,.fchip.on{background:var(--accent,var(--primary));
  border-color:var(--accent,var(--primary));color:#fff}
.chip--filter:focus-visible,.fchip:focus-visible{outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--primary)) 30%,transparent)}
.chip--filter b,.fchip b{font-weight:var(--w-bold);opacity:.7}
.chip--filter.on b,.fchip.on b{opacity:.85}

.bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;
  background:var(--accent,var(--primary));transition:width .2s}
.bar--warn > span{background:#e0532a}

/* ── Vacío y avisos ──────────────────────────────────────────────────────── */
.empty{background:var(--surface);border:1px dashed var(--line-2);
  border-radius:var(--radius);padding:34px 20px;text-align:center;
  color:var(--muted);font-size:var(--fs-md);font-weight:var(--w-reg);
  line-height:var(--lh-ui)}
.empty b,.empty strong{display:block;color:var(--ink-soft);
  font-weight:var(--w-bold);font-size:var(--fs-md);margin-bottom:4px}
.empty .btn{margin-top:14px}
.grid > .empty,.mods > .empty,.stats > .empty{grid-column:1 / -1}
td > .empty,th > .empty{border:0;background:none;border-radius:0;padding:26px 12px}
.rows > .empty,.card > .empty,.card__body > .empty{border:0;background:none;
  border-radius:0}
.empty--error{border-style:solid;border-color:#f3c8c5;background:#fdeceb;
  color:#7f1d1d}

.flash,.notice,.em-safe,.bulkbar{border-radius:var(--radius-sm);padding:10px 14px;
  font-size:var(--fs-sm);line-height:var(--lh-ui);border:1px solid transparent}
.flash{margin-bottom:14px}
.flash--success{background:#e6f4ea;color:#14532d;border-color:#bfe3cb}
.flash--error  {background:#fdeceb;color:#7f1d1d;border-color:#f3c8c5}
.flash--info   {background:var(--primary-soft);color:var(--primary-strong);
  border-color:#c9e2d9}
.notice        {background:#fdf7ec;color:#7a5a17;border-color:#f0dfbd}
.bulkbar{position:sticky;top:calc(var(--bar-h) + var(--subbar-h));z-index:6}

/* ── Cableado del acento: se declara en el ANTEPASADO, no en el enlace ────── */
[data-nav="home"],  [data-section="home"]  ,[data-group="home"]    {--accent:var(--a-home)}
[data-nav="dir"],   [data-section="dir"]   ,[data-group="reg"]     {--accent:var(--a-reg)}
[data-nav="groups"],[data-section="groups"],[data-group="program"] {--accent:var(--a-program)}
[data-nav="events"],[data-section="events"],[data-group="pres"]    {--accent:var(--a-pres)}
[data-nav="jobs"],  [data-section="jobs"]  ,[data-group="people"]  {--accent:var(--a-people)}
[data-nav="mentor"],[data-section="mentor"],[data-group="certs"]   {--accent:var(--a-certs)}
[data-nav="member"],[data-section="member"],[data-group="awards"]  {--accent:var(--a-awards)}
[data-nav="admin"], [data-section="admin"] ,[data-group="webinars"]{--accent:var(--a-webinars)}
[data-section="account"]{--accent:var(--a-home)}
[data-group="subs"]{--accent:var(--a-subs)}
[data-group="emails"]{--accent:var(--a-emails)}
[data-group="surveys"]{--accent:var(--a-surveys)}
/* ═══ FIN DE LA PARTE COMÚN ════════════════════════════════════════════════ */ ` hasta `/* ═══ FIN DE LA PARTE COMÚN */`.
    NO se edita al copiarla. Si hay que cambiar algo, se cambia en las dos.      */

/* ═══ EPÍLOGO LOCAL DEL CONGRESO ═══════════════════════════════════════════
   La parte común da a `.badge` y a `.st` un tinte por defecto, y en admin.css
   los tintes `.b-*` (líneas 91-93) y `.st--*` (403-407) están ANTES. Hay que
   redeclararlos aquí o el tinte base los tapa. Esto NO va en app.css.         */
.b-symposium{color:#0e7c66;background:#0e7c6622}
.b-oral     {color:#2563eb;background:#2563eb1e}
.b-poster   {color:#d97706;background:#d977061f}
.b-ofs      {color:#7c3aed;background:#7c3aed1e}
.b-workshop {color:#db2777;background:#db27771e}
.b-course   {color:#0891b2;background:#0891b21e}
.st--New              {background:#e7f2fd;color:#12557f}
.st--Under,.st--Under\.review{background:#fdf3dd;color:#8a5a10}
.st--Accepted         {background:#e6f7ef;color:#0f6b4d}
.st--Rejected         {background:#fdeaea;color:#a32626}
.st--Withdrawn        {background:#eff3f1;color:#5b6b62}

/* La rejilla horaria es una hoja de cálculo, no una lista: se queda densa.
   Lo único que cambia es el azul de Excel, que no está en ninguna paleta. */
.schedgrid thead th{background:var(--primary-strong)}
.schedgrid table{font-size:var(--fs-xs)}
/* Selector de estado en línea dentro de la tabla de asistentes: sigue compacto. */
.att-table .select.att-status{min-height:0;padding:4px 8px;font-size:var(--fs-xs)}
.att-notes{min-height:0;padding:5px 8px;font-size:var(--fs-xs)}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  SISTEMA VISUAL ATBC — capa canónica                                      ║
   ║  IDÉNTICA en app.css y en admin.css. Si divergen, hay un error.           ║
   ╚═══════════════════════════════════════════════════════════════════════════╝

   Sale del preview de ATBC Connect, que ya era un sistema entero y mejor que lo
   que teníamos: antetítulos en cursiva editorial, iconos en las cabeceras, y
   una tríada de colores de categoría validada para daltonismo — todos los pares
   con ΔE ≥ 12.8 y contraste ≥ 3:1 sobre las dos superficies.

   Dos reglas que vienen con él y conviene respetar:
     · los colores de estado (musgo, ámbar, ladrillo) SIEMPRE acompañados de un
       icono, nunca el color solo, porque el color solo no lo ve todo el mundo;
     · los tres colores de categoría van en orden fijo, no rotando.

   El tema claro es el de serie. El oscuro es una ELECCIÓN, con el interruptor
   de la tira superior: se quitó a propósito el bloque que lo activaba según el
   sistema operativo, porque hacía que dos personas del comité vieran la
   plataforma distinta sin haberlo pedido.

   Las tipografías no salen a la red: Inter ya la sirven las dos aplicaciones
   desde su propio servidor, y la serif y la monoespaciada son del sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #f4f6f3;
  --surface:    #ffffff;
  --surface-2:  #eef2ee;
  --line:       #dde4de;
  --line-soft:  #e8eee9;
  --ink:        #16211d;
  --ink-2:      #41544c;
  --ink-3:      #75877f;
  --accent:     #0e6b62;
  --accent-ink: #0a4a44;
  --accent-wash:#e2efec;
  --on-accent:  #ffffff;
  --ribbon-bg:  #0a4a44;
  --ribbon-ink: #dcece8;
  --moss:       #4a7c3f;
  --moss-wash:  #e8f1e4;
  --amber:      #a8760f;
  --amber-wash: #f7eed8;
  --brick:      #a8382c;
  --brick-wash: #f8e6e3;
  /* categorical slots — fixed order, never cycled */
  --cat-1:      #009b8b;
  --cat-2:      #c2571f;
  --cat-3:      #5b4bb5;
  --cat-1-wash: #e0f2ef;
  --cat-2-wash: #f9e9df;
  --cat-3-wash: #eae7f7;
  --shadow:     0 1px 2px rgba(16,33,29,.05), 0 8px 24px rgba(16,33,29,.055);
  --shadow-sm:  0 1px 2px rgba(16,33,29,.06);
  --shadow-lift:0 2px 4px rgba(16,33,29,.06), 0 14px 32px rgba(16,33,29,.09);
  --r:          11px;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ed: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --paper:      #0f1614;
  --surface:    #171f1c;
  --surface-2:  #1e2724;
  --line:       #2a3531;
  --line-soft:  #222c29;
  --ink:        #e7ede9;
  --ink-2:      #a9b8b1;
  --ink-3:      #7d8e87;
  --accent:     #4fb3a3;
  --accent-ink: #8fd6c9;
  --accent-wash:#152c29;
  --on-accent:  #06211e;
  --ribbon-bg:  #101d1b;
  --ribbon-ink: #9fbdb6;
  --moss:       #86bd6f;
  --moss-wash:  #1a2718;
  --amber:      #d9a53f;
  --amber-wash: #2b2311;
  --brick:      #e08a7d;
  --brick-wash: #2e1a17;
  --cat-1:      #14a191;
  --cat-2:      #d0692f;
  --cat-3:      #7d6fd8;
  --cat-1-wash: #102b28;
  --cat-2-wash: #2c1a11;
  --cat-3-wash: #1e1b33;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.32);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 16px 36px rgba(0,0,0,.4);
}

/* ── Puente con los nombres antiguos ───────────────────────────────────────
   Las dos aplicaciones tienen cientos de reglas que nombran las fichas viejas.
   En vez de reescribirlas una por una —y equivocarse en alguna—, las viejas
   pasan a APUNTAR a las nuevas. Así el sistema entra de golpe y lo que había
   sigue funcionando. */
:root {
  --bg: var(--paper);
  --ink-soft: var(--ink-2);
  --soft: var(--ink-2);
  --muted: var(--ink-3);
  --primary: var(--accent);
  --primary-strong: var(--accent-ink);
  --primary-soft: var(--accent-wash);
  --green: var(--accent);
  --green-d: var(--accent-ink);
  --green-soft: var(--accent-wash);
  --line-2: var(--line);
  --radius: var(--r);
  --radius-sm: 8px;
  --r-sm: 8px;
  --red: var(--brick);
  --amber-ui: var(--amber);
  --font: var(--ui);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; letter-spacing: -.018em; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* ── icons ───────────────────────────────────────────────── */
.ic { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: 14px; height: 14px; stroke-width: 1.8; }
.ic--lg { width: 22px; height: 22px; stroke-width: 1.5; }
.ic--xl { width: 34px; height: 34px; stroke-width: 1.3; }

/* ── demo ribbon ─────────────────────────────────────────── */
.ribbon {
  background: var(--ribbon-bg); color: var(--ribbon-ink);
  padding: 9px 22px; font-size: 12.5px;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; text-align: center;
}
.ribbon b { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px;
            border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; opacity: .85; }
.ribbon span { opacity: .85; }

/* ── app chrome ──────────────────────────────────────────── */
.chrome { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.chrome__in { max-width: 1160px; margin: 0 auto; padding: 10px 22px;
              display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; font-size: 16px; }
.brand__mark {
  width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--cat-1)); color: var(--on-accent);
}
.brand__mark .ic { width: 16px; height: 16px; stroke-width: 1.8; }
nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
nav.tabs button {
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease, color .14s ease;
}
nav.tabs button .ic { opacity: .72; }
nav.tabs button:hover { background: var(--surface-2); color: var(--ink); }
nav.tabs button[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
nav.tabs button[aria-current="page"] .ic { opacity: 1; }
.whoami { display: flex; align-items: center; gap: 7px; padding-left: 13px;
          border-left: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }

/* ── layout ──────────────────────────────────────────────── */
main { max-width: 1160px; margin: 0 auto; padding: 26px 22px 80px; }
.head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.head__ic {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
}
.eyebrow { font-family: var(--ed); font-style: italic; font-size: 15px; color: var(--ink-3); display: block; margin-bottom: 1px; }
.head h1 { font-size: 27px; }
.head p { color: var(--ink-2); font-size: 14px; max-width: 64ch; margin-top: 5px; }

.split { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 18px; align-items: start; }
.cols { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(285px,1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(242px,1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(172px,1fr)); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
        box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.card--hover:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card__head { padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
              display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__head h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em;
                 color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.card__head h3 .ic { color: var(--accent); }
.card__body { padding: 16px; }
.stack { display: grid; gap: 12px; }
.rule { height: 3px; }

/* ── stats ───────────────────────────────────────────────── */
.stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r);
        padding: 12px 14px; box-shadow: var(--shadow-sm); display: flex; gap: 11px; align-items: flex-start; }
.stat__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
            background: var(--accent-wash); color: var(--accent); }
.stat__n { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat__l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-top: 1px; }
.stat--flag .stat__ic { background: var(--amber-wash); color: var(--amber); }
.stat--flag .stat__n { color: var(--amber); }

/* ── pills / chips ───────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
        letter-spacing: .015em; padding: 2px 9px 2px 7px; border-radius: 999px;
        background: var(--surface-2); color: var(--ink-2); }
.pill .ic { width: 12px; height: 12px; stroke-width: 2; }
.pill--ok   { background: var(--moss-wash);  color: var(--moss); }
.pill--warn { background: var(--amber-wash); color: var(--amber); }
.pill--bad  { background: var(--brick-wash); color: var(--brick); }
.pill--acc  { background: var(--accent-wash); color: var(--accent-ink); }
.pill--c1 { background: var(--cat-1-wash); color: var(--cat-1); }
.pill--c2 { background: var(--cat-2-wash); color: var(--cat-2); }
.pill--c3 { background: var(--cat-3-wash); color: var(--cat-3); }
.chip { font-size: 12px; background: var(--surface-2); color: var(--ink-2);
        padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-soft); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.flag { font-size: 14px; line-height: 1; }

/* ── buttons ─────────────────────────────────────────────── */
.btn { border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
       border-radius: 8px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer;
       display: inline-flex; align-items: center; gap: 6px; transition: filter .14s ease, background .14s ease; }
.btn:hover { filter: brightness(1.09); }
.btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); filter: none; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .45; cursor: default; filter: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── forms ───────────────────────────────────────────────── */
label.f { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
input[type=search], input[type=text], select {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.search { position: relative; }
.search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search input { padding-left: 32px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters > div { min-width: 150px; flex: 1 1 150px; }

/* ── people ──────────────────────────────────────────────── */
.person { display: flex; gap: 11px; align-items: flex-start; }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
      font-size: 12.5px; font-weight: 600; font-family: var(--mono); letter-spacing: -.02em;
      background: var(--accent-wash); color: var(--accent-ink); }
.av--c1 { background: var(--cat-1-wash); color: var(--cat-1); }
.av--c2 { background: var(--cat-2-wash); color: var(--cat-2); }
.av--c3 { background: var(--cat-3-wash); color: var(--cat-3); }
.person__n { font-weight: 600; font-size: 14.5px; }
.person__m { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sci { font-family: var(--ed); font-style: italic; color: var(--ink-2); }

/* ── tables ──────────────────────────────────────────────── */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── charts ──────────────────────────────────────────────── */
.chart { display: grid; gap: 9px; }
.chart__row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12.5px; }
.chart__row b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.track { grid-column: 1 / -1; height: 9px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.track > i { display: block; height: 100%; background: var(--accent);
             border-radius: 0 4px 4px 0; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.track > i.is-full { background: var(--amber); }
.stackbar { display: flex; gap: 2px; height: 15px; border-radius: 4px; overflow: hidden; }
.stackbar > i { display: block; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }

/* ── misc ────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.post { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.post:last-child { border-bottom: 0; }
.post__m { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.post__b { margin-top: 6px; font-size: 14px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line);
       border-radius: 9px; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.opt:hover { border-color: var(--accent); background: var(--accent-wash); }
.opt input { margin-top: 3px; accent-color: var(--accent); }
.opt--on { border-color: var(--accent); background: var(--accent-wash); }
.empty { padding: 34px 16px; text-align: center; color: var(--ink-3); font-size: 13.5px; display: grid; gap: 8px; justify-items: center; }
.empty .ic { color: var(--ink-3); opacity: .6; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
         background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 999px;
         font-size: 13px; box-shadow: var(--shadow); z-index: 60; opacity: 0; pointer-events: none;
         display: flex; align-items: center; gap: 7px;
         transition: opacity .2s ease, transform .2s ease; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }
footer { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 18px; font-size: 12.5px; color: var(--ink-3); }
footer code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

.fade > * { animation: rise .32s cubic-bezier(.2,.7,.3,1) backwards; }
.fade > *:nth-child(2) { animation-delay: .05s; }
.fade > *:nth-child(3) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, .fade > * { animation: none !important; transition: none !important; }
}
/* ═══ FIN DEL SISTEMA VISUAL ATBC ═══════════════════════════════════════════ */

/* ── Interruptor de tema, en la tira compartida ────────────────────────────
   Idéntico en las dos áreas. La preferencia se guarda en el navegador y, como
   las dos cuelgan del mismo dominio, elegir una vez vale para ambas.

   El botón lleva los dos iconos dibujados y se enseña sólo uno: el del sitio
   AL QUE VAS, no el que estás viendo. De día se ve la luna. */
.switchbar__tema{flex:none;margin-left:10px;display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;
  background:rgba(255,255,255,.10);color:#cfe3d9;cursor:pointer;
  transition:background .13s,color .13s}
.switchbar__tema:hover{background:rgba(255,255,255,.20);color:#fff}
.switchbar__tema svg{width:15px;height:15px;display:block}
.switchbar__tema .ic-sol{display:none}
:root[data-theme="dark"] .switchbar__tema .ic-luna{display:none}
:root[data-theme="dark"] .switchbar__tema .ic-sol{display:block}

/* El nombre empuja: es lo que separa las pestañas (izquierda) de lo personal
   (derecha). No estaba escrito en ninguna de las dos hojas, así que la tira se
   apelotonaba a la izquierda. */
.switchbar__who{margin-left:auto;color:#9dc4b4;font-size:12px;
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* El plan de «pasar al programa». Es más ancho que un diálogo normal porque
   lleva una tabla de charlas: leerla a 640 px obliga a cortar los títulos, que
   es justo lo que hay que poder comprobar antes de aceptar. */
.modal--wide{max-width:900px}
.fs-list{margin:6px 0 16px;padding-left:20px;line-height:1.65}
.fs-list code{font-family:var(--mono);font-size:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.fs-warn li{color:var(--warn-ink,#8a5a00)}
#fs-body h4{margin:18px 0 6px;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
#fs-body .stats{margin-bottom:14px}


/* Selector de conferencia. Va pegado a la marca y enseña sólo el año: el
   nombre completo ya está al lado, y repetirlo haría la barra más ancha por
   una información que no cambia al desplegar. */
.edpick{position:relative}
.edpick summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:4px;padding:3px 8px 3px 9px;margin-left:-2px;border:1px solid var(--line);
  border-radius:99px;font-size:12px;font-weight:var(--w-bold);color:var(--muted);
  background:var(--bg);user-select:none}
.edpick summary::-webkit-details-marker{display:none}
.edpick summary:hover{color:var(--ink);border-color:var(--muted)}
.edpick__y{letter-spacing:.02em}
.edpick__p{position:absolute;top:calc(100% + 7px);left:0;z-index:60;min-width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px}
.edpick__h{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--soft);font-weight:var(--w-bold);padding:7px 10px 5px}
.edpick__i{display:block;width:100%;text-align:left;position:relative;
  padding:8px 28px 8px 10px;border:0;border-radius:9px;background:none;
  cursor:pointer;font:inherit;color:var(--ink)}
.edpick__i:hover{background:var(--bg)}
.edpick__i b{display:block;font-size:13px}
.edpick__i span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.edpick__i i{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-style:normal;color:var(--green)}
.edpick__i.is-on b{color:var(--green)}
.edpick__new{display:block;width:100%;text-align:left;margin-top:4px;padding:9px 10px;
  border:0;border-top:1px solid var(--line);border-radius:0 0 9px 9px;background:none;
  cursor:pointer;font:inherit;font-size:12px;font-weight:var(--w-bold);color:var(--green)}
.edpick__new:hover{background:var(--bg)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}


/* En el monitoreo, la fila de una sesión que no ha atraído ni un resumen. Se
   marca con una barra al canto y no con fondo rojo: no es un error, es algo que
   mirar — y la tabla se lee entera de un vistazo si sólo destaca lo que importa. */
.table tr.sin > td:first-child{box-shadow:inset 3px 0 0 var(--warn-ink)}
.table tr.sin td{color:var(--muted)}


/* Las banderas de una fase. Van arriba del módulo, antes de la vista, porque
   son lo que hay que ver ANTES de ponerse a trabajar — no una nota al pie. El
   panel no se dibuja si no hay nada: un recuadro vacío permanente se vuelve
   invisible a las dos semanas, y ese día tampoco se ve el que sí trae algo. */
.flags-panel{background:var(--warn-bg);border:1px solid var(--warn-ink);
  border-radius:14px;padding:12px 14px;margin:0 0 16px}
.flags-panel__h{font-size:12px;font-weight:var(--w-bold);color:var(--warn-ink);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.flag{display:flex;gap:10px;align-items:flex-start;padding:7px 0;
  border-top:1px solid rgba(0,0,0,.06);font-size:13px;line-height:1.5}
.flag:first-of-type{border-top:0}
.flag__ok{flex:none;width:24px;height:24px;border-radius:7px;border:1px solid var(--warn-ink);
  background:transparent;color:var(--warn-ink);cursor:pointer;font:inherit;line-height:1}
.flag__ok:hover{background:var(--warn-ink);color:var(--warn-bg)}
.flag .meta{font-size:11px;margin-top:2px}


/* Sugerencias del directorio. Cuelgan del campo y no flotan encima: un menú
   flotante dentro de un diálogo acaba tapado por su propio borde, y aquí hay
   sitio de sobra debajo. */
.sug{margin:-8px 0 14px}
.sug__i{display:block;width:100%;text-align:left;padding:8px 10px;border:0;
  border-radius:9px;background:none;cursor:pointer;font:inherit;color:var(--ink)}
.sug__i:hover{background:var(--bg)}
.sug__i b{display:block;font-size:13px}
.sug__i span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.sug__no{padding:6px 10px;font-size:11px;color:var(--muted)}


/* Los dos botones de factura, juntos y sin envolverse. */
.sub-table td.fac{white-space:nowrap}
.sub-table td.fac .btn{margin-right:5px}

/* El historial de un envío: denso y legible, no una tabla. Son líneas cortas
   en orden y lo que importa es la secuencia, no comparar columnas. */
.hist{border-left:2px solid var(--line);padding-left:12px;margin:0 0 6px}
.hist__i{font-size:12.5px;line-height:1.6;padding:2px 0}
.hist__w{display:inline-block;min-width:112px;color:var(--soft);font-family:var(--mono);font-size:11px}

/* Los dos formatos, juntos y visiblemente emparejados: son la misma cosa en
   dos formas, no dos acciones distintas. */
.exp{display:inline-flex;gap:4px;margin-left:2px}
.exp .btn{border-radius:9px}
.exp .btn:first-child{border-top-right-radius:4px;border-bottom-right-radius:4px}
.exp .btn:last-child{border-top-left-radius:4px;border-bottom-left-radius:4px}

/* ── Última palabra ────────────────────────────────────────────────────────
   Las dos hojas llevan dos sistemas de botones superpuestos: el que se escribió
   al unificar (base neutra + `.btn--primary` marcado) y el de la maqueta que
   se adoptó después (`.btn` lleno, `.btn--ghost` neutro). El segundo es el que
   quiso el encargo, y como llega más tarde ya gana en la cascada — pero dejaba
   a `.btn--primary` sin efecto, y hay plantillas que lo usan. Aquí se cierra:
   `.btn` y `.btn--primary` son lo mismo, `.btn--ghost` es el neutro.

   Va al final de las dos hojas y es idéntico en ambas. Si alguien añade reglas
   después de este bloque, que sea también en las dos. */
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn--primary:hover{background:var(--accent);filter:brightness(1.09)}
.btn svg{width:15px;height:15px;flex:none}
.btn--icon{padding:6px 9px;gap:0}
.btn--block{display:flex;width:100%;justify-content:center}
.btn:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,#fff);
  outline-offset:2px}
.btn--danger{background:var(--surface);color:#b3261e;border-color:#f3c7c7}
.btn--danger:hover{background:#fdeeee;border-color:#e79a97;color:#8f1d17;filter:none}

/* La marca: un .svg servido aparte no ve las variables de la página, así que va
   en línea y toma el verde de la hoja. En modo noche cambia con todo lo demás. */
.bmark{width:22px;height:22px;border-radius:6px;flex:none;display:block}

/* ── De noche ──────────────────────────────────────────────────────────────
   El armazón se escribió con blancos literales —`rgba(255,255,255,.9)` en las
   barras, `#fff` como base de cada `color-mix`— porque nació en modo día. Con
   el interruptor puesto eso deja dos barras claras flotando sobre una página
   oscura y texto claro encima, ilegible. Aquí esos blancos pasan a ser fichas,
   y la ficha cambia con el tema.

   Va al final y es idéntico en las dos hojas. */
:root{
  color-scheme:light;
  --glass:rgba(255,255,255,.90);   /* barra de trabajo                        */
  --glass-2:rgba(255,255,255,.72); /* píldora de secciones                    */
  --glass-3:rgba(255,255,255,.80); /* barra de subapartados                   */
  --mix:#fff;                      /* base de los color-mix de realce         */
  --warn-bg:#fdf3dd; --warn-ink:#8a5a10;
  --bad-bg:#fdeeee;  --bad-line:#e79a97; --bad-ink:#8f1d17;
  --red-bad:#b3261e;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --glass:rgba(20,30,27,.90);
  --glass-2:rgba(28,40,36,.72);
  --glass-3:rgba(20,30,27,.80);
  --mix:#101a17;
  --warn-bg:#3a2f14; --warn-ink:#e8c98a;
  --bad-bg:#3a1d1c;  --bad-line:#7a3a37; --bad-ink:#f0b4b0;
}

.topbar{background:var(--glass)}
.tabs{background:var(--glass-2)}
.tab.on,.tab.is-active{
  background:color-mix(in srgb,var(--accent,var(--primary)) 11%,var(--mix))}
.subbar{background:color-mix(in srgb,var(--accent,var(--primary)) 4%,var(--glass-3))}
.count,.tab > span,.subtab__n,.badge--accent{
  background:color-mix(in srgb,var(--accent,var(--primary)) 12%,var(--mix))}
.count--quiet{background:none}
.count--alert,.dirty,.badge--warn{background:var(--warn-bg);color:var(--warn-ink)}
.segmented > .is-on,.segmented > .on{background:var(--surface)}
.btn--danger{background:var(--surface);color:var(--red-bad);border-color:var(--bad-line)}
.btn--danger:hover{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.usermenu__out{color:var(--red-bad)!important}
.usermenu__out:hover{background:var(--bad-bg)!important;color:var(--bad-ink)!important}
.subtab:focus-visible{outline-color:color-mix(in srgb,var(--accent,var(--primary)) 55%,var(--mix))}
.btn:focus-visible{outline-color:color-mix(in srgb,var(--accent) 55%,var(--mix))}

/* El bloque de título de página apila rótulo y entradilla y empuja las acciones
   al otro extremo. Sin esto, una entradilla suelta dentro de .pagehead se iba
   al lado derecho como si fuera un botón. */
.pagehead > div{min-width:0}
.pagehead .lede{margin:4px 0 0}
/* El rótulo de sección y sus subapartados no son la misma cosa: una raya los
   separa para que «Admin» no se lea como una pestaña más. */
.subbar__label + .subbar__tabs{border-left:1px solid var(--line);padding-left:10px}

/* ── Nivel 3, nombre heredado ──────────────────────────────────────────────
   El área del congreso llama `.subtabs` al conmutador que va DENTRO de una
   vista —«Final / Presentations / Previous», «Oral / Symposia / OFS»— en siete
   sitios de admin.js. No navega: filtra. Es exactamente `.segmented`, así que
   se le da el mismo aspecto en vez de renombrarlo en siete sitios y arriesgar
   uno. Socios no usa esta clase; el bloque es inofensivo allí y las dos hojas
   siguen siendo la misma. */
.subtabs{display:inline-flex;gap:2px;margin:0 0 16px;padding:3px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.subtabs > *{padding:5px 11px;border:0;background:none;border-radius:999px;
  font-size:var(--fs-nav);font-weight:var(--w-med);line-height:1.3;
  color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:none;transition:color .13s,background .13s}
.subtabs > *:hover{color:var(--accent,var(--primary));background:none}
.subtabs > .on,.subtabs > .is-on{background:var(--surface);font-weight:var(--w-bold);
  color:var(--accent,var(--primary));box-shadow:var(--shadow-sm)}
.subtabs > * > span{margin-left:5px;opacity:.7;font-weight:var(--w-med)}

/* El disco de iniciales y el nombre, en el menú de usuario de las dos áreas. */
.usermenu__n{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Anchura y carriles ────────────────────────────────────────────────────
   Tres correcciones que van juntas porque son el mismo problema: el armazón
   estaba pensado para una ventana de 1460 px y en una pantalla de verdad
   quedaba un menú apretado en el centro y una segunda fila pegada al borde
   izquierdo, sin relación visible con el contenido.

   1. La anchura deja de ser un número fijo y pasa a ser un techo: usa lo que
      haya, hasta 1680. Con eso los diez módulos caben en una línea y ya no hay
      que deslizar la píldora hacia la derecha para llegar a Awards.
   2. La píldora, cuando no quepa, PARTE EN DOS FILAS en vez de esconder la
      cola detrás de un desplazamiento horizontal. Un menú que se oculta a sí
      mismo no es un menú.
   3. La fila de subapartados se alinea con el contenido y crece: era la única
      barra sin `margin:0 auto`, y por eso salía a ras del borde y diminuta. */
:root{--shell-w:min(1680px,100% - 36px); --gutter:20px; --subbar-h:48px}

.tabs{flex-wrap:wrap;overflow:visible;row-gap:3px}
.tabs::-webkit-scrollbar{display:none}

/* Al partirse la píldora, la barra crece; un desplazamiento fijo calculado
   sobre `--bar-h` dejaría la segunda fila montada encima. Se queda quieta. */
.subbar{position:static}
.bulkbar{top:0}

.subtab{font-size:var(--fs-md);padding:0 14px}
.subbar__label{font-size:var(--fs-md)}
.subtabs > *{font-size:var(--fs-md)}

/* Un enlace escrito dentro de una frase, que no es un botón: lleva a otra
   pestaña sin parecer una acción. */
.lnk{border:0;background:none;padding:0;font:inherit;cursor:pointer;
  color:var(--accent,var(--primary));font-weight:var(--w-bold);
  text-decoration:underline;text-underline-offset:2px}
.lnk:hover{text-decoration-thickness:2px}

/* Una raya antes del cambio de vista: separa «lo mío» —perfil, cuota— de «con
   qué ojos miro», que es otra cosa. */
.usermenu__sep{margin-top:4px;padding-top:9px!important;
  border-top:1px solid var(--line)}

/* ── Formularios y sondeos ─────────────────────────────────────────────────
   Idéntico en las dos hojas, como todo lo demás: el constructor vive en socios
   pero las fichas, los botones y los estados son del sistema común, y si aquí
   divergieran volveríamos a tener dos diseños. */

/* Las pantallas públicas: sin barras, sólo la marca. Quien responde una
   convocatoria puede no tener cuenta. */
.solo__head{border-bottom:1px solid var(--line);background:var(--surface)}
.solo__in{max-width:760px;margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;gap:11px}
.solo__org{font-weight:var(--w-black);font-size:var(--fs-md);letter-spacing:.02em;color:var(--ink)}
.solo__sub{font-size:var(--fs-xs);color:var(--muted)}
.solo__foot{max-width:760px;margin:0 auto;padding:0 var(--gutter) 48px;
  font-size:var(--fs-xs);color:var(--muted);text-align:center}
.ic-ok{width:46px;height:46px;margin:0 auto;border-radius:50%;display:grid;
  place-items:center;font-size:24px;background:var(--primary-soft);color:var(--primary)}

/* El título del formulario se edita en su sitio, no en un cuadro aparte. */
.titulo{width:100%;border:0;border-bottom:2px solid transparent;background:none;
  padding:2px 0;font:inherit;font-size:var(--fs-3xl);font-weight:var(--w-black);
  letter-spacing:-.02em;color:var(--ink)}
.titulo:focus,.lede--edit:focus{outline:none;border-bottom-color:var(--accent,var(--primary))}
.lede--edit{width:100%;border:0;border-bottom:1px solid transparent;background:none;
  padding:4px 0;font:inherit;color:var(--muted)}

.enlace{margin:0 0 18px}
.enlace__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.enlace__row code{font-family:var(--mono);font-size:var(--fs-xs);
  padding:5px 9px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--line);overflow-wrap:anywhere}

.split--build{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;align-items:start}
@media(max-width:1000px){.split--build{grid-template-columns:1fr}}

/* Una pregunta */
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.q.is-drag{opacity:.45}
.q--head{background:var(--surface-2)}
.q__bar{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:1px solid var(--line-soft)}
.q__grip{cursor:grab;color:var(--muted);user-select:none}
.q__t{font-size:var(--fs-2xs);font-weight:var(--w-bold);text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.q__x{border:0;background:none;cursor:pointer;color:var(--muted);
  padding:3px 6px;border-radius:6px;font-size:13px;line-height:1}
.q__x:hover{background:var(--surface-2);color:var(--ink)}
.q__x--del:hover{background:var(--bad-bg);color:var(--red-bad)}
.q__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.q__label{width:100%;border:0;border-bottom:1px solid var(--line);background:none;
  padding:4px 0;font:inherit;font-size:var(--fs-lg);font-weight:var(--w-med);color:var(--ink)}
.q__label:focus{outline:none;border-bottom-color:var(--accent,var(--primary))}
.q__row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.q__row > *{min-width:0}
.q__opts textarea{width:100%;font-family:var(--mono);font-size:var(--fs-xs)}
.q__adv > summary{cursor:pointer;font-size:var(--fs-xs);color:var(--muted);
  list-style:none;padding:2px 0}
.q__adv > summary::-webkit-details-marker{display:none}
.q__adv > summary::before{content:"▸ ";color:var(--muted)}
.q__adv[open] > summary::before{content:"▾ "}
.q__advin{display:flex;flex-direction:column;gap:9px;margin-top:9px;padding-top:11px;
  border-top:1px dashed var(--line)}
.q__cond{padding-top:9px;border-top:1px dashed var(--line)}
.fld{display:flex;flex-direction:column;gap:3px;flex:1}
.fld > span{font-size:var(--fs-2xs);font-weight:var(--w-bold);text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}

/* Añadir pregunta: se enseña lo que hace cada tipo, no sólo su nombre. */
.add__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:8px;margin-top:9px}
.add__b{text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.add__b:hover{border-color:var(--accent,var(--primary));background:var(--primary-soft)}
.add__b b{font-size:var(--fs-sm);color:var(--ink)}
.add__b span{font-size:var(--fs-2xs);color:var(--muted);line-height:1.35}

/* Opciones y escalas, en el formulario público */
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:var(--fs-md);color:var(--ink-soft)}
.scale{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.scale__n{position:relative;cursor:pointer}
.scale__n input{position:absolute;opacity:0;inset:0}
.scale__n span{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  font-weight:var(--w-bold);color:var(--ink-soft)}
.scale__n input:checked + span{background:var(--accent,var(--primary));
  border-color:transparent;color:#fff}
.scale__ends{flex:1 0 100%;display:flex;justify-content:space-between;
  font-size:var(--fs-2xs);color:var(--muted)}
.req{color:var(--red-bad)}
.err{margin:5px 0 0;font-size:var(--fs-xs);color:var(--red-bad)}
.has-error input,.has-error textarea,.has-error select{border-color:var(--bad-line)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Estado de una convocatoria */
.st--draft {background:var(--surface-2);color:var(--muted)}
.st--open  {background:var(--primary-soft);color:var(--primary)}
.st--closed{background:var(--warn-bg);color:var(--warn-ink)}
.st--draft,.st--open,.st--closed{display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:var(--fs-2xs);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.04em}

/* `[hidden]` es una regla del navegador con `display:none`, y cualquier clase
   nuestra que declare su propio `display` la gana. `.field` lo declara, así que
   una pregunta condicionada se marcaba como oculta y se seguía viendo. Aquí se
   le devuelve la última palabra: si algo está oculto, está oculto. */
[hidden]{display:none!important}

/* ── Avisos y vista previa de correo ───────────────────────────────────────
   Un aviso de la secretaría, fijado arriba del muro. El «important» no grita
   con rojo —eso está reservado a los errores— sino con un ámbar que se lee
   como «atención» y no como «algo ha fallado». */
.aviso{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:13px 16px;
  border:1px solid var(--line);border-left:3px solid var(--accent,var(--primary));
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
.aviso--important{border-left-color:var(--warn-ink);background:var(--warn-bg)}
.aviso--important b{color:var(--warn-ink)}
.aviso > div{flex:1;min-width:0}
.aviso__b{margin-top:3px;font-size:var(--fs-sm);color:var(--ink-soft)}

/* El correo se enseña tal cual saldrá, con sus estilos en línea, sobre blanco
   incluso de noche: así se ve la bandeja de quien lo recibe y no la nuestra. */
.correo-vista{background:#fff;border-radius:9px;padding:8px 14px 14px;
  color:#16211d;max-height:640px;overflow:auto}
.correo-vista a{color:#0e6b62}

/* ── Editor de correo ──────────────────────────────────────────────────────
   Tres columnas: qué puedes poner, el correo, y lo que hace el bloque elegido.
   Es la forma de las herramientas de campañas de siempre, con la diferencia de
   que el centro enseña el correo y no una lista de campos. */
.mailer{display:grid;grid-template-columns:186px minmax(0,1fr) 300px;gap:16px;
  align-items:start}
@media(max-width:1180px){.mailer{grid-template-columns:1fr}}
.mailer__pal,.mailer__ins{position:sticky;top:16px;padding:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
@media(max-width:1180px){.mailer__pal,.mailer__ins{position:static}}

.pal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
@media(max-width:1180px){.pal{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
.pal__b{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);
  cursor:pointer;color:var(--ink-soft);transition:border-color .13s,background .13s}
.pal__b:hover{border-color:var(--accent,var(--primary));background:var(--primary-soft);
  color:var(--accent,var(--primary))}
.pal__b svg{width:19px;height:19px}
.pal__b b{font-size:var(--fs-2xs);font-weight:var(--w-med)}

.acentos{display:flex;gap:8px;margin-top:8px}
.acento{width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  background:var(--c);cursor:pointer;padding:0}
.acento.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}

/* La hoja: el correo a su ancho real, sobre el fondo de una bandeja. */
.mailer__canvas{padding:18px 10px 24px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius)}
.hoja{--acento:#0e6b62;width:600px;max-width:100%;margin:0 auto;padding:20px 26px 24px;
  background:#fff;border-radius:11px;box-shadow:var(--shadow);color:#16211d;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hoja__banda{border-top:4px solid var(--acento);padding-top:14px;margin-bottom:10px;
  font-weight:700;font-size:16px}
.hoja__banda::after{content:"ATBC";display:block}
.hoja__pie{margin-top:24px;padding-top:12px;border-top:1px solid #e5e7eb;
  color:#75877f;font-size:12px;line-height:1.5}

.bk{position:relative;padding:2px 6px;margin:0 -6px;border-radius:7px;
  border:1px solid transparent;cursor:pointer}
.bk:hover{border-color:#d7e3dd;background:#fbfdfc}
.bk.is-sel{border-color:var(--acento);background:#fbfdfc}
.bk.is-drag{opacity:.4}
.bk__tools{position:absolute;top:-11px;right:6px;display:none;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:2px;box-shadow:var(--shadow-sm);z-index:2}
.bk:hover .bk__tools,.bk.is-sel .bk__tools{display:flex}
.bk__tools button{border:0;background:none;cursor:pointer;color:var(--muted);
  padding:2px 6px;border-radius:5px;font-size:12px;line-height:1.3}
.bk__tools button:hover{background:var(--surface-2);color:var(--ink)}
.bk-h{margin:6px 0 10px;font-size:23px;line-height:1.3;color:#16211d}
h3.bk-h{font-size:17px;margin:16px 0 8px}
.bk-t{font-size:15px;line-height:1.65;margin:0 0 12px;color:#16211d}
.bk-t i,.bk-2 i{color:#9aa8a2;font-style:normal}
.bk-l{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.6}
.bk-i{display:block;width:100%;border-radius:8px;margin:0 0 14px}
.bk-btn{display:inline-block;padding:11px 24px;border-radius:8px;margin:4px 0 16px;
  background:var(--acento);color:#fff;font-size:15px;font-weight:600}
.bk-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:14px;
  line-height:1.6;margin:0 0 12px}
.bk-hr{border:0;border-top:1px solid #e5e7eb;margin:18px 0}
.bk-sp{background:repeating-linear-gradient(45deg,#f4f6f3,#f4f6f3 5px,#fff 5px,#fff 10px);
  border-radius:5px}
.bk-ph{padding:22px;text-align:center;color:#9aa8a2;font-size:13px;
  border:1px dashed #d7e3dd;border-radius:9px;margin:0 0 12px}

.sep{border:0;border-top:1px solid var(--line);margin:14px 0}

/* La lupa: el correo de verdad, dentro de un marco, a dos anchos. */
.lupa{position:fixed;inset:0;z-index:60;background:rgba(10,18,15,.55);
  display:flex;flex-direction:column;backdrop-filter:blur(3px)}
.lupa__bar{display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.lupa__in{flex:1;overflow:auto;display:flex;justify-content:center;padding:18px}
.lupa__in iframe{width:640px;max-width:100%;height:100%;border:0;border-radius:10px;
  background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.3);transition:width .18s}
.marco-alto{width:100%;height:460px;border:0;display:block;border-radius:0 0 11px 11px}

/* Los cuatro pasos */
.pasos .subtab.is-off{color:var(--muted);opacity:.55;cursor:default}
.paso__n{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;
  border-radius:50%;background:var(--surface-2);color:var(--muted);
  font-size:var(--fs-2xs);font-weight:var(--w-bold)}
.subtab.is-on .paso__n{background:var(--accent,var(--primary));color:#fff}

/* Galería de arranque */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.galeria__ir{grid-column:1/-1;display:flex;gap:10px;margin-top:6px}
.tarjeta{display:block;cursor:pointer;border:2px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--surface);transition:border-color .13s,box-shadow .13s}
.tarjeta:hover{border-color:var(--accent,var(--primary))}
.tarjeta:has(input:checked){border-color:var(--accent,var(--primary));box-shadow:var(--shadow)}
.tarjeta input{position:absolute;opacity:0;pointer-events:none}
.tarjeta__mini{display:block;height:232px;overflow:hidden;background:var(--paper);
  border-bottom:1px solid var(--line);position:relative}
.tarjeta__mini iframe{width:600px;height:640px;border:0;transform:scale(.44);
  transform-origin:top left;pointer-events:none}
.tarjeta__pie{display:block;padding:11px 13px 13px}
.tarjeta__pie b{display:block;font-size:var(--fs-md);color:var(--ink)}

/* Elegir público: el número delante, que es lo que se mira */
.publicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.publico{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.publico:hover{border-color:var(--accent,var(--primary))}
.publico.is-on,.publico:has(input:checked){border-color:var(--accent,var(--primary));
  background:var(--primary-soft)}
.publico input{position:absolute;opacity:0;pointer-events:none}
.publico__n{font-size:var(--fs-2xl);font-weight:var(--w-black);
  font-variant-numeric:tabular-nums;color:var(--accent,var(--primary));line-height:1}
.publico__t{font-size:var(--fs-sm);color:var(--ink-soft)}

/* La fila tal como se verá en la bandeja de quien lo recibe */
.bandeja{display:flex;gap:12px;align-items:flex-start}
.bandeja__av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--primary-soft);color:var(--primary);
  font-size:12px;font-weight:var(--w-black)}
.bandeja__t{min-width:0}
.bandeja__de{font-size:var(--fs-sm);font-weight:var(--w-bold);color:var(--ink)}
.bandeja__as{font-size:var(--fs-md);color:var(--ink);margin:1px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bandeja__pre{font-size:var(--fs-sm);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pegas{margin:0;padding-left:20px;color:var(--warn-ink);font-size:var(--fs-sm);line-height:1.6}
.listo{margin:0;color:var(--primary);font-weight:var(--w-bold);font-size:var(--fs-sm)}
.grid--4{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}

/* ── Foto de perfil ────────────────────────────────────────────────────────
   El marco es cuadrado y del tamaño en que se verá, no un rectángulo con la
   foto entera: quien la sube tiene que ver el recorte que va a quedar, no la
   imagen original. */
.foto{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.foto__marco{position:relative;width:112px;height:112px;flex:none;border-radius:50%;
  overflow:hidden;background:var(--primary-soft);display:grid;place-items:center;
  border:1px solid var(--line)}
.foto__marco img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.foto__ini{font-size:30px;font-weight:var(--w-black);color:var(--primary)}
.foto__lado{flex:1;min-width:190px;display:flex;flex-direction:column;gap:8px;
  align-items:flex-start}
.foto__lado label.btn{cursor:pointer}
.foto__lado input[type="range"]{width:100%;max-width:230px;accent-color:var(--accent,var(--primary))}

/* ── Código a la vista ─────────────────────────────────────────────────────
   Una definición de formulario se lee y se edita, así que va en monoespaciado
   y con las líneas sin cortar: en un JSON la sangría ES la estructura, y
   plegar las líneas la destruye. */
.codigo{font-family:var(--mono);font-size:12.5px;line-height:1.55;
  tab-size:2;white-space:pre;overflow:auto}
textarea.codigo{white-space:pre;overflow-wrap:normal}
.codigo--ver{margin:0;padding:14px 16px;background:var(--surface-2);
  border-radius:0 0 var(--radius) var(--radius);color:var(--ink);max-height:460px}

/* Pares dato/valor. Se usa en la revisión de una importación y en la
   referencia, donde la mitad izquierda son nombres literales. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.kv dt{font-size:var(--fs-2xs);font-weight:var(--w-bold);text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding-top:2px}
.kv dd{margin:0;font-size:var(--fs-sm);color:var(--ink)}
.kv--code{grid-template-columns:1fr;gap:0}
.kv--code dt{font-family:var(--mono);font-size:12.5px;text-transform:none;
  letter-spacing:0;color:var(--accent,var(--primary));margin-top:11px}
.kv--code dd{color:var(--ink-soft);line-height:1.5}
.kv--code dd code,.reglas code{font-family:var(--mono);font-size:12px;
  padding:1px 5px;border-radius:5px;background:var(--surface-2)}

.preguntas{margin:0;padding-left:20px;font-size:var(--fs-sm);line-height:1.5}
.preguntas li{margin:0 0 8px}
.reglas{margin:0;padding-left:20px;font-size:var(--fs-sm);line-height:1.6;
  color:var(--ink-soft)}
.reglas li{margin:0 0 11px}
.reglas b{color:var(--ink)}

/* ── Rótulos, sin cursiva ──────────────────────────────────────────────────
   La maqueta ponía los rótulos —«ACTIVE MEMBERS», «UPCOMING»— en serif y en
   cursiva. En una maqueta de una pantalla es un guiño editorial; repartido por
   cuarenta tablas y treinta fichas se lee como si todo estuviera citado, y en
   versalitas la cursiva además emborrona las letras. Vuelven a la misma
   familia y el mismo peso que el resto de la interfaz.

   `.sci` se queda en cursiva a propósito: ahí la cursiva SIGNIFICA algo —es la
   convención para un nombre científico— y quitarla sería un error de fondo. */
.eyebrow{font-family:var(--ui);font-style:normal;
  font-size:var(--fs-2xs);font-weight:var(--w-bold);
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ── Texto con formato y revisión de respuestas ────────────────────────────── */
.rico{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden}
.rico__bar{display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid var(--line-soft);
  background:var(--surface-2)}
.rico__bar button{border:0;background:none;cursor:pointer;color:var(--ink-soft);
  min-width:28px;height:26px;border-radius:6px;font-size:13px;line-height:1}
.rico__bar button:hover{background:var(--surface);color:var(--accent,var(--primary))}
.rico__in{min-height:150px;padding:11px 13px;outline:none;font-size:var(--fs-md);
  line-height:1.65;color:var(--ink)}
.rico__in:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.rico__in ul,.rico__in ol{margin:0 0 10px;padding-left:22px}
.rico__in p{margin:0 0 10px}
.rico__in a{color:var(--accent,var(--primary))}
.rico-ver{max-width:44ch;font-size:var(--fs-sm);line-height:1.55}
.rico-ver p{margin:0 0 7px}
.rico-ver ul,.rico-ver ol{margin:0 0 7px;padding-left:19px}

/* El cebo antispam. Fuera de la pantalla y fuera del orden de tabulación: quien
   usa un lector de pantalla tampoco debe tropezarse con él. */
.cebo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Revisión: el estado se pulsa y se abre la ficha, sin salir de la tabla. */
.revisar > summary{cursor:pointer;list-style:none}
.revisar > summary::-webkit-details-marker{display:none}
.revisar__p{position:absolute;z-index:5;margin-top:6px;width:240px;padding:10px;
  display:flex;flex-direction:column;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.st--rev-new        {background:var(--surface-2);color:var(--muted)}
.st--rev-shortlisted{background:var(--warn-bg);color:var(--warn-ink)}
.st--rev-accepted   {background:var(--primary-soft);color:var(--primary)}
.st--rev-rejected   {background:var(--bad-bg);color:var(--red-bad)}
.st--rev-new,.st--rev-shortlisted,.st--rev-accepted,.st--rev-rejected{
  display:inline-block;padding:2px 9px;border-radius:99px;font-size:var(--fs-2xs);
  font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.04em}

/* La cara pequeña dentro de una tabla: una fila con foto se reconoce de un
   vistazo, y 875 filas de texto no. */
.table .avatar{width:28px;height:28px;font-size:10px;flex:none}
.concara{display:flex;align-items:center;gap:9px;min-width:0}

/* ── Cuotas ────────────────────────────────────────────────────────────────
   El precio delante y grande: es lo que se viene a mirar. La categoría y la
   duración van detrás, en pequeño, porque a estas alturas ya están decididas
   por el perfil y no son una elección. */
.cuotas{display:flex;flex-direction:column;gap:9px}
.cuota{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.cuota:hover{border-color:var(--accent,var(--primary))}
.cuota:has(input:checked){border-color:var(--accent,var(--primary));
  background:var(--primary-soft)}
.cuota input{position:absolute;opacity:0;pointer-events:none}
.cuota__p{font-size:var(--fs-2xl);font-weight:var(--w-black);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--accent,var(--primary));
  min-width:5.5ch;text-align:right}
.cuota__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.cuota--cerrada{cursor:default;opacity:.75;background:var(--surface-2)}
.cuota--cerrada .cuota__p{color:var(--muted)}

/* En la tabla completa, la casilla que le toca a quien mira. */
.table td.is-yours{background:var(--primary-soft);font-weight:var(--w-bold);
  color:var(--accent,var(--primary))}

/* Concesión de acceso: el área y debajo sus apartados, sangrados, para que se
   vea de un vistazo que marcar el área incluye todo lo de dentro. */
.ambito{padding:11px 0;border-top:1px solid var(--line-soft)}
.ambito:first-of-type{border-top:0;padding-top:0}
.opt--sub{margin-left:24px;margin-top:5px;font-size:var(--fs-sm);color:var(--muted)}

/* ── Recibo ────────────────────────────────────────────────────────────────
   Se mira en pantalla y se imprime. Lo segundo manda: sin fondo, sin sombra y
   sin nada que no vaya a salir en el papel. */
.recibo{max-width:560px;margin:0 auto}
.recibo__cab{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;padding-bottom:16px;border-bottom:2px solid var(--accent,var(--primary))}
.recibo__n{text-align:right}
.recibo__n b{display:block;font-family:var(--mono);font-size:var(--fs-lg);color:var(--ink)}
.recibo__kv{margin:18px 0}
.recibo__total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:14px;margin-top:6px;border-top:1px solid var(--line)}
.recibo__total b{font-size:var(--fs-2xl);font-weight:var(--w-black);
  font-variant-numeric:tabular-nums;color:var(--ink)}
.recibo__pie{margin-top:22px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media print{
  .solo__head,.solo__foot,.noimprimir,.switchbar,.topbar,.subbar{display:none!important}
  body{background:#fff}
  .recibo{box-shadow:none;border:0;max-width:none}
  .page{padding:0}
}

/* Urnas: una candidatura es un nombre y una línea de semblanza. */
.q-urna .opcion{display:flex;gap:8px;align-items:center}
.q-urna .opcion input:first-child{flex:0 0 30%}
.q-urna .opcion input:nth-child(2){flex:1}

/* Una fila apagada: un patrocinador que dijo que no sigue en la lista —hace
   falta para no volver a llamarle— pero no compite por la atención. */
.table tr.is-off{opacity:.5}

/* Desacuerdo alto entre revisores: es la señal de que hay que mirar el caso. */
.aviso{color:var(--warn-ink);font-weight:var(--w-bold)}

/* Nota interna en un hilo de incidencia: se ve que no sale de aquí. */
.nota{background:var(--warn-bg);border-color:var(--warn-ink)}
.nota .meta{color:var(--warn-ink)}

/* Una carta oficial: se lee y se imprime, con el texto suelto y sin cuadros. */
.carta{margin-top:22px;font-size:var(--fs-md);line-height:1.75;color:var(--ink)}
.carta p{margin:0 0 14px}

/* «Visto como»: la barra que dice con qué ojos se está mirando una ficha. */
.ojos{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;
  padding:10px 14px;border:1px dashed var(--line-2, var(--line));
  border-radius:var(--radius);background:var(--surface-2)}
.ojos .segmented{margin:0}
.ojos .eyebrow{margin:0}
.previa{opacity:.45;pointer-events:none;filter:saturate(.4)}
.oculto{color:var(--muted);font-style:normal;
  text-decoration:line-through;text-decoration-color:var(--line-2, var(--line))}

/* Fichas del directorio: se miran por caras, no por filas. */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.ficha{display:flex;flex-direction:column;gap:9px;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.ficha__cab{display:flex;gap:12px;align-items:flex-start}
.ficha__barra{display:flex;align-items:center;gap:8px}
.ficha__barra i{flex:1;height:6px;border-radius:3px;background:var(--surface-2);
  position:relative;overflow:hidden}
.ficha__barra i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  background:var(--accent,var(--primary));border-radius:3px}
.ficha__barra i.flojo::after{background:var(--warn-ink)}
.ficha__barra b{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--muted)}

/* ── Evento en línea ───────────────────────────────────────────────────────
   La sala: una barra que dice si se puede entrar y, cuando no, cuándo. En
   directo se tiñe, porque es la única vez que hay que mirarla con urgencia. */
.sala{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.sala__dice{font-size:var(--fs-xl);font-weight:var(--w-bold);color:var(--ink)}
.sala--live{border-color:var(--accent,var(--primary));background:var(--primary-soft)}
.sala--live .sala__dice{color:var(--accent,var(--primary))}
.sala--live .sala__dice::before{content:"●";margin-right:7px;font-size:.7em;
  vertical-align:middle;animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
.sala--over{opacity:.65}
.btn--lg{padding:12px 26px;font-size:var(--fs-lg)}

/* Una sesión del programa: hora, qué es, y por dónde se entra. */
.sesion{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sesion--live{border-color:var(--accent,var(--primary));background:var(--primary-soft)}
.sesion--over{opacity:.7}
.sesion__hora{flex:0 0 78px;text-align:right}
.sesion__hora b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.sesion__que{flex:1;min-width:0}
.sesion__ir{flex:0 0 auto;text-align:right}
@media(max-width:640px){
  .sesion{flex-direction:column;gap:8px}
  .sesion__hora{text-align:left;flex:none}
}

/* El programa resumido de un hub: a qué hora es cada cosa, que es lo único que
   hace falta saber antes de apuntarse. */
.programa{margin:10px 0 0;padding-left:0;list-style:none;font-size:var(--fs-sm);
  line-height:1.7;color:var(--ink-soft)}
.programa b{display:inline-block;min-width:3.6em;font-variant-numeric:tabular-nums;
  color:var(--muted);font-weight:var(--w-med)}

/* ════════════════════════════════════════════════════════════════════════════
   REDISEÑO · el sistema, no la paleta
   ────────────────────────────────────────────────────────────────────────────
   La referencia es elaniti.com. De ahí se toma lo que es sistema y se deja lo
   que es identidad ajena: su azul marino y su índigo son SU marca, y ponérselos
   a la ATBC sería vestirla de otro. El verde se queda.

   Lo que sí se trae, que es lo que hacía que esto se viera soso:

     · **dos tipografías con oficios distintos.** Antes había una sola para
       todo, y sin contraste entre titular y texto una pantalla se lee como un
       formulario. Bricolage Grotesque para lo que se mira; Atkinson
       Hyperlegible —diseñada para legibilidad— para lo que se lee.
     · **escala de verdad.** Un titular que mide 22 px sobre un texto de 14 no
       es un titular, es una línea en negrita.
     · **sombras teñidas.** Las grises son las de un cuadro de diálogo de 2005;
       teñidas con el acento, una ficha parece apoyada en la página y no
       pegada.
     · **el radio dice qué es cada cosa.** Píldora lo que se pulsa, 14 px lo que
       contiene, y una esquina grande y asimétrica como firma en lo que abre
       una pantalla. Todo con el mismo radio es lo que hace que todo parezca lo
       mismo.

   Va al final de las dos hojas y es idéntico en ambas.
   ════════════════════════════════════════════════════════════════════════════ */

/* Se sirven desde nuestro propio servidor y no desde Google: la plataforma
   hermana tiene que funcionar en China, donde ese dominio no siempre responde,
   y una tipografía que no carga convierte una pantalla en otra distinta. */
@font-face{font-family:"Bricolage";font-style:normal;font-weight:300 800;
  font-display:swap;src:url("../bricolage-var.woff2") format("woff2")}
@font-face{font-family:"Atkinson";font-style:normal;font-weight:200 800;
  font-display:swap;src:url("../atkinson-var.woff2") format("woff2")}

:root{
  --ui:"Atkinson","Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Bricolage","Atkinson",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* La escala. El salto entre el titular y el texto es el que faltaba. */
  --fs-4xl:44px; --fs-3xl:34px; --fs-2xl:25px; --fs-xl:19px;
  --fs-lg:15.5px; --fs-md:14.5px; --fs-sm:13.5px; --fs-xs:12.5px; --fs-2xs:11px;

  /* Radios con significado. */
  --r:14px; --radius:14px;
  --r-pill:999px;
  --r-firma:0 42px;            /* la esquina grande, sólo en lo que abre pantalla */

  /* Sombras teñidas con el acento en vez de negras. */
  --shadow-sm:0 1px 2px rgba(14,107,98,.06), 0 2px 6px rgba(14,107,98,.05);
  --shadow:0 8px 22px rgba(14,107,98,.09), inset 0 0 0 1px rgba(255,255,255,.6);
  --shadow-lift:0 16px 44px rgba(14,107,98,.14), inset 0 0 0 1px rgba(255,255,255,.7);
}
:root[data-theme="dark"]{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  --shadow-lift:0 18px 48px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07);
}

body{font-family:var(--ui);font-size:var(--fs-md);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── Titulares ──────────────────────────────────────────────────────────────
   Apretados y con peso. `-0.03em` a este tamaño no es un capricho: una
   grotesca a 34 px con espaciado normal se lee deshilachada. */
h1,.titulo,.pagehead h1{font-family:var(--display);font-weight:700;
  letter-spacing:-.032em;line-height:1.08;font-size:var(--fs-3xl);
  font-variation-settings:"opsz" 40}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  line-height:1.2;font-size:var(--fs-2xl)}
h3{font-family:var(--display);font-weight:650;letter-spacing:-.015em;
  font-size:var(--fs-xl);line-height:1.25}
.card__head h2,.card__head h3{font-size:var(--fs-lg);letter-spacing:-.01em;
  font-weight:650}
.brandmin,.topbar__brand{font-family:var(--display);font-weight:750;
  letter-spacing:-.02em;font-size:var(--fs-lg)}
.lede{font-size:var(--fs-lg);line-height:1.6;max-width:66ch}

/* Los números grandes son titulares, no texto: en una cifra el peso ES el dato. */
.count--lg,.publico__n,.cuota__p,.sala__dice,.recibo__total b,.stat__v{
  font-family:var(--display);font-weight:750;letter-spacing:-.03em;
  font-variation-settings:"opsz" 48}

/* ── Formas ─────────────────────────────────────────────────────────────────
   Píldora lo que se pulsa; 14 px lo que contiene. Que un botón y una tabla
   tuvieran el mismo radio era parte de por qué todo parecía lo mismo. */
.btn,.chip,.st,.badge,.count,.tab,.subtab__n,.acento,.switchbar__tema{
  border-radius:var(--r-pill)}
.btn{padding:9px 18px;font-weight:600;letter-spacing:-.005em}
.btn--sm{padding:6px 13px}
.btn--lg{padding:14px 30px}
.card,.q,.ficha,.sesion,.sala,.cuota,.publico,.hoja,.tarjeta{border-radius:var(--r)}
.card{box-shadow:var(--shadow-sm);border-color:var(--line-soft, var(--line))}
.card:hover{box-shadow:var(--shadow)}

/* La firma: una esquina grande en lo que abre una pantalla. Se usa POCO —
   repetida en cada ficha dejaría de significar nada. */
.pagehead,.mailer__canvas,.solo__head{border-radius:var(--r-firma)}
.pagehead{padding:22px 26px;margin-bottom:20px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent,var(--primary)) 6%,var(--surface)),
    var(--surface));
  border:1px solid var(--line-soft, var(--line))}
.pagehead .lede{margin-bottom:0}

/* ── Aire ───────────────────────────────────────────────────────────────────
   Lo que más «soso» quitaba: todo estaba a la misma distancia de todo. */
.section-title{margin:34px 0 14px}
.page,.wrap{padding-top:26px}
.card__body{padding:16px 18px}
.card__head{padding:14px 18px}

/* ── Acentos ────────────────────────────────────────────────────────────────
   Un juego corto para lo categórico —gráficas, etiquetas, estados—, elegido
   para convivir con el verde en vez de competir con él. */
:root{
  --cat-1:#0e6b62;   /* el verde de la casa      */
  --cat-2:#2a6f97;   /* azul de río              */
  --cat-3:#b07219;   /* ámbar de sabana          */
  --cat-4:#7b4b94;   /* morado de orquídea       */
  --cat-5:#3f8f6b;   /* verde claro de dosel     */
}

/* Y el foco, que estaba a medias: un aro del acento, grueso y visible. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent,var(--primary));outline-offset:2px;
  border-radius:6px}

/* La foto dentro del disco del menú. Faltaba: `.ava` fija el tamaño del disco
   pero no el de lo que lleva dentro, así que en cuanto alguien subió una foto
   la imagen salió a su tamaño natural y descuadró la barra entera. Con
   iniciales no se veía porque un texto sí hereda el tamaño. */
.ava{overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover;display:block}

/* Y las cifras grandes, grandes de verdad. La regla nueva les puso familia y
   peso pero el tamaño seguía siendo el del texto: un dato de un informe que
   mide lo mismo que su etiqueta no es un dato, es una línea más. */
.count--lg,.publico__n,.cuota__p,.stat__v{font-size:var(--fs-3xl);line-height:1.05;
  margin:2px 0 0}
.sala__dice{font-size:var(--fs-2xl)}
.recibo__total b{font-size:var(--fs-2xl)}
.ficha__barra b,.subtab__n,.count{font-size:var(--fs-2xs)}

/* ── La barra que faltaba ───────────────────────────────────────────────────
   `.chart__row` se escribió como una rejilla de DOS columnas —rótulo y cifra—
   y las plantillas llevan desde el principio metiendo un `<i style="--w:..%">`
   en medio que no tenía ni una regla. El resultado: todas las gráficas de la
   plataforma —el informe, el dinero, el directorio, los recuentos de las
   urnas— llevaban meses dibujándose sin barra y pareciendo una lista.
   Tres columnas, y la del medio es la barra. */
.chart__row{grid-template-columns:minmax(7em,auto) 1fr auto;align-items:center;
  gap:0 12px;font-size:var(--fs-sm)}
.chart__row > span{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.chart__row > i{display:block;height:9px;border-radius:99px;
  background:var(--surface-2);position:relative;overflow:hidden}
.chart__row > i::after{content:"";position:absolute;inset:0 auto 0 0;
  width:var(--w,0%);border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent,var(--primary)) 72%,#fff),
    var(--accent,var(--primary)));
  transition:width .35s cubic-bezier(.22,1,.36,1)}
.chart__row > b{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.5em;text-align:right}
@media(max-width:520px){.chart__row{grid-template-columns:1fr auto}
  .chart__row > i{grid-column:1/-1;margin-top:3px}}

/* ── La barra en estrecho ───────────────────────────────────────────────────
   Al partirse, el menú de usuario caía a una línea para él solo y dejaba una
   banda vacía de cuarenta píxeles. El orden natural es: marca y persona
   arriba —que es lo que identifica dónde estás y quién eres— y las secciones
   debajo, ocupando el ancho. */
@media(max-width:900px){
  .topbar__in,.topbar__inner{flex-wrap:wrap;row-gap:8px}
  .brandmin,.topbar__brand{order:1}
  .spacer{order:2;flex:1}
  .usermenu{order:3}
  .tabs{order:4;flex:1 0 100%;justify-content:flex-start}
  .usermenu__n{display:none}          /* la cara ya dice quién eres */
}

/* ════════════════════════════════════════════════════════════════════════════
   REDISEÑO · segunda pasada: color de verdad
   ────────────────────────────────────────────────────────────────────────────
   La primera fue tímida. Se cambió la tipografía y la escala pero todo siguió
   siendo blanco sobre blanco con un verde de acento, y eso no es lo que hace
   que la referencia se vea moderna. Lo que lo hace es:

     · **bloques saturados**, no fichas blancas. Una cabecera en verde profundo
       con texto blanco cambia una pantalla entera; el mismo texto sobre blanco
       es un documento.
     · **varios acentos a la vez.** Un solo color de marca repetido es sobrio;
       tres o cuatro conviviendo es lo que se lee como diseñado.
     · **la esquina grande de verdad** — 70 px, no 42. A 42 parece un radio
       generoso; a 70 es una decisión.

   Y una regla que sí se mantiene, porque esto además de bonito es una
   herramienta de trabajo: **el color va en el armazón y en las portadas, nunca
   dentro de una tabla o un formulario.** Una hoja de cálculo de colores es
   ilegible a los veinte minutos, y la secretaría pasa aquí horas.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* La paleta. Verde de la casa, y a su lado un juego tropical —no corporativo—
     que puede convivir con él sin pelearse. */
  --hondo:#06352f;        /* dosel en sombra: los bloques saturados */
  --hondo-2:#0b4a41;
  --menta:#5fd3ab;
  --ambar:#f2a541;
  --coral:#ff7d70;
  --cielo:#4aa3d8;
  --lila:#a98bd4;

  --r-firma:0 70px;       /* la esquina, ahora sí */

  /* Un fondo con dos lavados de color en vez de un gris plano. */
  --lienzo:
    radial-gradient(1100px 460px at 12% -10%, rgba(95,211,171,.20) 0%, transparent 62%),
    radial-gradient(900px 400px at 88% -6%, rgba(242,165,65,.16) 0%, transparent 58%),
    var(--paper);
}
:root[data-theme="dark"]{
  --hondo:#04211d; --hondo-2:#07322c;
  --lienzo:
    radial-gradient(1100px 460px at 12% -10%, rgba(95,211,171,.10) 0%, transparent 62%),
    radial-gradient(900px 400px at 88% -6%, rgba(242,165,65,.07) 0%, transparent 58%),
    var(--paper);
}
body{background:var(--lienzo);background-attachment:fixed}

/* ── La portada de cada pantalla: un bloque, no una ficha ─────────────────── */
.pagehead{
  position:relative;overflow:hidden;
  padding:34px 36px 36px;margin-bottom:26px;border:0;
  background:linear-gradient(135deg,var(--hondo) 0%,var(--hondo-2) 58%,
             color-mix(in srgb,var(--accent,var(--primary)) 70%,var(--hondo-2)) 100%);
  color:#fff;box-shadow:0 18px 46px rgba(6,53,47,.24)}
.pagehead h1{color:#fff;font-size:var(--fs-4xl);letter-spacing:-.038em}
.pagehead .lede,.pagehead p{color:rgba(255,255,255,.78)}
.pagehead a{color:var(--menta)}
.pagehead .st,.pagehead .chip,.pagehead .badge{background:rgba(255,255,255,.16);
  color:#fff;border-color:transparent}
/* Un destello: la marca de agua que da profundidad sin cargar la pantalla. */
.pagehead::after{content:"";position:absolute;right:-90px;top:-120px;
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(95,211,171,.30) 0%,transparent 68%)}
.pagehead > div{position:relative;z-index:1}

/* ── Las cifras: cada una con su color ────────────────────────────────────── */
.grid--4 > .card:nth-child(4n+1),.grid--3 > .card:nth-child(3n+1){
  background:linear-gradient(160deg,rgba(95,211,171,.16),var(--surface) 68%)}
.grid--4 > .card:nth-child(4n+2),.grid--3 > .card:nth-child(3n+2){
  background:linear-gradient(160deg,rgba(74,163,216,.15),var(--surface) 68%)}
.grid--4 > .card:nth-child(4n+3),.grid--3 > .card:nth-child(3n+3){
  background:linear-gradient(160deg,rgba(242,165,65,.16),var(--surface) 68%)}
.grid--4 > .card:nth-child(4n+4){
  background:linear-gradient(160deg,rgba(169,139,212,.15),var(--surface) 68%)}
.grid--4 > .card,.grid--3 > .card{border-color:transparent;box-shadow:var(--shadow-sm)}
.grid--4 > .card .count--lg,.grid--3 > .card .count--lg{color:var(--hondo)}
:root[data-theme="dark"] .grid--4 > .card .count--lg,
:root[data-theme="dark"] .grid--3 > .card .count--lg{color:var(--menta)}

/* ── Las barras: una por color, en rueda ──────────────────────────────────── */
.chart__row:nth-child(5n+1) > i::after{background:linear-gradient(90deg,#7fe0c0,var(--accent,var(--primary)))}
.chart__row:nth-child(5n+2) > i::after{background:linear-gradient(90deg,#86c7e8,var(--cielo))}
.chart__row:nth-child(5n+3) > i::after{background:linear-gradient(90deg,#f8c98a,var(--ambar))}
.chart__row:nth-child(5n+4) > i::after{background:linear-gradient(90deg,#c9b4e6,var(--lila))}
.chart__row:nth-child(5n+5) > i::after{background:linear-gradient(90deg,#ffb0a7,var(--coral))}
.chart__row > i{height:11px;background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* ── Botones con cuerpo ───────────────────────────────────────────────────── */
.btn{background:linear-gradient(180deg,
      color-mix(in srgb,var(--accent,var(--primary)) 88%,#fff) 0%,
      var(--accent,var(--primary)) 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent,var(--primary)) 32%,transparent)}
.btn:hover{filter:brightness(1.06);
  box-shadow:0 5px 16px color-mix(in srgb,var(--accent,var(--primary)) 40%,transparent)}
.btn--ghost{background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:var(--surface-2);color:var(--accent,var(--primary));filter:none}

/* ── Rótulos de sección con una raya de color ─────────────────────────────── */
.section-title{color:var(--hondo)}
:root[data-theme="dark"] .section-title{color:var(--menta)}
.section-title::after{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent,var(--primary)) 45%,transparent),transparent)}

/* ── Etiquetas de estado: cada estado, su color ───────────────────────────── */
.st--open,.st--rev-accepted{background:color-mix(in srgb,var(--menta) 30%,#fff);
  color:#0a5244}
.st--draft,.st--rev-new{background:color-mix(in srgb,var(--cielo) 22%,#fff);color:#134a68}
.st--rev-shortlisted,.st--closed{background:color-mix(in srgb,var(--ambar) 30%,#fff);
  color:#7a4d07}
.st--rev-rejected{background:color-mix(in srgb,var(--coral) 26%,#fff);color:#8a2f26}
.chip{background:color-mix(in srgb,var(--accent,var(--primary)) 11%,var(--surface));
  color:var(--accent,var(--primary));border:0}

/* La tira de arriba, más presente. */
.switchbar{background:var(--hondo)}
.switchbar__tab.is-here{border-bottom-color:var(--menta);color:#fff}

/* El carril de subapartados es una tira delgada, y una fila de filtros que se
   parte en vertical la convierte en un bloque de cien píxeles. No se parte: se
   desplaza, que es lo que hace cualquier barra de herramientas estrecha. */
.subbar__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.subbar__in::-webkit-scrollbar{display:none}
.subbar__in > form,.subbar__in .btnrow{flex-wrap:nowrap;flex:none;align-items:center}
.subbar__in input,.subbar__in select{min-width:0;width:auto;max-width:220px;
  padding:5px 10px;font-size:var(--fs-sm)}
.subbar__in .btn{flex:none}

/* ════════════════════════════════════════════════════════════════════════════
   UNIFICACIÓN · que el sistema llegue a TODAS las pantallas
   ────────────────────────────────────────────────────────────────────────────
   El bloque de color sólo aparecía donde había `.pagehead`, y treinta y dos
   pantallas no lo usaban: el muro, el directorio, los grupos, los eventos, el
   acceso, los recibos, las cartas, las de «gracias»… Las de módulo ya llevan
   la cabecera envuelta; aquí se resuelve el resto, que son de otra clase y
   piden otro trato.

   Una pantalla suelta —«gracias», un recibo, la de acceso— es una tarjeta
   centrada. Ponerle encima un bloque ancho de color sería gritarle a alguien
   que sólo venía a leer dos líneas. Reciben el sistema por otra vía: la
   cabecera de la marca teñida, y un filo de color en la tarjeta.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── La cabecera de las pantallas públicas ────────────────────────────────── */
.solo__head{background:linear-gradient(120deg,var(--hondo),var(--hondo-2));
  border:0;border-radius:0 0 0 70px;position:relative;overflow:hidden}
.solo__in{padding:22px var(--gutter) 26px}
.solo__org{color:#fff;font-family:var(--display);font-weight:750;
  font-size:var(--fs-xl);letter-spacing:-.02em}
.solo__sub{color:rgba(255,255,255,.7)}
.solo__head .bmark rect{fill:var(--menta)}
.solo__head::after{content:"";position:absolute;right:-70px;top:-90px;
  width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(95,211,171,.28) 0%,transparent 68%)}

/* ── La pantalla de acceso ────────────────────────────────────────────────── */
.auth{max-width:420px;margin:6vh auto 0}
.auth__brand{text-align:center;margin-bottom:22px}
.auth__brand h1{font-size:var(--fs-3xl);color:var(--hondo);letter-spacing:-.035em}
:root[data-theme="dark"] .auth__brand h1{color:var(--menta)}
.auth .card,.auth__brand + .card{border-top:4px solid var(--accent,var(--primary));
  box-shadow:var(--shadow)}

/* ── Las tarjetas sueltas: gracias, recibo, carta, baja, urna, sólo socios ─── */
.page--narrow > .card,
.solo .card,
.card.recibo{border-top:4px solid var(--accent,var(--primary))}
.ic-ok{background:linear-gradient(160deg,var(--menta),var(--accent,var(--primary)));
  color:#fff;width:54px;height:54px;font-size:26px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent,var(--primary)) 32%,transparent)}

/* ── Y lo que quedaba plano dentro de las pantallas ya hechas ─────────────── */
.empty{background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--r);padding:34px 24px;text-align:center;color:var(--muted)}
.flash{border-radius:var(--r);border-left:4px solid var(--accent,var(--primary));
  padding:12px 16px}
.flash--warn{border-left-color:var(--ambar)}
.flash--error{border-left-color:var(--coral)}
.flash--ok,.flash--success{border-left-color:var(--menta)}
.aviso{border-left-width:4px}
.avatar{background:linear-gradient(160deg,
  color-mix(in srgb,var(--menta) 40%,var(--surface)),
  color-mix(in srgb,var(--accent,var(--primary)) 16%,var(--surface)))}

/* La tabla, que era lo más soso que quedaba: cabecera con peso y filas que
   responden al pasar. Sin color de fondo — dentro de los datos, no. */
.table thead th{background:var(--surface-2);color:var(--hondo);
  border-bottom:2px solid color-mix(in srgb,var(--accent,var(--primary)) 22%,var(--line))}
:root[data-theme="dark"] .table thead th{color:var(--menta)}
.table--hover tbody tr:hover{background:color-mix(in srgb,var(--menta) 7%,transparent)}

/* La pantalla de acceso del congreso: la misma tarjeta con filo de color que
   la de socios, para que las dos puertas se parezcan. */
.login-wrap{max-width:420px;margin:8vh auto 0}
.login{border-top:4px solid var(--accent,var(--primary));border-radius:var(--r);
  background:var(--surface);box-shadow:var(--shadow);padding:28px 26px}
.login h1{font-size:var(--fs-2xl);color:var(--hondo);letter-spacing:-.03em;
  margin:10px 0 4px}
.login .mark{width:54px;height:54px;margin:0 auto;border-radius:50%;display:grid;
  place-items:center;font-size:24px;color:#fff;
  background:linear-gradient(160deg,var(--menta),var(--accent,var(--primary)));
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent,var(--primary)) 30%,transparent)}
.login-wrap,.login{text-align:center}
.login input,.login button{text-align:left}
.login button{text-align:center}

/* La banda verde de la portada del congreso ya no hace falta: la cabecera de
   color dice lo mismo y mejor. Se apaga en vez de borrarla del guion, porque
   `/checkin`, `/room` y `/session-report` la siguen usando y ahí sí toca. */
#app > .site-banner{display:none}