@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
/* ═══════════════ DARK MODE (default) ═══════════════ */
:root{
    --bg:#000;
    --bg-card:#1c1c1e;
    --bg-card-hover:#2c2c2e;
    --bg-elevated:#2c2c2e;
    --border:rgba(255,255,255,.08);
    --border-hover:rgba(255,255,255,.14);
    --text:#f5f5f7;
    --text-2:rgba(255,255,255,.7);
    --text-3:rgba(255,255,255,.45);
    --text-4:rgba(255,255,255,.25);
    --accent:#0a84ff;
    --accent-hover:#409cff;
    --green:#30d158;
    --green-bg:rgba(48,209,88,.1);
    --green-border:rgba(48,209,88,.2);
    --red:#ff453a;
    --red-bg:rgba(255,69,58,.08);
    --red-border:rgba(255,69,58,.15);
    --orange:#ff9f0a;
    --orange-bg:rgba(255,159,10,.08);
    --purple:#bf5af2;
    --purple-bg:rgba(191,90,242,.08);
    --purple-border:rgba(191,90,242,.15);
    --blue:#0a84ff;
    --blue-bg:rgba(10,132,255,.08);
    --blue-border:rgba(10,132,255,.15);
    --teal:#64d2ff;
    --indigo:#5e5ce6;
    --r:20px;
    --r-sm:12px;
    --r-xs:8px;
    --transition:.2s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════ LIGHT MODE (auto) ═══════════════ */
@media(prefers-color-scheme:light){
    :root{
        --bg:#fff;
        --bg-card:#fff;
        --bg-card-hover:#fafafa;
        --bg-elevated:#fff;
        --border:rgba(0,0,0,.06);
        --border-hover:rgba(0,0,0,.12);
        --text:#1d1d1f;
        --text-2:#48484a;
        --text-3:#8e8e93;
        --text-4:#c7c7cc;
        --accent:#007aff;
        --accent-hover:#0056cc;
        --green:#34c759;
        --green-bg:rgba(52,199,89,.06);
        --green-border:rgba(52,199,89,.15);
        --red:#ff3b30;
        --red-bg:rgba(255,59,48,.05);
        --red-border:rgba(255,59,48,.12);
        --orange:#ff9500;
        --orange-bg:rgba(255,149,0,.05);
        --purple:#af52de;
        --purple-bg:rgba(175,82,222,.05);
        --purple-border:rgba(175,82,222,.12);
        --blue:#007aff;
        --blue-bg:rgba(0,122,255,.05);
        --blue-border:rgba(0,122,255,.12);
        --teal:#5ac8fa;
        --indigo:#5856d6;
    }
}

html{scroll-behavior:smooth}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
    background:var(--bg);color:var(--text);
    display:flex;flex-direction:column;height:100vh;overflow:hidden;
    -webkit-font-smoothing:antialiased;
}
#appContainer{flex-direction:column!important}

::-webkit-scrollbar{width:0;height:0}

/* ═══════════════ TOPBAR ═══════════════ */
.topbar{
    display:flex;align-items:center;justify-content:space-between;
    height:48px;padding:0 28px;flex-shrink:0;
    background:rgba(0,0,0,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:50;
}
.topbar-left{display:flex;align-items:center}
.topbar-right{display:flex;align-items:center;gap:8px}
.logo{font-size:15px;font-weight:700;letter-spacing:-.02em}
.sidebar-logo{display:none}

.notif-trigger{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background var(--transition);font-size:15px;
    color:var(--text-3);position:relative;
}
.notif-trigger:hover{background:var(--bg-card);color:var(--text)}
.notif-badge{
    position:absolute;top:2px;right:2px;
    background:var(--red);color:#fff;font-size:9px;font-weight:700;
    min-width:14px;height:14px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.notif-panel{
    position:fixed;top:52px;right:20px;width:340px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:60;
}
.notif-panel.open{max-height:420px;overflow-y:auto}
.notif-email-box{padding:16px;border-bottom:1px solid var(--border)}
.notif-list{max-height:280px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.notif-item:last-child{border-bottom:none}
.notif-icon{font-size:14px;color:var(--red);flex-shrink:0;margin-top:2px}
.notif-content{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:600}
.notif-detail{font-size:11px;color:var(--text-3);margin-top:2px}
.notif-time{font-size:10px;color:var(--text-4);margin-top:2px;font-family:'JetBrains Mono',monospace}
.sidebar-notifications{border:none;padding:0;margin:0}

.user-pill{
    display:flex;align-items:center;gap:8px;
    padding:4px 4px 4px 12px;
    border-radius:20px;background:var(--bg-card);
    font-size:12px;color:var(--text-2);
}

/* ═══════════════ MAIN SCROLL ═══════════════ */
.main-scroll{flex:1;overflow-y:auto;overflow-x:hidden;width:100%}
.section{display:none;max-width:1280px;margin:0 auto;padding:32px 48px 60px}
.section.active{display:block;animation:pageIn .35s cubic-bezier(.2,0,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

.section-back{
    display:inline-flex;align-items:center;gap:4px;
    font-size:13px;font-weight:500;color:var(--accent);
    cursor:pointer;margin-bottom:20px;padding:6px 0;
    transition:opacity var(--transition);
}
.section-back:hover{opacity:.7}
.section-header{margin-bottom:28px}
.section-header h1{font-size:28px;font-weight:800;letter-spacing:-.04em;margin-bottom:4px}
.section-header p{font-size:14px;color:var(--text-3);font-weight:400}

/* ═══════════════ BENTO GRID ═══════════════ */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:140px;
    gap:12px;
    margin-bottom:32px;
}

.tile{
    border-radius:var(--r);padding:22px;
    display:flex;flex-direction:column;justify-content:flex-end;
    cursor:pointer;position:relative;overflow:hidden;
    transition:transform .3s cubic-bezier(.2,0,.2,1),box-shadow .3s;
}
.tile:hover{transform:scale(1.02);box-shadow:0 8px 40px rgba(0,0,0,.4)}
.tile:active{transform:scale(.98)}
.tile-icon{font-size:32px;margin-bottom:auto}
.tile-label{font-size:15px;font-weight:700;letter-spacing:-.02em}
.tile-big{font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:4px}
.tile-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:4px;line-height:1.4}
.tile-cta{font-size:13px;font-weight:600;margin-top:12px;color:#fff;opacity:.8}
.tile-counter{font-size:28px;font-weight:900;letter-spacing:-.03em;font-family:'JetBrains Mono',monospace;margin:4px 0 2px}

/* Welcome — spans 2 cols */
.tile-welcome{
    grid-column:span 2;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%);
    border:1px solid rgba(99,102,241,.15);
}

/* Equipo */
.tile-equipo{
    background:linear-gradient(160deg,#0a2342 0%,#0d3b66 100%);
    border:1px solid rgba(10,132,255,.12);
}

/* Prompt Lab */
.tile-lab{
    background:linear-gradient(160deg,#1a0a2e 0%,#2d1b69 100%);
    border:1px solid rgba(191,90,242,.12);
}

/* Notif */
.tile-notif{
    background:var(--bg-card);border:1px solid var(--border);
}

/* Health tile */
.tile-health{
    background:var(--bg-card);border:1px solid var(--border);
}

/* ═══════════════ SKELETON LOADERS ═══════════════ */
.skeleton-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r);padding:24px;
}
.skel{border-radius:var(--r-xs);background:rgba(128,128,128,.1);animation:shimmer 1.5s ease-in-out infinite}
.skel-title{height:16px;width:60%;margin-bottom:16px}
.skel-line{height:12px;width:100%;margin-bottom:10px}
.skel-line.short{width:40%}
@keyframes shimmer{0%,100%{opacity:.4}50%{opacity:.8}}

/* ═══════════════ DIAGNOSTICS PANEL ═══════════════ */
.diag-overlay{
    display:none;position:fixed;top:0;right:0;width:480px;height:100vh;
    background:var(--bg-card);border-left:1px solid var(--border);
    z-index:100;overflow-y:auto;
    animation:slideIn .25s cubic-bezier(.2,0,.2,1);
    box-shadow:-10px 0 50px rgba(0,0,0,.3);
}
.diag-overlay.open{display:flex;flex-direction:column}
.diag-header{
    padding:20px 24px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.diag-header h2{font-size:16px;font-weight:700}
.diag-body{padding:20px 24px;flex:1;overflow-y:auto}
.diag-ok{text-align:center;padding:40px 20px}
.diag-section-title{font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:12px}
.diag-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;border-radius:var(--r-sm);
    margin-bottom:6px;background:rgba(128,128,128,.04);
    border:1px solid var(--border);
}
.diag-issue{border-color:rgba(255,149,0,.15);background:var(--orange-bg)}
.diag-item-icon{font-size:18px;flex-shrink:0}
.diag-item-info{flex:1;min-width:0}
.diag-item-title{font-size:13px;font-weight:600}
.diag-item-desc{font-size:11px;color:var(--text-3);margin-top:2px}

/* ═══════════════ CONTACT SEARCH ═══════════════ */
.contact-search{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.contact-search-bar{display:flex;gap:8px;align-items:center}
.contact-search-input{
    flex:1;padding:10px 14px;
    background:var(--bg);border:1px solid var(--border);
    border-radius:var(--r-sm);color:var(--text);font-size:13px;
    font-family:'JetBrains Mono',monospace;outline:none;
    transition:all var(--transition);
}
.contact-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.15)}
.contact-search-input::placeholder{color:var(--text-4);font-family:'Inter',sans-serif}
.contact-search-hint{font-size:11px;color:var(--text-4);margin-top:6px}
.contact-search-loading{padding:12px;font-size:12px;color:var(--accent);display:flex;align-items:center;gap:8px;margin-top:8px}
.contact-search-found{
    margin-top:8px;padding:12px 14px;
    background:var(--green-bg);border:1px solid var(--green-border);
    border-radius:var(--r-sm);cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    transition:all var(--transition);
}
.contact-search-found:hover{background:rgba(48,209,88,.12)}
.contact-search-empty{margin-top:8px;padding:12px;font-size:12px;color:var(--text-3);background:rgba(128,128,128,.04);border-radius:var(--r-sm)}
.contact-id-label{font-size:10px;color:var(--text-4);font-family:'JetBrains Mono',monospace;margin-top:2px}

/* ═══════════════ SECTION TITLE BAR ═══════════════ */
.section-title{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;gap:16px;
}
.section-title h2{font-size:20px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.toolbar{display:flex;gap:8px;align-items:center;flex:1;max-width:500px}
.sort-select{
    padding:7px 12px;background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-xs);color:var(--text-2);font-size:12px;font-weight:500;
    font-family:'Inter',sans-serif;outline:none;cursor:pointer;
    transition:all var(--transition);min-width:140px;
}
.sort-select:hover{border-color:var(--border-hover)}
.sort-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.15)}
.card-date{font-family:'JetBrains Mono',monospace;font-size:11px!important;color:var(--text-3)!important}

/* ═══════════════ CLINIC CARDS ═══════════════ */
.clinic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

.clinic-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r);padding:22px;
    transition:all .25s cubic-bezier(.2,0,.2,1);
    cursor:pointer;position:relative;
}
.clinic-card:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.clinic-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.clinic-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%}
.dot.on{background:var(--green);box-shadow:0 0 8px rgba(48,209,88,.4)}
.dot.off{background:var(--red);opacity:.5}
.clinic-card-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.clinic-card-row:last-of-type{border-bottom:none}
.clinic-card-row .label{color:var(--text-3)}.clinic-card-row .value{font-weight:500;color:var(--text-2)}
.clinic-actions{display:flex;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}

.mini-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.mini-switch input{opacity:0;width:0;height:0}
.mini-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.12);border-radius:20px;transition:all .3s}
.mini-slider::before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:rgba(255,255,255,.5);border-radius:50%;transition:all .3s}
.mini-switch input:checked+.mini-slider{background:var(--green)}
.mini-switch input:checked+.mini-slider::before{transform:translateX(16px);background:#fff}

/* ═══════════════ TWO COL ═══════════════ */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.two-col-rev { display:grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.col-main{min-width:0}.col-side{position:sticky;top:76px}
.col-side-title{font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.03em}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
    padding:8px 16px;border:none;border-radius:var(--r-xs);cursor:pointer;
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    transition:all var(--transition);display:inline-flex;align-items:center;gap:6px;
}
.btn-primary{
    background:var(--accent);color:#fff;width:100%;justify-content:center;
    padding:12px 20px;font-size:14px;font-weight:700;border-radius:var(--r-sm);
}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.3;cursor:not-allowed}
.btn-accent{background:var(--accent);color:#fff;border-radius:var(--r-xs)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-success{background:var(--green);color:#fff}.btn-success:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-xs)}
.btn-ghost:hover{background:var(--bg-card);color:var(--text);border-color:var(--border-hover)}
.btn-sm{padding:5px 10px;font-size:11px}

/* ═══════════════ FORMS ═══════════════ */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{
    width:100%;padding:10px 14px;
    background:rgba(255,255,255,.05);border:1px solid var(--border);
    border-radius:var(--r-sm);color:var(--text);font-size:13px;
    font-family:'Inter',sans-serif;outline:none;transition:all var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.15);
    background:rgba(255,255,255,.07);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-4)}
.form-group textarea{resize:vertical;min-height:100px;line-height:1.6;font-family:'JetBrains Mono',monospace;font-size:12px}
.form-group .hint{font-size:11px;color:var(--text-4);margin-top:5px}

.location-bar{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
    padding:18px 22px;margin-bottom:16px;display:flex;align-items:flex-end;gap:12px;
}
.location-bar .form-group{flex:1;margin:0}
.location-bar label{font-size:13px;font-weight:600;color:var(--text)}

/* ═══════════════ CARDS ═══════════════ */
.card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r);margin-bottom:12px;overflow:hidden;
    transition:border-color var(--transition);
}
.card:hover{border-color:var(--border-hover)}
.card-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background var(--transition)}
.card-header:hover{background:rgba(255,255,255,.02)}
.card-header-left{display:flex;align-items:center;gap:12px}
.card-icon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.card-icon.blue{background:var(--blue-bg)}.card-icon.green{background:var(--green-bg)}.card-icon.purple{background:var(--purple-bg)}.card-icon.orange{background:var(--orange-bg)}
.card-title{font-size:14px;font-weight:600}.card-subtitle{font-size:11px;color:var(--text-3);margin-top:1px}
.card-chevron{font-size:10px;color:var(--text-4);transition:transform .25s}
.card.open .card-chevron{transform:rotate(90deg);color:var(--text-3)}
.card-body{display:none;padding:0 20px 20px;border-top:1px solid var(--border)}
.card.open .card-body{display:block;padding-top:18px}
.card-status{padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.card-status.pending{background:rgba(255,255,255,.06);color:var(--text-3)}
.card-status.done{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.card-status.error{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}

.toggle-group{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.toggle-info{flex:1;margin-right:12px}.toggle-info .toggle-label{font-size:13px;font-weight:500}.toggle-info .toggle-desc{font-size:11px;color:var(--text-3)}

.switch{position:relative;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.12);border-radius:20px;transition:all .3s}
.slider::before{content:"";position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:rgba(255,255,255,.5);border-radius:50%;transition:all .3s}
.switch input:checked+.slider{background:var(--green)}
.switch input:checked+.slider::before{transform:translateX(16px);background:#fff}
.switch-red input:checked + .slider { background: var(--red); }

/* ═══════════════ STATUS ═══════════════ */
.inline-status{margin-top:10px;padding:10px 14px;border-radius:var(--r-sm);font-size:12px;display:none;line-height:1.5;font-weight:500}
.inline-status.success{display:block;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.inline-status.error{display:block;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.inline-status.loading{display:block;background:var(--blue-bg);color:var(--accent);border:1px solid var(--blue-border)}
.status-box{margin-top:12px;padding:12px 16px;border-radius:var(--r-sm);font-size:13px;display:none;line-height:1.5}
.status-box.success{display:block;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.status-box.error{display:block;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.status-box.loading{display:block;background:var(--blue-bg);color:var(--accent);border:1px solid var(--blue-border)}

/* ═══════════════ BADGES / TABLES ═══════════════ */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600}
.badge-active{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-sync{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)}
.badge-channel{background:var(--blue-bg);color:var(--accent);border:1px solid var(--blue-border)}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-sm)}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:10px 14px;background:var(--bg-card);color:var(--text-4);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
tr:last-child td{border-bottom:none}tr:hover td{background:rgba(255,255,255,.015)}
.empty-state{text-align:center;padding:48px 20px;color:var(--text-3)}
.empty-state .icon{font-size:36px;margin-bottom:12px;opacity:.4}

/* ═══════════════ DETAIL PANEL ═══════════════ */
.detail-overlay{display:none;position:fixed;top:0;right:0;width:580px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border);z-index:100;overflow-y:auto;animation:slideIn .25s cubic-bezier(.2,0,.2,1);box-shadow:-10px 0 50px rgba(0,0,0,.5)}
.detail-overlay.open{display:flex;flex-direction:column}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.detail-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.detail-header h2{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.detail-close{background:rgba(255,255,255,.06);border:none;color:var(--text-3);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.detail-close:hover{background:rgba(255,255,255,.1);color:var(--text)}
.detail-body{padding:20px 24px;flex:1;overflow-y:auto}
.detail-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin:-20px -24px 20px;padding:0 24px}
.detail-tab{padding:12px 16px;border:none;background:transparent;color:var(--text-3);cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;transition:all var(--transition);border-bottom:2px solid transparent;margin-bottom:-1px}
.detail-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.detail-tab:not(.active):hover{color:var(--text-2)}
.detail-panel{display:none}.detail-panel.active{display:block;animation:pageIn .2s ease}

/* Contacts */
.contact-list{display:flex;flex-direction:column;gap:2px}
.contact-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--r-sm);cursor:pointer;transition:all var(--transition)}
.contact-row:hover{background:rgba(255,255,255,.04)}
.contact-row-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.contact-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-2);flex-shrink:0}
.contact-info{min-width:0}.contact-name-text{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-preview{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;margin-top:1px}
.contact-meta{text-align:right;flex-shrink:0;margin-left:12px}
.contact-time{font-size:10px;color:var(--text-4);font-family:'JetBrains Mono',monospace}
.contact-badges{display:flex;gap:4px;margin-top:4px;justify-content:flex-end}

.convo-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.convo-back{background:rgba(255,255,255,.06);border:none;color:var(--text-3);font-size:14px;cursor:pointer;padding:6px 10px;border-radius:var(--r-xs);transition:all var(--transition)}
.convo-back:hover{background:rgba(255,255,255,.1);color:var(--text)}
.convo-messages{display:flex;flex-direction:column-reverse;gap:8px}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.5;word-wrap:break-word}
.msg-user{background:rgba(255,255,255,.08);align-self:flex-start;border-bottom-left-radius:4px}
.msg-ai{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg-meta{font-size:10px;color:var(--text-4);margin-top:3px}
.msg-user .msg-meta{text-align:left}.msg-ai .msg-meta{text-align:right}

.audit-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.audit-row:last-child{border-bottom:none}
.audit-icon{width:32px;height:32px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.audit-icon.sync{background:var(--green-bg)}.audit-icon.agent{background:var(--blue-bg)}.audit-icon.prompt{background:var(--purple-bg)}.audit-icon.webhook{background:var(--orange-bg)}.audit-icon.error{background:var(--red-bg)}
.audit-text{font-size:12px;line-height:1.5}.audit-text strong{font-weight:600}
.audit-time{font-size:10px;color:var(--text-4);margin-top:2px;font-family:'JetBrains Mono',monospace}

/* ═══════════════ ADV SETTINGS ═══════════════ */
.adv-section{border-bottom:1px solid rgba(255,255,255,.05)}
.adv-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background var(--transition)}
.adv-header:hover{background:rgba(255,255,255,.02)}
.adv-title{font-size:12px;font-weight:600}.adv-desc{font-size:10px;color:var(--text-3);margin-top:1px}
.adv-body{display:none;padding:0 12px 12px;border-top:1px solid rgba(255,255,255,.04)}
.adv-section.open .adv-body{display:block;padding-top:10px}
.adv-section.open .card-chevron{transform:rotate(90deg);color:var(--text-3)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.1);border-radius:50%;border-top-color:var(--accent);animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.classifier-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.classifier-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;transition:background var(--transition)}
.classifier-header:hover{background:rgba(255,255,255,.02)}
.classifier-body{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 14px}
.classifier-card.open .classifier-body{max-height:500px;padding:0 14px 14px}
.classifier-card.open .card-chevron{transform:rotate(90deg)}

.iter-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.iter-row:last-child{border-bottom:none}
.iter-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.iter-num.active{background:var(--blue-bg);color:var(--accent);border:1px solid var(--blue-border)}
.iter-num.done{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.iter-num.fail{background:var(--red-bg);color:var(--red)}.iter-num.wait{background:rgba(255,255,255,.05);color:var(--text-4)}
.iter-info{flex:1;min-width:0}.iter-title{font-size:13px;font-weight:600;margin-bottom:2px}.iter-detail{font-size:11px;color:var(--text-3);line-height:1.5}
.iter-score{font-size:18px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.test-row{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.test-row:last-child{border-bottom:none}
.test-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:700}
.test-icon.pass{background:var(--green-bg);color:var(--green)}.test-icon.fail{background:var(--red-bg);color:var(--red)}.test-icon.neutral{background:var(--blue-bg);color:var(--accent)}
.test-msg{font-size:12px;font-weight:500;margin-bottom:2px}.test-detail{font-size:11px;color:var(--text-3)}.test-detail span{margin-right:10px}
.score-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:8px}.score-fill{height:100%;border-radius:2px;transition:width .5s ease}

/* ═══════════════ LOGIN ═══════════════ */
.login-overlay{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;background:var(--bg)}
.login-card{width:100%;max-width:380px;padding:44px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-icon{font-size:40px;margin-bottom:14px}
.login-logo h1{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.login-logo p{font-size:13px;color:var(--text-3)}
.login-status{margin-top:14px;text-align:center;font-size:12px;color:var(--red);display:none}

/* Hidden elements */
.sidebar,.sidebar-logo span,.nav-label,.menu-item .icon{display:none}

/* ═══════════════ LIGHT MODE OVERRIDES ═══════════════ */
@media(prefers-color-scheme:light){
    body{background:#f5f5f7}
    .topbar{background:rgba(255,255,255,.9);border-bottom:1px solid rgba(0,0,0,.06)}
    .notif-trigger{color:var(--text-3)}
    .notif-trigger:hover{background:rgba(0,0,0,.04);color:var(--text)}
    .notif-panel{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.04)}
    .user-pill{background:rgba(0,0,0,.04)}
    .main-scroll{background:#f5f5f7}
    /* Tiles — white cards with shadow, no gradients */
    .tile{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03)}
    .tile:hover{box-shadow:0 4px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
    .tile-welcome,.tile-equipo,.tile-lab,.tile-notif{background:#fff;border:none}
    .tile,.tile .tile-big,.tile .tile-label{color:var(--text)}
    .tile .tile-sub{color:var(--text-3)}
    .tile .tile-cta{color:var(--accent);opacity:1}
    .tile .tile-icon{opacity:.8}
    /* Cards */
    .clinic-card{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03)}
    .clinic-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
    .card{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03)}
    .card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
    .login-overlay{background:#f5f5f7}
    .login-card{background:#fff;border:none;box-shadow:0 4px 24px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03)}
    .location-bar{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03)}
    /* Inputs */
    .form-group input,.form-group select,.form-group textarea{background:#f5f5f7;border-color:rgba(0,0,0,.06)}
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff}
    /* Toggles */
    .mini-slider{background:rgba(0,0,0,.1)}
    .mini-slider::before{background:#fff}
    .slider{background:rgba(0,0,0,.1)}
    .slider::before{background:#fff}
    /* Messages */
    .msg-user{background:#f5f5f7;border:none}
    .msg-ai{background:var(--accent);color:#fff}
    /* Detail panel */
    .detail-overlay{background:#fff;box-shadow:-5px 0 30px rgba(0,0,0,.06)}
    .detail-close{background:rgba(0,0,0,.04);border:none}
    .detail-close:hover{background:rgba(0,0,0,.08)}
    .detail-tabs{border-bottom-color:rgba(0,0,0,.06)}
    /* Misc */
    .score-bar{background:rgba(0,0,0,.05)}
    .iter-num.wait{background:rgba(0,0,0,.04);color:var(--text-4)}
    .convo-back{background:rgba(0,0,0,.04);border:none}
    .contact-avatar{background:rgba(0,0,0,.04)}
    .contact-row:hover{background:rgba(0,0,0,.02)}
    .audit-row{border-bottom-color:rgba(0,0,0,.04)}
    .adv-section{border-bottom-color:rgba(0,0,0,.04)}
    .adv-header:hover{background:rgba(0,0,0,.02)}
    .card-header:hover{background:rgba(0,0,0,.015)}
    .classifier-card{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06)}
    .btn-ghost{background:rgba(0,0,0,.04);border:none;color:var(--text-2)}
    .btn-ghost:hover{background:rgba(0,0,0,.07);color:var(--text)}
    .section-back{color:var(--accent)}
    .sort-select{background:#fff;border-color:rgba(0,0,0,.08)}
    .contact-search-input{background:#f5f5f7}
    .contact-search-input:focus{background:#fff}
    .contact-search-found{background:rgba(52,199,89,.06)}
    .diag-overlay{background:#fff;box-shadow:-5px 0 30px rgba(0,0,0,.06)}
    .diag-item{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
    .diag-issue{background:rgba(255,149,0,.04);border-color:rgba(255,149,0,.1)}
    .skeleton-card{background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.06)}
    .tile-counter{color:var(--text)}
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1024px){
    .two-col, .two-col-rev { grid-template-columns: 1fr; }
    .col-side { position: static; }
    .bento-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:640px){
    .bento-grid{grid-template-columns:1fr;grid-auto-rows:120px}
    .tile-welcome{grid-column:span 1}
    .section{padding:20px 16px}
    .topbar{padding:0 16px}
    .detail-overlay{width:100%}
}

.alert-box-critical {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: var(--r);
    padding: 20px;
    margin-bottom: 24px;
}
.alert-box-critical h3 {
    color: var(--red);
    font-size: 14px;
    margin-bottom: 12px;
}
.quota-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 69, 58, 0.1);
    font-size: 13px;
}
.quota-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-3);
}

.tile-migration {
    background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    border: 1px solid rgba(10, 132, 255, 0.12);
}
@media(prefers-color-scheme: light){
    .tile-migration { background: #fff; border: none; }
}

/* ═══════════════ READ ONLY MODE ═══════════════ */
body.role-viewer .btn-accent,
body.role-viewer .btn-success,
body.role-viewer .btn-primary,
body.role-viewer .mini-switch,
body.role-viewer .switch,
body.role-viewer .detail-close[onclick*="eliminarClinica"],
body.role-viewer button[style*="var(--red)"] {
    display: none !important;
}

body.role-viewer #card_new_user {
    display: none !important; /* Visualizadores no pueden crear usuarios */
}

/* Opcional: mostrar un indicador visual en el Topbar */
body.role-viewer .user-pill::after {
    content: " (Solo Lectura)";
    color: var(--orange);
    font-size: 10px;
    font-weight: 600;
}