/* MediCerca — Design tokens (Brand Book §21) */
:root{
--brand:#118A67; --brand-2:#20B8A6; --ink:#153D42;
/* W6 (a11y WCAG 2.2 AA): --brand sobre blanco da 4.33:1 (falla AA 4.5 para
texto normal). --brand-text:#0C6B50 da 6.49:1 y es el tono oscuro ya usado
en la paleta (hero, dia-chk). Se usa para texto normal y fondos de botón;
--brand se conserva para usos decorativos y texto grande (≥18.66px bold). */
--brand-text:#0C6B50;
--bg:#F4F8F7; --white:#FFFFFF; --muted:#6A7470;
--ok:#22C55E; --warn:#F59E0B; --bad:#EF4444; --info:#3B82F6;
--r-card:16px; --r-btn:12px;
--shadow:0 2px 14px rgba(21,61,66,.08);
--font:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
}
/* A11Y (auditoría PWA 2026-10-04): indicador de foco visible, consistente y de
alto contraste en toda la app (WCAG 2.2 — 2.4.7 Enfoque visible, 2.4.13
Apariencia del foco). Solo actúa cuando el navegador decide que el foco
debe anunciarse (navegación por teclado); no pisa los estilos :focus
existentes de formularios. */
:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px;border-radius:6px}
/* Los slots/chips de reserva anuncian su estado seleccionado por teclado y
lector de pantalla cuando el router les pone aria-pressed (PATCH-07). */
.slot[aria-pressed="true"]{outline:3px solid var(--brand-2);outline-offset:2px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand-text);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px;width:100%}
/* Banner demo */
.demo-banner{background:var(--ink);color:#fff;text-align:center;font-size:12px;
padding:7px 12px;letter-spacing:.2px}
.demo-banner b{color:var(--brand-2)}
/* Header */
.topbar{position:sticky;top:0;z-index:50;background:var(--white);
border-bottom:1px solid #e4ebe9}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img.logo{height:44px;width:auto}
/* Botón de acceso profesionales */
.btn-entrar{display:inline-flex;align-items:center;gap:7px;background:var(--brand-text);color:#fff;
font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:999px;white-space:nowrap}
.btn-entrar:hover{background:#0d7358}
/* Sesión demo */
#sesionBox{display:flex;align-items:center;gap:6px}
.sesspill{font-size:11.5px;font-weight:700;color:#0c6b50;background:#e9f6f1;
padding:6px 10px;border-radius:999px;white-space:nowrap}
#sesionBox button{border:0;background:transparent;color:var(--muted);
font-family:var(--font);font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:underline}
.topbar .wrap{gap:10px}
@media(max-width:560px){.brand img.logo{height:38px}.btn-entrar{font-size:12.5px;padding:8px 14px}}
/* Contenido */
#app{flex:1;padding-bottom:96px}
.hero{background:linear-gradient(160deg,var(--brand) 0%,#0d6e53 55%,var(--ink) 130%);
color:#fff;border-radius:0 0 28px 28px;padding:40px 0 44px;text-align:center}
.hero .isotipo{width:76px;height:76px;margin:0 auto 12px;display:block;
background:#fff;border-radius:24px;padding:8px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(26px,5.5vw,40px);font-weight:700;letter-spacing:-.5px}
.hero h1 .t1{color:#fff}.hero h1 .t2{color:#bff0dd}
.hero p.slogan{font-size:17px;opacity:.92;margin:8px 0 4px}
.hero p.sub{font-size:14px;opacity:.78;max-width:520px;margin:0 auto}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:560px){.cta-grid{grid-template-columns:1fr}}
.cta{background:#fff;border-radius:var(--r-card);padding:22px 18px;text-align:left;
color:var(--ink);box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;
transition:transform .12s ease}
.cta:hover{transform:translateY(-2px)}
.cta .ic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;display:grid;
place-items:center;font-size:26px;background:var(--bg)}
.cta h3{font-size:16.5px;font-weight:600;margin-bottom:4px}
.cta p{font-size:13px;color:var(--muted);line-height:1.45}
.cta .go{margin-left:auto;color:var(--brand);font-weight:700;font-size:20px}
.section{padding:34px 0 6px}
.section h2{font-size:21px;font-weight:700;margin-bottom:6px}
.section .lede{color:var(--muted);font-size:14.5px;margin-bottom:18px;max-width:640px}
/* Tarjetas */
.card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);
padding:18px;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--brand);
color:#fff;font-weight:700;display:grid;place-items:center}
.step h4{font-size:15.5px;margin-bottom:4px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.5}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.trust .pill{background:#e9f6f1;color:#0c6b50;font-size:13px;font-weight:600;
padding:8px 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center}
/* Búsqueda */
.searchbar{position:sticky;top:65px;z-index:40;background:var(--bg);padding:12px 0}
.searchrow{display:flex;gap:10px}
.searchrow input{flex:1;border:1.5px solid #dbe5e2;border-radius:var(--r-btn);
padding:13px 16px;font-family:var(--font);font-size:16px;background:#fff;color:var(--ink)}
.searchrow input:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.filters select{border:1.5px solid #dbe5e2;border-radius:999px;padding:8px 12px;
font-family:var(--font);font-size:16px;background:#fff;color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.chip{border:1.5px solid #dbe5e2;background:#fff;border-radius:999px;padding:8px 14px;
font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* Resultados */
.result{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);
padding:16px 18px;margin-bottom:12px}
.result .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.result h3{font-size:16px;font-weight:600}
.result .meta{font-size:13px;color:var(--muted);margin-top:2px}
.price{font-size:19px;font-weight:700;color:var(--brand);white-space:nowrap}
.price small{font-size:12px;font-weight:400;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
padding:5px 11px;border-radius:999px;margin:8px 8px 0 0}
.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.b-ok{background:#e7f8ee;color:#15803d}.b-warn{background:#fef4e2;color:#b45309}
.b-bad{background:#fdecec;color:#b91c1c}.b-info{background:#e8f1fe;color:#1d4ed8}
.b-neutral{background:#eef2f1;color:var(--neutral-text)}
/* A11Y Frente 10: antes color:var(--muted) → 4.28:1 (falla AA). */
.updated{font-size:12px;color:var(--muted);margin-top:8px;display:flex;gap:6px;align-items:center}
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{border:0;border-radius:var(--r-btn);padding:11px 18px;font-family:var(--font);
font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--brand-text);color:#fff}
.btn-primary:hover{background:#0a5a44}
.btn-ghost{background:#eef4f2;color:var(--ink)}
.btn-outline{background:#fff;border:1.5px solid var(--brand);color:var(--brand-text)}
.btn-wa{background:#0d7a41;color:#fff}
/* A11Y Frente 10: antes #25D366 → blanco sobre #25D366 = 1.98:1 (falla AA).
#0d7a41 conserva el verde WhatsApp con 5.42:1. */
.btn-block{width:100%;justify-content:center}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
color:#0c6b50;background:#e9f6f1;padding:4px 10px;border-radius:999px}
/* Detalle */
.backlink{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;
margin:18px 0 12px}
.pharmrow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
padding:14px 0;border-top:1px solid #edf1f0}
.pharmrow:first-of-type{border-top:0}
.pharmrow .who{font-weight:600;font-size:14.5px}
.pharmrow .addr{font-size:12.5px;color:var(--muted);margin-top:2px}
/* Formularios */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid #dbe5e2;
border-radius:var(--r-btn);padding:12px 14px;font-family:var(--font);font-size:16px;
background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand-2)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:10px 0 16px}
.slot{border:1.5px solid #dbe5e2;background:#fff;border-radius:10px;padding:10px 6px;
font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);color:var(--ink)}
.slot.on{background:var(--brand-text);border-color:var(--brand-text);color:#fff}
/* Panel farmacia */
.tabs{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.tabs-grupo{display:flex;flex-direction:column;gap:4px;margin:16px 0}
.tabs-seccion{display:flex;align-items:center;gap:12px}
.tabs-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);min-width:90px;text-align:right;flex-shrink:0}
.menu-bar{display:flex;gap:6px;margin:16px 0;flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow)}
.menu-cat{position:relative}
.menu-cat-btn{border:none;background:transparent;padding:10px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--font);color:var(--ink);border-radius:10px;white-space:nowrap}
.menu-cat-btn:hover,.menu-cat.open .menu-cat-btn{background:var(--bg,#f3f4f6)}
.menu-cat.open .menu-cat-btn{background:var(--ink);color:#fff}
.menu-drop{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:50;overflow:hidden;padding:6px}
.menu-cat.open .menu-drop{display:block}
.menu-drop button{display:flex;width:100%;text-align:left;border:none;background:transparent;padding:11px 14px;font-size:13.5px;cursor:pointer;font-family:var(--font);color:var(--ink);border-radius:8px;gap:8px;align-items:center}
.menu-drop button:hover{background:var(--bg,#f3f4f6)}
.menu-drop button.activo{background:var(--ink);color:#fff}
.chatpanel-grid{display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid var(--line,#e5e7eb);border-radius:12px;overflow:hidden;min-height:400px}
.chatpanel-lista{border-right:1px solid var(--line,#e5e7eb);overflow-y:auto;max-height:500px;background:var(--bg,#f9fafb)}
.chatpanel-item{display:block;width:100%;text-align:left;border:none;background:transparent;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line,#e5e7eb);font-family:var(--font)}
.chatpanel-item:hover{background:#fff}
.chatpanel-item.sel{background:#e8f5e9;border-left:3px solid #0a7a4f}
.chatpanel-item .who{font-weight:700;font-size:14px}
.chatpanel-item .addr{font-size:12px;color:var(--muted)}
.chatpanel-chat{display:flex;flex-direction:column;min-height:400px}
.chatpanel-head{padding:12px 16px;border-bottom:1px solid var(--line,#e5e7eb);background:var(--bg,#f9fafb)}
.chatpanel-msgs{flex:1;padding:16px;overflow-y:auto;min-height:200px}
.chatpanel-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line,#e5e7eb)}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.dash-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px;border:1.5px solid var(--border,#e5e7eb);border-radius:14px;background:var(--surface,#fff);cursor:pointer;font-family:var(--font);transition:transform .1s,box-shadow .1s}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:#0a7a4f}
.dash-ic{font-size:32px}
.dash-t{font-weight:700;font-size:14px}
.dash-card small{font-size:11.5px;color:var(--muted)}
#pmMenuBar{display:none}
.rep-card{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:linear-gradient(135deg,#fff8e1,#ffecb3);border:1.5px solid #ffd54f;margin-bottom:16px}
.rep-stars{font-size:28px;letter-spacing:2px}
.banner-rot{display:flex;gap:12px;align-items:center;margin-top:18px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#0a7a4f,#0d9d66);color:#fff;position:relative;overflow:hidden}
.banner-ic{font-size:36px;flex-shrink:0}
.banner-rot b{font-size:15px}
.banner-rot p{font-size:13px;opacity:.92;margin:2px 0 0;line-height:1.4}
.banner-dots{position:absolute;bottom:8px;right:12px;display:flex;gap:5px}
.bdot{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.4)}
.bdot.on{background:#fff}
@media(max-width:700px){.chatpanel-grid{grid-template-columns:1fr}.chatpanel-lista{border-right:none;border-bottom:1px solid var(--line,#e5e7eb);max-height:200px}}
.tab{border:1.5px solid #dbe5e2;background:#fff;border-radius:999px;padding:9px 18px;
font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font);color:var(--muted)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;
border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
table.data th{background:var(--ink);color:#fff;text-align:left;padding:12px 10px;font-weight:600}
table.data td{padding:11px 10px;border-top:1px solid #edf1f0;vertical-align:middle}
table.data input,table.data select{border:1px solid #dbe5e2;border-radius:8px;
padding:7px 9px;font-family:var(--font);font-size:16px;width:100%}
@media(max-width:560px){
table.data{font-size:12.5px}
table.data th,table.data td{padding:9px 6px}
table.data select{min-width:96px}
table.data input{min-width:62px}
}
.stat{background:var(--surface,#fff);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px}
.stat .v{font-size:26px;font-weight:700;color:var(--brand)}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:4px}
/* Bottom nav */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;
border-top:1px solid #e4ebe9;display:flex;box-shadow:0 -2px 14px rgba(21,61,66,.06)}
.bottomnav a{flex:1;text-align:center;padding:9px 4px 10px;font-size:10.5px;font-weight:600;
color:var(--muted);display:flex;flex-direction:column;gap:3px;align-items:center}
.bottomnav a .ic{font-size:20px;line-height:1}
.bottomnav a.on{color:var(--brand-text)}
/* Medi FAB */
#mediFab{position:fixed;right:16px;bottom:86px;z-index:60;width:62px;height:62px;
border-radius:50%;border:3px solid #fff;background:#fff;padding:0;cursor:pointer;overflow:hidden;
box-shadow:0 4px 18px rgba(17,138,103,.45)}
#mediFab img{width:100%;height:100%;object-fit:cover;display:block}
#mediSheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
border-radius:22px 22px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.18);
transform:translateY(105%);transition:transform .25s ease;max-height:70vh;overflow:auto}
#mediSheet.open{transform:translateY(0)}
#mediSheet .head{display:flex;align-items:center;gap:10px;padding:16px 18px 8px}
#mediSheet .head .av{width:42px;height:42px;border-radius:50%;background:#fff;
display:grid;place-items:center;border:2px solid #e4ebe9;overflow:hidden}
#mediSheet .head .av img{width:26px;height:26px;display:block}
.medi-row{display:flex;gap:10px;align-items:flex-end;margin:8px 18px}
.medi-row.me{justify-content:flex-end}
.medi-avatar{width:34px;height:34px;border-radius:50%;flex:0 0 34px;object-fit:cover;background:#fff}
.medi-msg{background:var(--bg);border-radius:14px;padding:12px 14px;
font-size:14px;line-height:1.55;max-width:82%}
.medi-msg.me{background:var(--brand-text);color:#fff}
.medi-msg.medi-cards{max-width:88%}
.medi-card .btn{font-size:13px;padding:9px 12px}
.medi-chat{max-height:46vh;overflow-y:auto;padding:2px 0}
.medi-form{display:flex;gap:8px;padding:8px 18px 20px}
.medi-form input{flex:1;border:1.5px solid #dfe7e5;border-radius:999px;padding:11px 16px;
font-family:var(--font);font-size:16px;color:var(--ink)}
.medi-form input:focus{border-color:var(--brand)}
/* A11Y Frente 10: se eliminó `outline:none` — el :focus-visible global
(3px --brand-2) ahora anuncia el foco por teclado (WCAG 2.4.7/2.4.13). */
.medi-form button{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;
background:var(--brand);color:#fff;font-size:18px;cursor:pointer}
.medi-typing{display:inline-flex;gap:5px;padding:4px 2px}
.medi-typing span{width:8px;height:8px;border-radius:50%;background:#9fb3ad;animation:blink 1.1s infinite}
.medi-typing span:nth-child(2){animation-delay:.18s}.medi-typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.medi-qa{display:flex;flex-wrap:wrap;gap:8px;padding:6px 18px 22px}
/* Formulario visual de reserva de cita dentro del chat de Medi */
.medi-actions{padding:0 18px 6px}
.medi-actions .btn{width:100%;justify-content:center}
.medi-book{display:none;flex-direction:column;gap:8px;padding:8px 18px 4px;max-height:52vh;overflow-y:auto}
.medi-book.open{display:flex}
.medi-book-title{font-weight:700;font-size:15px;color:var(--ink)}
.medi-book>label{font-size:12.5px;color:var(--muted);font-weight:600}
.medi-book select,.medi-book input{width:100%;border:1.5px solid #dfe7e5;border-radius:10px;padding:10px 12px;font-family:var(--font);font-size:14px;color:var(--ink);background:#fff}
.medi-book select:focus,.medi-book input:focus{border-color:var(--brand)}
/* A11Y Frente 10: se eliminó `outline:none` — ver nota en .medi-form. */
.medi-book .slots{margin:0}
#mbDays{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
#mbDays .slot b{font-size:13px}
.mb-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mb-err{display:none;color:var(--bad-text);font-size:13px}
/* A11Y Frente 10: antes var(--bad) → 3.76:1 sobre blanco (falla AA). */
/* Toast */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:90px;
z-index:80;background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;
font-size:14px;opacity:0;pointer-events:none;transition:all .25s ease;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Footer */
footer.site{background:var(--ink);color:#cfe3dc;margin-top:30px;padding:34px 0 110px;font-size:13px}
footer.site h4{color:#fff;margin-bottom:8px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media(max-width:640px){footer.site .cols{grid-template-columns:1fr}}
footer.site a{color:#9fd8c2}
footer.site .legal{margin-top:20px;padding-top:16px;border-top:1px solid #2a545b;
font-size:12px;color:#9db8b0;line-height:1.6}
/* B2B band */
.b2b{background:var(--ink);color:#fff;border-radius:24px;padding:30px 26px;
display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:26px 0}
.b2b h3{font-size:20px;margin-bottom:8px}
.b2b p{font-size:14px;color:#cfe3dc;max-width:520px;line-height:1.6}
.b2b .btn{margin-top:4px}
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .big{font-size:44px;margin-bottom:10px}
.note{font-size:12.5px;color:var(--muted);background:#fff8e8;border:1px solid #f5e3b3;
border-radius:12px;padding:12px 14px;margin:14px 0;line-height:1.55}
.note.blue{background:#eaf2fe;border-color:#c3d9fb}
.kv{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;
border-bottom:1px dashed #e6ecea}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600}
@media(min-width:760px){
.bottomnav{left:50%;right:auto;transform:translateX(-50%);bottom:16px;width:auto;
min-width:540px;max-width:94vw;border:1px solid #e4ebe9;border-radius:999px;
box-shadow:0 8px 30px rgba(21,61,66,.14);padding:4px 10px}
.bottomnav a{padding:8px 10px}
#app{padding-bottom:110px}
footer.site{padding-bottom:70px}
#mediFab{right:26px;bottom:104px}
#mediSheet{left:auto;right:24px;bottom:180px;width:400px;max-width:calc(100vw - 48px);
border-radius:22px;box-shadow:0 12px 44px rgba(0,0,0,.22);
transform:translateY(24px);opacity:0;pointer-events:none;
transition:transform .25s ease,opacity .25s ease}
#mediSheet.open{transform:translateY(0);opacity:1;pointer-events:auto}
}
/* Tablet: resultados en 2 columnas */
@media(min-width:700px){
#medResults,#espResults{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
#medResults .result,#espResults .result{margin-bottom:0;height:100%}
}
/* PC: resultados en 3 columnas */
@media(min-width:1100px){
#medResults,#espResults{grid-template-columns:1fr 1fr 1fr}
}
/* Tablas con scroll horizontal en móvil */
@media(max-width:560px){
table.data{display:block;overflow-x:auto;white-space:nowrap}
table.data td,table.data th{white-space:normal;min-width:110px}
}
/* Agenda del profesional: días + horas por servicio */
.dias-grid{display:flex;gap:8px;flex-wrap:wrap}
.dia-chk{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
border:1.5px solid #dbe5e2;border-radius:999px;padding:8px 14px;cursor:pointer;background:#fff}
.dia-chk input{width:17px;height:17px;accent-color:var(--brand);margin:0}
.dia-chk:has(input:checked){border-color:var(--brand);background:#e9f6f1;color:#0c6b50}
.horas-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){.horas-grid{grid-template-columns:1fr}}
.hora-row{display:flex;align-items:center;gap:6px;font-size:13.5px}
.hora-dia{font-weight:600;min-width:34px}
.hora-row input[type="time"]{border:1.5px solid #dbe5e2;border-radius:10px;padding:8px 6px;
font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;flex:1;min-width:0}
.hora-row input[type="time"]:disabled{opacity:.35;background:#f1f5f4}
/* Inventario farmacia */
.inv-card{margin-bottom:14px}
.inv-head{display:flex;gap:12px;align-items:flex-start}
.inv-foto{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:0 0 64px;border:1px solid #e4ebe9;background:#f4f8f7}
.inv-foto-vacia{display:flex;align-items:center;justify-content:center;font-size:26px;color:#9db3ad}
.res-foto{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 52px;border:1px solid #e4ebe9}
/* Modalidad Premium */
.prem{font-size:11px;font-weight:700;color:#9a6b00;background:#fdeec9;border-radius:6px;padding:1px 6px;margin-left:2px}
.b-prem{background:#fdf3d7;color:#8a5a00}
.b-prem .dot{background:#e0a800}
/* Agenda mensual */
.ag-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ag-head{font-size:12px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:4px}
.ag-dia{aspect-ratio:1;border:1.5px solid #e4ebe9;border-radius:12px;background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
font-family:var(--font);font-size:16px;color:var(--ink);cursor:pointer;padding:4px;min-width:0}
.ag-vacia{visibility:hidden}
.ag-hoy{border-color:var(--brand)}
.ag-hoy .ag-num{font-weight:800;color:#0c6b50}
.ag-num{font-size:13.5px;line-height:1.2}
.ag-citas{font-size:10px;font-weight:700;color:#8a5a00;background:#fdf3d7;border-radius:6px;padding:1px 5px;white-space:nowrap;line-height:1.4}
.ag-libre{background:#eef7f3}
.ag-punto{width:7px;height:7px;border-radius:50%;background:#0c6b50}
/* ===== Tira de tasas BCV ===== */
.ticker-tasas{background:#0d3b2e;color:#fff;overflow:hidden;white-space:nowrap;position:relative}
.ticker-tasas.ticker-fija{position:sticky;top:0;z-index:90}
.ticker-tasas .ticker-inner{display:inline-block;padding:8px 0;animation:ticker-scroll 25s linear infinite}
.ticker-tasas .tasa-item{display:inline-block;margin:0 28px;font-size:14px}
.ticker-tasas .tasa-item b{color:#7ee2b8;font-weight:700}
.ticker-tasas .tasa-fuente{opacity:.7;font-size:12px;margin-left:28px}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-tasas:hover .ticker-inner{animation-play-state:paused}
/* ===== Sección salud ===== */
.salud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.nota-salud{background:#fff;border:1px solid #e3efe9;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.nota-salud .cat{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#118A67;background:#e6f5ee;border-radius:20px;padding:3px 10px;align-self:flex-start}
.nota-salud h4{margin:0;font-size:15px;color:#123}
.nota-salud p{margin:0;font-size:13.5px;color:#445;line-height:1.5}
.nota-salud .fuente{margin-top:auto;font-size:12px;color:#888}
.nota-salud .fuente a{color:#118A67;text-decoration:none;font-weight:600}
.salud-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.salud-filtros button{border:1px solid #cfe5d8;background:#fff;color:#118A67;border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer}
.salud-filtros button.on{background:#118A67;color:#fff;border-color:#118A67}
/* ============ Carrusel hero ============ */
.carrusel{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(135deg,#0d7a4f,#0a5c3c);margin:18px 0;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.carr-track{display:flex;transition:transform .5s ease}
.carr-slide{flex:0 0 100%;padding:28px 48px 40px;text-align:center;color:#fff}
.carr-slide[data-go]{cursor:pointer}
.carr-slide.carr-medi{display:flex;align-items:center;gap:14px;text-align:left}
.carr-medi-img{width:110px;height:150px;object-fit:cover;object-position:top;border-radius:14px;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.carr-medi-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.carr-medi-txt h3{margin:0 0 8px;text-align:left}
.carr-medi-txt p{margin:0 0 14px;text-align:left;max-width:100%}
.carr-medi-txt .carr-cta{align-self:center}
.carr-emoji{font-size:44px;margin-bottom:8px}
.carr-slide h3{margin:0 0 8px;font-size:20px;color:#fff}
.carr-slide p{margin:0 0 14px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.92);max-width:520px;margin-left:auto;margin-right:auto}
.carr-slide p b{color:#fff}
.carr-cta{display:inline-block;background:#fff;color:#0a5c3c;font-weight:700;font-size:14px;padding:10px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.carr-cta:hover{background:#e8f5ee}
.carr-flecha{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);color:#fff;border:0;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
.carr-flecha:hover{background:rgba(255,255,255,.35)}
.carr-prev{left:8px}
.carr-next{right:8px}
.carr-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.carr-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.carr-dots button.on{background:#fff;transform:scale(1.25)}
@media(max-width:560px){.carr-slide{padding:22px 40px 38px}.carr-slide h3{font-size:17px}.carr-emoji{font-size:36px}}
/* Logo oficial */
.logo-oficial{max-width:280px;width:70%;height:auto;display:block;margin:0 auto 8px;border-radius:18px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
header .logo, .site-header .logo{max-height:52px;width:auto;border-radius:10px}
/* Presentación de Medi en el hero */
.medi-presenta{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#e8f8f0,#d4efe2);border-radius:16px;padding:18px;margin:16px 0}
.medi-presenta-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 72px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.medi-presenta h3{margin:0 0 6px;font-size:17px}
.medi-presenta p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:#2c4a3e}
/* Botones de servicios dentro del chat de Medi */
.medi-servicios{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.medi-serv-btn{background:#e8f8f0;border:1px solid #bfe6cd;color:#0a5c3c;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.medi-serv-btn:hover{background:#d4efe2}
.medi-serv-btn:active{transform:scale(.96)}
/* Centro de comunicaciones (consultorio) */
.comm-layout{display:flex;min-height:calc(100vh - 120px);max-width:1100px;margin:0 auto;background:#fff;border-radius:0;overflow:hidden}
.comm-list{width:320px;flex:0 0 320px;border-right:1px solid #e2ece7;display:flex;flex-direction:column;background:#fff}
.comm-search{padding:10px;border-bottom:1px solid #eef2f0}
.comm-search input{width:100%;font-family:inherit;font-size:13px;padding:9px 12px;border:1.5px solid #dbe7e1;border-radius:10px;background:#f8fbfa}
.comm-filters{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid #eef2f0}
.comm-filters button{border:none;background:#eef4f1;font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;color:#5a7a6c}
.comm-filters button.on{background:#118A67;color:#fff}
.conv{display:flex;gap:10px;padding:11px;border-bottom:1px solid #f0f4f2;cursor:pointer;align-items:center}
.conv:hover{background:#f6faf8}.conv.on{background:#e8f6ef;border-left:4px solid #118A67}
.conv .pa{width:42px;height:42px;border-radius:50%;background:#d7ece2;color:#0d6b4e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 42px}
.conv .inf{flex:1;min-width:0}.conv .inf .nm{font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.conv .inf .lm{font-size:11.5px;color:#6b8578;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{background:#e11d48;color:#fff;font-size:10.5px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.comm-chat{flex:1;display:flex;flex-direction:column;background:#f7faf8;min-width:0;min-height:60vh}
.chat-hdr{background:#fff;padding:10px 14px;border-bottom:1px solid #e2ece7;display:flex;align-items:center;gap:10px}
.chat-hdr .pa{width:44px;height:44px;border-radius:50%;background:#d7ece2;color:#0d6b4e;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 44px}
.chat-hdr .inf{flex:1;min-width:0}.chat-hdr .inf b{font-size:13.5px}.chat-hdr .inf div{font-size:11px;color:#6b8578}
.call-btns{display:flex;gap:8px}
.cbtn{border:none;width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.cbtn.voice{background:#e8f8f0}.cbtn.video{background:#118A67;color:#fff}
.composer{background:#fff;border-top:1px solid #e2ece7;padding:10px 12px;display:flex;gap:8px;align-items:center}
.composer input{flex:1;font-family:inherit;font-size:13.5px;padding:11px 14px;border:1.5px solid #dbe7e1;border-radius:999px;background:#f8fbfa;min-width:0}
.ibtn{border:none;background:#eef4f1;width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;flex:0 0 42px;font-family:inherit}
.ibtn.send{background:#118A67;color:#fff}
.comm-hist{width:270px;flex:0 0 270px;background:#fff;border-left:1px solid #e2ece7;padding:14px;overflow-y:auto}
.comm-hist h4{font-size:13px;margin-bottom:8px;color:#0d5c43}
.doc-item{display:flex;gap:8px;align-items:center;background:#f6faf8;border-radius:10px;padding:8px 10px;font-size:12px;margin-bottom:6px}
@media(max-width:900px){.comm-hist{display:none!important}.comm-list{width:280px;flex-basis:280px}}
@media(max-width:640px){.comm-layout{flex-direction:column}.comm-list{width:100%;flex:none;max-height:40vh}}
/* ===== Modo oscuro ===== */
[data-tema="oscuro"]{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--ink:#e2e8f0}
[data-tema="oscuro"] body{background:#0f172a;color:#f1f5f9}
[data-tema="oscuro"] .card{background:#1e293b;border-color:#334155;color:#f1f5f9}
[data-tema="oscuro"] input,[data-tema="oscuro"] select,[data-tema="oscuro"] textarea{background:#0f172a;color:#f1f5f9;border-color:#334155}
[data-tema="oscuro"] .tab{background:#1e293b;color:#f1f5f9;border-color:#334155}
[data-tema="oscuro"] .tab.on{background:#0c6b50;color:#fff}
[data-tema="oscuro"] header{background:#1e293b;border-color:#334155}
/* ════════════════════════════════════════════════════════════════════
MEDICERCA DESIGN SYSTEM v1.0 — Frente 2 (2026-10-04)
────────────────────────────────────────────────────────────────────
CONVENCIÓN: clases nuevas con prefijo `mc-`. Las clases existentes
(.btn, .badge, .card, .tab, .empty, #toast, .chip…) se MANTIENEN por
compatibilidad; los componentes mc-* son la vía recomendada para
código nuevo. Los fixes de la auditoría UX (b-pink, dark theme)
están marcados con [FIX-AUDIT].
Índice:
§1 Tokens de diseño (color, tipografía, radius, spacing, sombras)
§2 Fixes de auditoría (b-pink + tema oscuro)
§3 Componentes mc-* (btn, input, card, table, modal, badge,
alert, skeleton, tabs, tooltip, pagination, chips, search,
breadcrumb, drawer, toast, empty)
§4 Iconografía (convención emoji por concepto)
§5 Estados, foco y táctil (a11y)
════════════════════════════════════════════════════════════════════ */
/* ── §1 TOKENS ──────────────────────────────────────────────────────
Color de marca verificado (2026-10-04): el verde primario REAL de la
marca MediCerca es #118A67 (verde aguamarina, 10 usos en este CSS y
--brand). #0E9F6E no aparece en el código: NO se adopta.
Breakpoints usados en la app (documentados; CSS no permite vars en
@media): móvil ≤560px · tablet ≤720px · desktop ≥1100px. */
:root{
/* — Brand (Brand Book §21) — */
--brand:#118A67; /* primario: verde aguamarina MediCerca */
--brand-2:#20B8A6; /* secundario: turquesa (foco, acentos) */
--brand-deep:#0C6B50; /* alias de --brand-text: texto/botones AA */
--brand-text:#0C6B50; /* 6.49:1 sobre blanco (WCAG AA texto) */
/* — Estados funcionales (base) — */
--ok:#22C55E; --warn:#F59E0B; --bad:#EF4444; --info:#3B82F6;
--pink:#EC4899;
/* — Estados: fondo suave + texto fuerte (badges, alerts) — */
--ok-bg:#e7f8ee; --ok-text:#15803d;
--warn-bg:#fef4e2; --warn-text:#b45309;
--bad-bg:#fdecec; --bad-text:#b91c1c;
--info-bg:#e8f1fe; --info-text:#1d4ed8;
--pink-bg:#fce7f3; --pink-text:#be185d;
--neutral-bg:#eef2f1; --neutral-text:#5F6E68;
/* A11Y Frente 10: --neutral-text era #6A7470 (4.28:1 sobre --neutral-bg,
falla AA). #5F6E68 da 4.75:1 sobre #eef2f1 y 5.36:1 sobre blanco. */
/* — Superficies y fondos (light) — */
--surface:#FFFFFF; /* cards, paneles, modales */
--surface-2:#F4F8F7; /* secundaria (= --bg) */
--card:#FFFFFF; /* alias usado por .menu-bar/.chatpanel */
--line:#e4ebe9; /* alias usado por .menu-bar/.chatpanel */
--border:#e4ebe9; /* unifica #e4ebe9/#dbe5e2/#e5e7eb */
--border-strong:#c3d2cd;
/* — Tipografía — */
--font:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
--fs-xs:12px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:18px;
--fs-xl:22px; --fs-2xl:28px;
--lh-tight:1.25; --lh-body:1.55;
/* — Radius — */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
/* --r-card:16px y --r-btn:12px ya existían; se conservan como alias */
/* --r-card == --r-lg · --r-btn == --r-md */
/* — Spacing (escala 4px) — */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
/* — Sombras — */
--shadow-sm:0 1px 6px rgba(21,61,66,.08);
--shadow-lg:0 12px 34px rgba(21,61,66,.16);
/* --shadow ya existía (0 2px 14px rgba(21,61,66,.08)) */
/* — Skeleton — */
--sk-bg:#e6ecea;
}
/* ── §1b TOKENS TEMA OSCURO ──────────────────────────────────────────
El toggle #btn-tema pone data-tema="oscuro" en . Todo lo nuevo
DEBE usar variables: jamás hardcodear #fff/#000 en componentes. */
[data-tema="oscuro"]{
--surface:#1e293b; --surface-2:#0f172a;
--card:#1e293b; --line:#334155;
--border:#334155; --border-strong:#475569;
--shadow:0 2px 14px rgba(0,0,0,.38);
--shadow-sm:0 1px 6px rgba(0,0,0,.4);
--shadow-lg:0 12px 34px rgba(0,0,0,.5);
--sk-bg:#2b3a52;
/* Estados en oscuro: tinte translúcido + texto claro legible */
--ok-bg:rgba(34,197,94,.15); --ok-text:#4ade80;
--warn-bg:rgba(245,158,11,.15); --warn-text:#fbbf24;
--bad-bg:rgba(239,68,68,.15); --bad-text:#f87171;
--info-bg:rgba(59,130,246,.18); --info-text:#93c5fd;
--pink-bg:rgba(236,72,153,.16); --pink-text:#f9a8d4;
--neutral-bg:rgba(148,163,184,.16); --neutral-text:#cbd5e1;
}
/* ── §2 FIXES DE AUDITORÍA ────────────────────────────────────────── */
/* [FIX-AUDIT] .badge.b-pink se usaba en app.js (promo farmacia, plan/
trial médico) sin definición → se renderizaba sin color. */
.badge.b-pink,.b-pink{background:var(--pink-bg);color:var(--pink-text)}
.badge.b-pink .dot,.b-pink .dot{background:var(--pink)}
/* [FIX-AUDIT] .dash-card tenía background:#fff fijo → ilegible en
oscuro. Ahora usa --surface (editado en la regla original) + borde
con variable en oscuro. */
[data-tema="oscuro"] .dash-card{border-color:var(--border)}
[data-tema="oscuro"] .dash-card:hover{border-color:var(--brand-2)}
/* [FIX-AUDIT] .stat tenía background:#fff fijo (editado a --surface).
El valor .v usaba --brand (#118A67) con bajo contraste sobre
#1e293b → en oscuro usa --brand-2. */
[data-tema="oscuro"] .stat .v{color:var(--brand-2)}
/* [FIX-AUDIT] .rep-card: gradiente amarillo claro + --ink claro en
oscuro = texto ilegible. Override oscuro con fondo ámbar profundo. */
[data-tema="oscuro"] .rep-card{
background:linear-gradient(135deg,#4a3a08,#6b530a);
border-color:#a37f0f;color:#ffefa8}
/* ── §3 COMPONENTES mc-* ──────────────────────────────────────────── */
/* — mc-btn: botón del sistema.
Uso:
Variantes: --primary · --outline · --ghost · --danger · --sm.
Toda variante lleva icono+texto cuando el estado lo requiere. */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:11px 20px;border-radius:var(--r-md);
font-family:var(--font);font-size:14.5px;font-weight:600;cursor:pointer;
border:1.5px solid transparent;background:var(--surface-2);color:var(--ink);
text-decoration:none;white-space:nowrap;transition:background .12s ease,transform .12s ease}
.mc-btn:hover{transform:translateY(-1px)}
.mc-btn:active{transform:translateY(0)}
.mc-btn:disabled,.mc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.mc-btn--primary{background:var(--brand-text);color:#fff}
.mc-btn--primary:hover{background:#0a5a44}
.mc-btn--outline{background:transparent;border-color:var(--brand);color:var(--brand-text)}
.mc-btn--outline:hover{background:var(--ok-bg)}
.mc-btn--ghost{background:transparent;color:var(--ink)}
.mc-btn--ghost:hover{background:var(--surface-2)}
.mc-btn--danger{background:var(--bad-text);color:#fff}
.mc-btn--danger:hover{background:#991b1b}
/* A11Y Frente 10: antes background:var(--bad) → blanco sobre #EF4444 =
3.76:1 (falla AA). Con --bad-text (#b91c1c): 6.47:1. */
.mc-btn--sm{min-height:36px;padding:7px 14px;font-size:13px;border-radius:10px}
.mc-btn--block{width:100%}
/* — mc-input / mc-select / mc-textarea: controles de formulario.
Uso:
…
/
…
Regla: font-size 16px en inputs para evitar zoom en iOS. */
.mc-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.mc-input,.mc-select,.mc-textarea{width:100%;border:1.5px solid var(--border);
border-radius:var(--r-md);padding:12px 14px;font-family:var(--font);
font-size:16px;background:var(--surface);color:var(--ink);min-height:44px}
.mc-textarea{min-height:96px;resize:vertical}
.mc-input:focus,.mc-select:focus,.mc-textarea:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
.mc-input[aria-invalid="true"],.mc-select[aria-invalid="true"]{border-color:var(--bad)}
.mc-input::placeholder{color:var(--muted);opacity:.8}
.mc-hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.mc-error{font-size:12.5px;color:var(--bad-text);font-weight:600;margin-top:4px}
/* — mc-card: tarjeta contenedora (reemplazo recomendado de .card en
código nuevo; .card se conserva por compatibilidad). */
.mc-card{background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.mc-card__title{font-size:16px;font-weight:700;margin-bottom:6px}
.mc-card__sub{font-size:13px;color:var(--muted);margin-bottom:12px}
/* — mc-table: tabla responsive.
Uso:
…
El wrapper da scroll-x en móvil (fix auditoría: tablas crudas sin
contenedor). Para tablas legacy, envolver en .mc-table-wrap basta. */
.mc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--border);border-radius:var(--r-lg);
box-shadow:var(--shadow);background:var(--surface);margin-bottom:14px}
.mc-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.mc-table caption{text-align:left;font-weight:700;font-size:14px;padding:12px 14px 4px}
.mc-table th{background:var(--ink);color:#fff;text-align:left;padding:12px 10px;
font-weight:600;white-space:nowrap}
.mc-table td{padding:11px 10px;border-top:1px solid var(--border);vertical-align:middle}
.mc-table tbody tr:hover{background:var(--surface-2)}
.mc-table--numeric td:last-child,.mc-table--numeric th:last-child{text-align:right}
/* — mc-modal: diálogo.
Uso:
Título
…
…
El JS que lo abre DEBE: añadir .open, mover el foco al dialog,
cerrar con Escape y devolver el foco al disparador (el modal
genérico de app.js:1385 se migrará a este patrón). */
.mc-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;
justify-content:center;padding:20px}
.mc-modal.open{display:flex}
.mc-modal__backdrop{position:absolute;inset:0;background:rgba(10,25,22,.55)}
.mc-modal__dialog{position:relative;background:var(--surface);color:var(--ink);
border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
max-width:480px;width:100%;max-height:86vh;overflow-y:auto;padding:22px}
.mc-modal__dialog h3{font-size:17px;margin-bottom:8px;padding-right:28px}
.mc-modal__close{position:absolute;top:12px;right:12px;width:44px;height:44px;
border-radius:50%;border:0;background:var(--surface-2);color:var(--ink);
font-size:18px;cursor:pointer;display:grid;place-items:center}
.mc-modal__close:hover{background:var(--border)}
.mc-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
@media(max-width:560px){.mc-modal{align-items:flex-end;padding:0}
.mc-modal__dialog{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0}}
/* — mc-badge: insignia de estado. SIEMPRE texto + (icono opcional con
aria-hidden). Variantes: --success · --warning · --error · --info
· --neutral · --pink. .badge/.b-* legacy se conservan. */
.mc-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
font-weight:600;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
.mc-badge__ic{font-style:normal;line-height:1}
.mc-badge__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.mc-badge--success{background:var(--ok-bg);color:var(--ok-text)}
.mc-badge--warning{background:var(--warn-bg);color:var(--warn-text)}
.mc-badge--error{background:var(--bad-bg);color:var(--bad-text)}
.mc-badge--info{background:var(--info-bg);color:var(--info-text)}
.mc-badge--neutral{background:var(--neutral-bg);color:var(--neutral-text)}
.mc-badge--pink{background:var(--pink-bg);color:var(--pink-text)}
/* — mc-alert: mensaje de estado en página. Estructura: icono (con
aria-hidden) + texto; nunca solo color.
Uso:
⚠️
…
*/
.mc-alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);
padding:12px 14px;font-size:13.5px;line-height:var(--lh-body);
border:1px solid;margin:12px 0}
.mc-alert__ic{font-size:18px;flex:0 0 auto;line-height:1.4}
.mc-alert--success{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-text)}
.mc-alert--warning{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-text)}
.mc-alert--error{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-text)}
.mc-alert--info{background:var(--info-bg);border-color:var(--info);color:var(--info-text)}
.mc-alert--neutral{background:var(--neutral-bg);border-color:var(--border-strong);color:var(--neutral-text)}
.mc-alert b{font-weight:700}
/* — mc-skeleton: placeholder de carga SIN layout shift.
Uso:
Regla: fijar width/height inline para reservar el espacio; el texto
"Cargando…" plano se reemplaza por skeletons + aria-busy en el
contenedor. */
.mc-skeleton{position:relative;overflow:hidden;background:var(--sk-bg);
border-radius:8px;min-height:14px}
.mc-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
animation:mc-shimmer 1.4s infinite}
@keyframes mc-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.mc-skeleton::after{animation:none}}
/* — mc-tabs: tabs accesibles (fix auditoría: role=tablist/tab/tabpanel,
aria-selected, scroll horizontal en móvil en vez de wrap en 6 filas).
Uso:
…
…
El JS debe sincronizar el tab con el hash (pendiente: helper tabSync). */
.mc-tabs__list{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;
scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mc-tabs__tab{flex:0 0 auto;min-height:44px;border:1.5px solid var(--border);
background:var(--surface);border-radius:var(--r-pill);padding:9px 18px;
font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font);
color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.mc-tabs__tab:hover{border-color:var(--brand)}
.mc-tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mc-tabs__count{background:var(--neutral-bg);color:var(--neutral-text);
border-radius:var(--r-pill);
font-size:11px;font-weight:700;padding:2px 8px;min-width:24px;text-align:center}
/* A11Y Frente 10: antes background:rgba(127,127,127,.25) sin color propio →
el texto heredado (--muted) quedaba en 3.63:1 (falla AA). Con
--neutral-bg/--neutral-text: 4.75:1 en claro, 7.40:1 en oscuro. */
.mc-tabs__tab[aria-selected="true"] .mc-tabs__count{background:rgba(255,255,255,.25)}
.mc-tabs__panel{padding-top:8px}
.mc-tabs__panel[hidden]{display:none}
/* — mc-tooltip: tooltip CSS puro.
Uso:
Solo para info complementaria; nunca para contenido esencial. */
.mc-tooltip{position:relative}
.mc-tooltip[data-tip]:hover::after,.mc-tooltip[data-tip]:focus-visible::after{
content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;
font-weight:600;padding:7px 11px;border-radius:8px;white-space:nowrap;z-index:95;
pointer-events:none;box-shadow:var(--shadow)}
[data-tema="oscuro"] .mc-tooltip[data-tip]:hover::after,
[data-tema="oscuro"] .mc-tooltip[data-tip]:focus-visible::after{background:#0b1220;border:1px solid var(--border)}
/* — mc-pagination: paginación.
Uso: */
.mc-pagination{display:flex;gap:6px;align-items:center;justify-content:center;
margin:18px 0;flex-wrap:wrap}
.mc-page{min-width:44px;height:44px;padding:0 12px;border:1.5px solid var(--border);
background:var(--surface);border-radius:var(--r-md);font-family:var(--font);
font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center}
.mc-page:hover{border-color:var(--brand)}
.mc-page[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mc-page:disabled{opacity:.4;cursor:not-allowed}
.mc-page__ellipsis{padding:0 4px;color:var(--muted)}
/* — mc-chips: filtros por chips (extiende el patrón .chip existente).
Uso:
… */
.mc-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.mc-chip{border:1.5px solid var(--border);background:var(--surface);
border-radius:var(--r-pill);padding:8px 14px;min-height:44px;font-size:13px;
font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font);
display:inline-flex;align-items:center;gap:6px}
.mc-chip:hover{border-color:var(--brand);color:var(--ink)}
.mc-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mc-chip__count{font-size:11px}
/* A11Y Frente 10: se eliminó `opacity:.75` — el contador heredado quedaba en
2.99:1 (falla AA); a opacidad plena hereda --muted/blanco con 4.83:1+. */
/* — mc-search: buscador con icono.
Uso:
🔍
(El debounce vive en JS; el componente solo da la piel.) */
.mc-search{position:relative;display:flex;align-items:center}
.mc-search>span[aria-hidden]{position:absolute;left:14px;font-size:17px;pointer-events:none;opacity:.7}
.mc-search__input{width:100%;border:1.5px solid var(--border);border-radius:var(--r-md);
padding:12px 14px 12px 42px;font-family:var(--font);font-size:16px;
background:var(--surface);color:var(--ink);min-height:44px}
.mc-search__input:focus{outline:2px solid var(--brand-2);border-color:var(--brand)}
/* — mc-breadcrumb: migas de pan.
Uso: */
.mc-breadcrumb{display:flex;flex-wrap:wrap;gap:4px;list-style:none;
font-size:13px;margin:6px 0 12px;padding:0;align-items:center}
.mc-breadcrumb li{display:flex;align-items:center;gap:4px;color:var(--muted)}
.mc-breadcrumb li+li::before{content:"›";color:var(--muted);font-weight:700}
.mc-breadcrumb a{color:var(--brand-text);font-weight:600}
.mc-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}
/* — mc-drawer: panel lateral deslizante (filtros avanzados, detalle).
Uso:
…
El JS añade .open y gestiona foco/Escape igual que mc-modal. */
.mc-drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;
width:min(380px,94vw);background:var(--surface);color:var(--ink);
border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
transform:translateX(105%);transition:transform .25s ease;
display:flex;flex-direction:column}
.mc-drawer.open{transform:none}
.mc-drawer__head{display:flex;align-items:center;gap:10px;padding:16px 18px;
border-bottom:1px solid var(--border)}
.mc-drawer__head h3{font-size:16px;margin:0;flex:1}
.mc-drawer__body{flex:1;overflow-y:auto;padding:16px 18px}
.mc-drawer__foot{padding:14px 18px;border-top:1px solid var(--border);
display:flex;gap:10px}
.mc-drawer__foot .mc-btn{flex:1}
@media(prefers-reduced-motion:reduce){.mc-drawer{transition:none}}
/* — mc-toast: mejora del #toast existente (role="status" ya en index).
Uso desde JS: toast() añade .mc-toast--success|--error|--info y un
icono decorativo al inicio del mensaje.
(No se toca el JS de toast() en este frente: solo la piel.) */
#toast.mc-toast--success{background:var(--ok-text)}
#toast.mc-toast--error{background:var(--bad-text)}
#toast.mc-toast--info{background:var(--info-text)}
#toast .mc-toast__ic{margin-right:8px}
/* — mc-empty: estado vacío (mejora del patrón .empty > .big).
Uso:
📦
Sin resultados
…
*/
.mc-empty{text-align:center;padding:44px 20px;color:var(--muted);max-width:420px;margin:0 auto}
.mc-empty__ic{font-size:44px;margin-bottom:10px;line-height:1}
.mc-empty h3{font-size:16px;color:var(--ink);margin-bottom:6px}
.mc-empty p{font-size:13.5px;line-height:var(--lh-body);margin-bottom:14px}
/* ── FRENTE 9 · TRANSVERSAL ──────────────────────────────────────────
Estilos para los helpers mc* del frente 9 (app.js §§9.1–9.8).
Solo composición visual; sin cambios a lógica de negocio. */
/* — mc-empty__cta: contenedor de CTAs en empty states. */
.mc-empty__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:2px}
/* — mc-toast__retry: botón [Reintentar] dentro del toast (FRENTE 9).
El toast base tiene pointer-events:none: al mostrarse (.show) debe ser
clicable (PATCH-02 + botón de reintentar). */
#toast.show{pointer-events:auto}
.mc-toast__retry{margin-left:10px;padding:8px 14px;border-radius:999px;
border:1.5px solid rgba(255,255,255,.75);background:rgba(255,255,255,.16);
color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:44px}
.mc-toast__retry:hover{background:rgba(255,255,255,.28)}
.mc-toast__retry:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
/* — mc-notifcenter (FRENTE 9): lista de notificaciones.
Se monta sobre .mc-drawer (lado derecho por defecto) + .mc-drawer-backdrop. */
.mc-notifcenter__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mc-notifcenter__head h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.mc-notif{display:flex;gap:12px;padding:14px;border:1px solid var(--border);
border-radius:var(--r-md);background:var(--surface);margin-bottom:10px}
.mc-notif--nueva{border-left:3px solid var(--brand-2)}
.mc-notif__ic{font-size:26px;line-height:1.25;flex:none}
.mc-notif__body{flex:1;min-width:0}
.mc-notif__top{display:flex;align-items:center;gap:8px;font-size:14px}
.mc-notif__top b{flex:1}
.mc-notif__dot{width:9px;height:9px;border-radius:50%;background:var(--brand-2);flex:none}
.mc-notif__body>p{font-size:13px;color:var(--muted);margin:4px 0 8px;line-height:1.5}
.mc-notif__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.mc-notif__meta time{font-size:12px;color:var(--muted)}
/* — mc-medi-help (FRENTE 9): acceso contextual a Medi dentro de paneles.
Franja discreta, sin autoplay ni overlays; Medi hereda los permisos del
usuario (solo abre el sheet existente). */
.mc-medi-help{display:flex;align-items:center;gap:12px;padding:12px 14px;
border:1px dashed var(--border-strong);border-radius:var(--r-md);
background:var(--surface);margin:14px 0}
.mc-medi-help__img{width:44px;height:44px;border-radius:50%;flex:none}
.mc-medi-help__txt{flex:1;min-width:0}
.mc-medi-help__txt b{font-size:14px}
.mc-medi-help__txt p{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.45}
@media(max-width:560px){.mc-medi-help{flex-wrap:wrap}.mc-medi-help .mc-btn{width:100%}}
/* — mc-qa (FRENTE 9): quick actions transversales. */
.mc-qa{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
/* ── §4 ICONOGRAFÍA ─────────────────────────────────────────────────
La app usa emoji como iconografía (aceptable y consistente). REGLA:
un concepto = un emoji, siempre el mismo en todos los paneles. Los
emoji puramente decorativos llevan aria-hidden="true" en el HTML.
Mapa oficial concepto → emoji:
Salud general / Medi ......... 🩺 Citas .................. 📅
Medicamentos ................. 💊 Farmacia ............... 🏪
Especialista / médico ........ 👩⚕️ Consultorio ............ 🏥
Proveedor B2B ................ 🏭 Paciente ............... 🧑
Analíticas / reportes ........ 📊 Pagos / suscripción .... 💳
Pedidos ...................... 📦 Inventario / stock ..... 📋
Alertas / notificaciones ..... 🔔 Comunicación / chat .... 💬
Configuración ................ ⚙️ Ayuda .................. ❓
Buscar ....................... 🔍 Éxito .................. ✅
Advertencia ................... ⚠️ Error .................. ❌
Info ......................... ℹ️ Demo ................... 🧪
Reputación / estrellas ....... ⭐ Teléfono ............... 📞
Videollamada ................. 📹 Ubicación .............. 📍
PROHIBIDO: mezclar estilos (no combinar emoji + SVG + texto-icono
para el mismo concepto), no usar emoji distintos para lo mismo
(ej. "📊 Analíticas" y "📊 Resumen" duplicados → renombrar uno). */
/* ── §5 ESTADOS, FOCO Y TÁCTIL (a11y) ───────────────────────────────
- :focus-visible global ya definido arriba (3px --brand-2, WCAG 2.2).
- Estados de carga: skeletons + aria-busy, no texto plano.
- Touch targets: mínimo 44px en controles interactivos (móvil). */
@media(max-width:560px){
.mc-btn,.mc-tabs__tab,.mc-chip,.mc-page{min-height:44px}
.mc-modal__actions .mc-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.mc-btn{transition:none}
}
/* ── §6 LAYOUT COMPARTIDO DE PANELES (mc-panel) — FRENTE 3 (2026-10-04) ──
Estructura visual del helper mcPanelShell() (app.js). Solo layout:
sidebar + topbar + contenido en desktop (≥721px); drawer + topbar
compacta en móvil (≤720px). Sin lógica de negocio. Todo por variables
(respeta data-tema oscuro). Contratos a11y: skip link, nav con
aria-label, aria-current en el ítem activo, hamburguesa con
aria-expanded, drawer role=dialog con Escape y retorno de foco. */
/* Skip link: visible solo al recibir foco */
.mc-skip{position:absolute;left:12px;top:-64px;z-index:200;background:var(--brand-text);
color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;
text-decoration:none;transition:top .15s ease}
.mc-skip:focus{top:12px;color:#fff}
/* Contenedor: sidebar + columna principal */
.mc-panel{display:grid;grid-template-columns:284px minmax(0,1fr);align-items:start;gap:0}
.mc-panel--collapsed{grid-template-columns:88px minmax(0,1fr)}
/* — Sidebar (desktop) — */
.mc-panel__side{position:sticky;top:76px;max-height:calc(100dvh - 92px);overflow-y:auto;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
margin:16px 0 16px 16px;padding:14px 10px;display:flex;flex-direction:column;gap:4px;
box-shadow:var(--shadow-sm)}
.mc-panel__brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;
border-bottom:1px solid var(--border);margin-bottom:6px}
.mc-panel__brand img{width:34px;height:34px;flex:none}
.mc-panel__brandname{font-weight:700;font-size:16px;color:var(--ink)}
.mc-panel__collapse{margin-left:auto;width:34px;height:34px;flex:none;border-radius:10px;
border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.mc-panel__collapse:hover{color:var(--brand-text);border-color:var(--brand)}
.mc-panel__module{padding:2px 10px 8px}
.mc-panel__modname{font-size:12.5px;font-weight:700;color:var(--brand-text);
text-transform:uppercase;letter-spacing:.4px}
/* Navegación del sidebar */
.mc-panel__nav{flex:1}
.mc-panel__navsec{margin-bottom:10px}
.mc-panel__navsec-t{display:block;font-size:11.5px;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:.5px;padding:8px 12px 4px}
.mc-panel__navlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mc-panel__navitem{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
padding:10px 12px;border-radius:12px;color:var(--ink);font-size:14px;font-weight:600;
font-family:inherit;text-decoration:none;background:transparent;border:0;cursor:pointer;
text-align:left}
.mc-panel__navitem:hover{background:var(--surface-2)}
.mc-panel__navitem.on{background:var(--ok-bg);color:var(--brand-text)}
[data-tema="oscuro"] .mc-panel__navitem.on{color:var(--brand-2)}
.mc-panel__navic{font-size:18px;width:24px;text-align:center;flex:none;line-height:1}
.mc-panel__navlabel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-panel__navbadge{margin-left:auto;flex:none}
/* Sidebar colapsado: solo iconos */
.mc-panel--collapsed .mc-panel__navlabel,
.mc-panel--collapsed .mc-panel__brandname,
.mc-panel--collapsed .mc-panel__modname,
.mc-panel--collapsed .mc-panel__navsec-t{display:none}
.mc-panel--collapsed .mc-panel__navitem{justify-content:center;padding:10px 6px}
.mc-panel--collapsed .mc-panel__navbadge{display:none}
.mc-panel--collapsed .mc-panel__brand{justify-content:center}
.mc-panel--collapsed .mc-panel__collapse{margin-left:0}
/* Pie del sidebar: ayuda / configuración / cerrar sesión */
.mc-panel__sidefoot{margin-top:auto;border-top:1px solid var(--border);padding-top:8px;
display:flex;flex-direction:column;gap:2px}
.mc-panel__footitem{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
padding:10px 12px;border-radius:12px;color:var(--muted);font-size:13.5px;font-weight:600;
font-family:inherit;text-decoration:none;background:transparent;border:0;cursor:pointer;text-align:left}
.mc-panel__footitem:hover{background:var(--surface-2);color:var(--ink)}
.mc-panel__footitem.mc-panel__logout:hover{color:var(--bad-text);background:var(--bad-bg)}
.mc-panel--collapsed .mc-panel__footitem{justify-content:center;padding:10px 6px}
/* — Columna principal + topbar — */
.mc-panel__main{min-width:0}
.mc-panel__topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;
background:var(--surface);border-bottom:1px solid var(--border)}
.mc-panel__hamb{display:none;width:44px;height:44px;flex:none;border-radius:12px;
border:1px solid var(--border);background:var(--surface);color:var(--ink);
font-size:20px;cursor:pointer;align-items:center;justify-content:center}
.mc-panel__topbar .mc-breadcrumb{margin:0}
.mc-panel__search{margin-left:auto;min-width:180px;max-width:320px}
.mc-panel__notif{position:relative;width:44px;height:44px;flex:none;border-radius:12px;
border:1px solid var(--border);background:var(--surface);color:var(--ink);
font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mc-panel__notif:hover{border-color:var(--brand)}
.mc-panel__notifbadge{position:absolute;top:-8px;right:-8px}
/* Usuario + menú de cuenta */
.mc-panel__user{position:relative;flex:none}
.mc-panel__userbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--border);
background:var(--surface);border-radius:999px;padding:5px 14px 5px 5px;cursor:pointer;
font-family:inherit}
.mc-panel__userbtn:hover{border-color:var(--brand)}
.mc-panel__avatar{width:36px;height:36px;border-radius:50%;background:var(--brand-text);
/* A11Y Frente 10: antes var(--brand) → blanco sobre #118A67 = 4.33:1 (falla AA
para las iniciales de 14px). Con --brand-text: 6.49:1. */
color:#fff;display:inline-flex;align-items:center;justify-content:center;
font-weight:700;font-size:14px;flex:none}
.mc-panel__uname{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.mc-panel__uname b{font-size:13.5px;color:var(--ink)}
.mc-panel__uname small{font-size:11.5px;color:var(--muted)}
.mc-panel__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:60;
background:var(--surface);border:1px solid var(--border);border-radius:14px;
box-shadow:var(--shadow-lg);padding:6px}
.mc-panel__menuitem{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
background:transparent;border:0;cursor:pointer;font-family:inherit;text-align:left}
.mc-panel__menuitem:hover{background:var(--surface-2)}
.mc-panel__menuitem.mc-panel__logout:hover{color:var(--bad-text);background:var(--bad-bg)}
/* — Contenido — */
.mc-panel__content{padding:20px;max-width:1240px}
.mc-panel__head{display:flex;justify-content:space-between;align-items:flex-start;
gap:14px;flex-wrap:wrap;margin-bottom:18px}
.mc-panel__title{font-size:22px;margin:0;color:var(--ink)}
.mc-panel__sub{font-size:13.5px;color:var(--muted);margin:4px 0 0}
.mc-panel__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* — Drawer de navegación (móvil): .mc-drawer del design system, lado izquierdo — */
.mc-drawer--left{left:0;right:auto;border-left:0;border-right:1px solid var(--border);
transform:translateX(-105%)}
.mc-drawer--left.open{transform:none}
.mc-drawer-backdrop{position:fixed;inset:0;background:rgba(10,20,18,.45);z-index:89}
.mc-drawer--left .mc-panel__navitem{font-size:15px}
/* — Móvil ≤720px: sidebar → drawer, topbar compacta — */
@media(max-width:720px){
.mc-panel{grid-template-columns:minmax(0,1fr)}
.mc-panel--collapsed{grid-template-columns:minmax(0,1fr)}
.mc-panel__side{display:none}
.mc-panel__hamb{display:inline-flex}
.mc-panel__topbar{padding:10px 12px;gap:8px}
.mc-panel__topbar .mc-breadcrumb{display:none}
.mc-panel__uname{display:none}
.mc-panel__userbtn{padding:5px;border-radius:50%}
.mc-panel__search{min-width:0;flex:1}
.mc-panel__search .mc-search__input{min-height:44px}
.mc-panel__content{padding:14px 12px 40px}
.mc-panel__head{margin-bottom:14px}
.mc-panel__title{font-size:19px}
.mc-panel__actions{width:100%}
.mc-panel__actions .mc-btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
.mc-skip{transition:none}
.mc-panel__navitem{transition:none}
}
/* ════════════════════════════════════════════════════════════════════
§7 ACCESIBILIDAD — FRENTE 10 (2026-10-04)
────────────────────────────────────────────────────────────────────
Auditoría WCAG 2.1 AA sobre HEAD commiteado (docs/audits/
MEDICERCA_DASHBOARD_A11Y.md). Solo CSS: sin cambios a lógica de
negocio, endpoints ni RBAC. PRODUCTION_CHANGED=NO.
Índice:
A Contraste: selectores con color de marca en tema oscuro
B Contraste: estados seleccionados (tabs/chips/paginación) en oscuro
C Contraste: encabezados de tabla en oscuro
D Contraste: botón danger en oscuro
E Contraste: fondos hardcodeados que se rompían en oscuro
F Touch targets: refuerzos (móvil ≤560px + #btn-tema)
G Movimiento reducido: ticker, typing y sheet
════════════════════════════════════════════════════════════════════ */
/* — A. Links y texto de marca en oscuro: --brand-text (#0C6B50) sobre
superficies oscuras da 2.25:1 (falla AA). #5eead4 da 9.89:1.
NOTA: no se toca el `a` global en oscuro porque
conserva fondo blanco hardcodeado (ahí --brand-text = 6.49:1, correcto). */
[data-tema="oscuro"] .mc-breadcrumb a{color:#5eead4}
[data-tema="oscuro"] .mc-panel__modname{color:#5eead4}
[data-tema="oscuro"] .mc-btn--outline{color:#5eead4}
[data-tema="oscuro"] .mc-panel__collapse:hover{color:#5eead4}
[data-tema="oscuro"] .backlink{color:#5eead4}
[data-tema="oscuro"] .mc-card a,[data-tema="oscuro"] .note a,
[data-tema="oscuro"] .mc-empty a{color:#5eead4}
[data-tema="oscuro"] footer.site a{color:#5eead4}
/* — B. Seleccionados en oscuro: blanco sobre --ink claro (#e2e8f0) daba
1.23:1 (falla AA). Con --brand-text de fondo: 6.49:1. */
[data-tema="oscuro"] .mc-tabs__tab[aria-selected="true"],
[data-tema="oscuro"] .mc-chip[aria-pressed="true"],
[data-tema="oscuro"] .mc-page[aria-current="page"]{
background:var(--brand-text);border-color:var(--brand-text);color:#fff}
[data-tema="oscuro"] .mc-tabs__tab[aria-selected="true"] .mc-tabs__count{
background:rgba(0,0,0,.28)}
/* .mc-chip[aria-selected="true"] (filtros con role=tab) ya pasa en oscuro:
texto var(--bg) #0f172a sobre --ink #e2e8f0 = 14.48:1. Sin cambios. */
/* .tab.on y .chip.on legacy: */
[data-tema="oscuro"] .chip.on{background:#0c6b50;border-color:#0c6b50;color:#fff}
/* (.tab.on ya tenía override oscuro a #0c6b50 — verificado, sin cambios.) */
/* — C. Encabezados de tabla en oscuro: blanco sobre --ink claro = 1.23:1.
Fondo marino profundo + texto --ink: ~15:1. */
[data-tema="oscuro"] .mc-table th,
[data-tema="oscuro"] table.data th{background:#0b1220;color:var(--ink)}
/* — D. Botón danger en oscuro: blanco sobre #EF4444 = 3.76:1 (falla AA).
#dc2626 da 4.83:1. */
[data-tema="oscuro"] .mc-btn--danger{background:#dc2626}
[data-tema="oscuro"] .mc-btn--danger:hover{background:#b91c1c}
/* — E. Fondos hardcodeados claros que en oscuro dejaban texto claro sobre
fondo claro (todos verificados ≤2:1 antes del fix): */
[data-tema="oscuro"] .slot{background:#1e293b;border-color:#334155;color:#f1f5f9}
[data-tema="oscuro"] .chip{background:#1e293b;border-color:#334155;color:#94a3b8}
[data-tema="oscuro"] .result{background:#1e293b}
[data-tema="oscuro"] .btn-ghost{background:#334155;color:var(--ink)}
[data-tema="oscuro"] table.data{background:#1e293b}
[data-tema="oscuro"] table.data td{border-color:#334155}
[data-tema="oscuro"] #toast{background:#0b1220;border:1px solid var(--border)}
[data-tema="oscuro"] #toast.mc-toast--success{background:#14532d}
[data-tema="oscuro"] #toast.mc-toast--error{background:#7f1d1d}
[data-tema="oscuro"] #toast.mc-toast--info{background:#1e3a8a}
[data-tema="oscuro"] .demo-banner{background:#0b1220}
[data-tema="oscuro"] footer.site{background:#0b1220}
[data-tema="oscuro"] .bottomnav{background:#1e293b;border-color:#334155}
[data-tema="oscuro"] .bottomnav a.on{color:#5eead4}
[data-tema="oscuro"] #mediSheet{background:#1e293b}
/* — F. Touch targets: #btn-tema del topbar medía ~30px; los legacy
.chip/.tab/.slot y .medi-card .btn quedaban en 34–40px en móvil.
(Los mc-* ya cumplen: .mc-btn/.mc-tabs__tab/.mc-chip/.mc-page ≥44px y
la media query §5 lleva .mc-btn--sm a 44px en ≤560px.) */
#btn-tema{min-width:44px;min-height:44px}
@media(max-width:560px){
.chip,.tab,.slot{min-height:44px}
.filters select{min-height:44px}
.medi-card .btn{min-height:44px}
}
/* — G. Movimiento reducido: el ticker de tasas y el typing de Medi
animaban por CSS sin respetar la preferencia (el shimmer, el drawer
y el scroll suave ya estaban cubiertos). */
@media(prefers-reduced-motion:reduce){
.ticker-tasas .ticker-inner{animation:none}
.medi-typing span{animation:none}
#mediSheet{transition:none}
}