/* ============================================================
   Salone Smart — WOW EDITION
   Aesthetic: Luxury dark / editorial gold / cinematic transitions
   ============================================================ */

:root {
  --gold:          #c8a030;
  --gold-light:    #f0d27a;
  --gold-dim:      rgba(200,160,48,0.13);
  --gold-border:   rgba(200,160,48,0.22);
  --gold-glow:     rgba(200,160,48,0.07);
  --green:         #4ecca3;
  --green-soft:    rgba(78,204,163,0.10);
  --red:           #e94560;
  --red-soft:      rgba(233,69,96,0.10);
  --bg:            #07080e;
  --bg-2:          #0c0e17;
  --surface:       rgba(255,255,255,0.035);
  --surface-2:     rgba(255,255,255,0.06);
  --surface-3:     rgba(255,255,255,0.09);
  --border:        rgba(255,255,255,0.07);
  --border-gold:   rgba(200,160,48,0.18);
  --text:          #e8e4dc;
  --text-2:        rgba(232,228,220,0.55);
  --text-3:        rgba(232,228,220,0.28);
  --serif:         'Cormorant Garamond', Georgia, serif;
  --sans:          'DM Sans', system-ui, sans-serif;
  --mono:          'JetBrains Mono', 'Menlo', monospace;
  --ease-out:      cubic-bezier(.22,1,.36,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;font-size:15px;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}

/* ═══════════════════════════════════════════
   PARTICELLE CANVAS
   ═══════════════════════════════════════════ */
#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ═══════════════════════════════════════════
   AUTH
   ═══════════════════════════════════════════ */
#auth-section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.auth-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(200,160,48,0.07) 0%,transparent 65%);pointer-events:none;animation:glow-pulse 6s ease-in-out infinite alternate;z-index:1}
@keyframes glow-pulse{from{opacity:.6;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
.auth-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(200,160,48,0.025) 40px,rgba(200,160,48,0.025) 41px);pointer-events:none;z-index:1}
.auth-card{position:relative;z-index:2;width:100%;max-width:400px;background:rgba(12,14,23,0.92);border:1px solid var(--border-gold);border-radius:6px;padding:44px 40px 40px;backdrop-filter:blur(24px);animation:card-in .8s var(--ease-out) both;box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(200,160,48,0.12)}
@keyframes card-in{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.auth-brand{text-align:center;margin-bottom:36px;animation:brand-in 1s var(--ease-out) .2s both}
@keyframes brand-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.auth-logo{width:210px;height:auto;display:block;margin:0 auto 14px;filter:drop-shadow(0 0 28px rgba(200,160,48,0.32));animation:logo-float 4s ease-in-out infinite alternate}
@keyframes logo-float{from{filter:drop-shadow(0 0 20px rgba(200,160,48,0.25))}to{filter:drop-shadow(0 0 38px rgba(200,160,48,0.42))}}
.auth-tagline{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3)}
.auth-card h2{font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--text);margin-bottom:22px;letter-spacing:.03em;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .4s both}
.form-group{margin-bottom:16px;opacity:0;animation:fadeSlideUp .5s var(--ease-out) both}
.form-group:nth-child(1){animation-delay:.5s}
.form-group:nth-child(2){animation-delay:.6s}
.form-group:nth-child(3){animation-delay:.7s}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.form-group label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.form-group input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:.9rem;font-weight:300;outline:none;transition:border-color .3s,box-shadow .3s,background .3s,transform .2s}
.form-group input:focus{border-color:rgba(200,160,48,0.50);background:rgba(200,160,48,0.06);box-shadow:0 0 0 4px rgba(200,160,48,0.10),0 0 20px rgba(200,160,48,0.08);transform:translateY(-1px)}
.form-group input::placeholder{color:var(--text-3)}
.hint{font-family:var(--mono);font-size:.6rem;color:var(--text-3);margin-top:5px}
.auth-switch{text-align:center;margin-top:16px;font-size:.78rem;color:var(--text-3);opacity:0;animation:fadeSlideUp .5s var(--ease-out) .8s both}
.auth-switch a{color:var(--gold);text-decoration:none;transition:opacity .2s}
.auth-switch a:hover{text-decoration:underline;opacity:.8}

/* ═══════════════════════════════════════════
   CINEMATIC TRANSITION — login → dashboard
   ═══════════════════════════════════════════ */
.cinematic-overlay{position:fixed;inset:0;background:var(--gold);z-index:9999;pointer-events:none;opacity:0;transform:scaleX(0);transform-origin:left}
.cinematic-overlay.active{animation:cinematic-wipe .8s var(--ease-out) forwards}
@keyframes cinematic-wipe{0%{opacity:1;transform:scaleX(0);transform-origin:left}40%{opacity:1;transform:scaleX(1);transform-origin:left}60%{opacity:1;transform:scaleX(1);transform-origin:right}100%{opacity:0;transform:scaleX(0);transform-origin:right}}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border-radius:3px;font-family:var(--sans);font-size:.84rem;font-weight:500;border:none;cursor:pointer;transition:all .25s var(--ease-out);white-space:nowrap;position:relative;overflow:hidden}
.btn:hover{opacity:.88;transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,160,48,0.15)}
.btn:active{transform:translateY(0);opacity:1}
.btn:disabled{opacity:.35;cursor:default;transform:none;pointer-events:none}
.btn-primary{width:100%;background:var(--gold-dim);border:1px solid var(--border-gold);color:var(--gold);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;opacity:0;animation:fadeSlideUp .5s var(--ease-out) .7s both}
.btn-primary:hover{background:rgba(200,160,48,0.25);box-shadow:0 0 30px rgba(200,160,48,0.2),0 8px 24px rgba(200,160,48,0.1)}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left .5s}
.btn-primary:hover::after{left:120%}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-2);padding:7px 14px;font-size:.78rem;transition:all .2s}
.btn-ghost:hover{border-color:var(--border-gold);color:var(--gold);background:rgba(200,160,48,0.05)}
.btn-sm{padding:5px 12px;font-size:.72rem}

/* MESSAGES */
.error-msg{margin-top:14px;padding:10px 14px;background:rgba(233,69,96,0.08);border:1px solid rgba(233,69,96,0.20);border-radius:3px;font-size:.78rem;color:var(--red);text-align:center;display:none;animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.system-banner{margin-bottom:20px;padding:12px 16px;background:rgba(200,160,48,0.07);border:1px solid rgba(200,160,48,0.18);border-left:3px solid var(--gold);border-radius:3px;font-family:var(--mono);font-size:.7rem;color:var(--gold);word-break:break-word;display:none;animation:fadeSlideUp .4s var(--ease-out)}

/* ═══════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════ */
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:0 28px;height:58px;background:rgba(7,8,14,0.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);animation:topbar-in .5s var(--ease-out)}
@keyframes topbar-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.topbar-brand{display:flex;align-items:center}
.topbar-logo{height:33px;width:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(200,160,48,0.20));transition:filter .3s}
.topbar-logo:hover{filter:drop-shadow(0 0 18px rgba(200,160,48,0.38))}
.topbar-center{display:flex;align-items:center;justify-content:center;gap:8px}
.topbar-live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(78,204,163,0.6);animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.topbar-clock{font-family:var(--mono);font-size:.72rem;color:var(--text-3);letter-spacing:.08em}
.topbar-actions{display:flex;align-items:center;gap:4px}
.topbar-sep{width:1px;height:18px;background:var(--border);margin:0 6px}
.topbar-username{font-size:.78rem;color:var(--text-2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-icon{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;background:transparent;border:none;cursor:pointer;transition:all .2s;color:var(--text-3)}
.topbar-icon:hover{background:var(--surface-2);color:var(--text);transform:translateY(-1px)}
.icon-wa{color:rgba(37,211,102,0.75)}.icon-alert{color:rgba(233,69,96,0.75)}.icon-notif{color:rgba(200,160,48,0.75)}
.topbar-icon:hover .icon-wa{color:#25D366}.topbar-icon:hover .icon-alert{color:var(--red)}.topbar-icon:hover .icon-notif{color:var(--gold)}
.topbar-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:8px;font-family:var(--mono);font-size:.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--bg);line-height:1;animation:badge-pop .3s var(--ease-spring)}
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}
.topbar-badge--wa{background:#25D366;color:#fff}.topbar-badge--alert{background:var(--red);color:#fff}.topbar-badge--notif{background:var(--gold);color:#07080e}
.badge-hidden{display:none !important}

/* DRAWER */
.drawer{position:fixed;top:66px;right:16px;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 90px);overflow-y:auto;background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:16px;z-index:200;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px var(--border-gold);display:none;animation:drawer-in .3s var(--ease-out) both}
@keyframes drawer-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.drawer-head strong{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--gold);letter-spacing:.02em}
.drawer-content{display:grid;gap:8px}
.drawer-item{padding:12px 14px;border:1px solid var(--border);background:var(--surface);border-radius:5px;word-break:break-word;transition:all .15s;opacity:0;animation:item-reveal .4s var(--ease-out) both}
.drawer-item:nth-child(1){animation-delay:.05s}
.drawer-item:nth-child(2){animation-delay:.1s}
.drawer-item:nth-child(3){animation-delay:.15s}
.drawer-item:nth-child(4){animation-delay:.2s}
@keyframes item-reveal{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.drawer-item:hover{background:var(--surface-2);border-color:var(--border-gold);transform:translateX(2px)}
.drawer-item strong{display:block;color:var(--text);font-size:.85rem;margin-bottom:4px;font-weight:500}
.drawer-item small{display:block;color:var(--text-3);font-size:.72rem;line-height:1.55}
.drawer-side{margin-top:6px;color:var(--gold);font-family:var(--mono);font-size:.65rem}

/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */
.content{max-width:1160px;margin:0 auto;padding:32px 32px 64px}
.section-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.20em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;opacity:0;animation:fadeSlideUp .5s var(--ease-out) both}
.hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--border);opacity:0;animation:fadeSlideUp .6s var(--ease-out) .1s both}
.hero-title{font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--text);letter-spacing:.02em;line-height:1;margin:8px 0 9px}
.hero-sub{font-size:.8rem;color:var(--text-3)}
.hero-month{font-family:var(--mono);font-size:.7rem;color:var(--text-3);white-space:nowrap}

/* ═══════════════════════════════════════════
   KPI — con glow pulsante e count-up
   ═══════════════════════════════════════════ */
.kpi-section{margin-bottom:16px;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .2s both}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.kpi-card{background:var(--surface);padding:26px 22px 20px;position:relative;overflow:hidden;transition:all .3s var(--ease-out);animation:kpi-in .6s var(--ease-out) both;animation-delay:var(--delay,0s)}
@keyframes kpi-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s}
.kpi-card::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1px;background:var(--gold);transition:width .4s var(--ease-out)}
.kpi-card:hover{background:var(--surface-2);transform:translateY(-3px);box-shadow:0 12px 32px rgba(200,160,48,0.08)}
.kpi-card:hover::before{opacity:1}
.kpi-card:hover::after{width:60%}
.kpi-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.kpi-val{font-family:var(--serif);font-size:2.5rem;font-weight:400;color:var(--gold);letter-spacing:-.01em;line-height:1;animation:count-in .7s var(--ease-out) both;animation-delay:calc(var(--delay,0s) + .15s)}
@keyframes count-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi-trend{font-family:var(--mono);font-size:.62rem;color:var(--text-3);margin-top:9px;line-height:1.5;min-height:1em}
.trend-up{color:var(--green)}.trend-down{color:var(--red)}
.kpi-bar-wrap{height:2px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:12px}
.kpi-bar{height:100%;background:linear-gradient(90deg,var(--gold),rgba(200,160,48,.45));border-radius:2px;transition:width 1.5s var(--ease-out);width:0%}

/* ═══════════════════════════════════════════
   AGENDA
   ═══════════════════════════════════════════ */
.agenda-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden;opacity:0;animation:fadeSlideUp .7s var(--ease-out) .35s both}
.panel{background:var(--surface);padding:22px 24px;transition:background .2s}
.panel:hover{background:rgba(255,255,255,0.04)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.panel-head h3{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--gold);letter-spacing:.03em}
.panel-count{font-family:var(--mono);font-size:.6rem;color:var(--text-3);background:var(--surface-2);padding:3px 10px;border-radius:2px;border:1px solid var(--border)}
.apt-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);transition:all .2s var(--ease-out);cursor:default;opacity:0;animation:item-reveal .4s var(--ease-out) both}
.apt-row:nth-child(1){animation-delay:.1s}
.apt-row:nth-child(2){animation-delay:.15s}
.apt-row:nth-child(3){animation-delay:.2s}
.apt-row:nth-child(4){animation-delay:.25s}
.apt-row:last-child{border-bottom:none}
.apt-row:hover{background:var(--gold-glow);padding-left:10px;padding-right:10px;margin:0 -10px;border-radius:3px;transform:translateX(4px)}
.apt-time{font-family:var(--mono);font-size:.68rem;color:var(--gold);text-align:right;opacity:.8}
.apt-name{color:var(--text);font-weight:400;font-size:.86rem;word-break:break-word}
.apt-service{font-size:.72rem;color:var(--text-3);margin-top:2px}
.apt-price{font-family:var(--mono);font-size:.72rem;color:var(--gold);text-align:right}
.apt-duration{font-family:var(--mono);font-size:.62rem;color:var(--text-3);text-align:right;margin-top:2px}
.apt-status{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:2px;display:inline-block;margin-top:4px}
.status-ok{background:var(--green-soft);color:var(--green)}.status-done{background:rgba(255,255,255,.04);color:var(--text-3)}.status-wait{background:var(--gold-dim);color:var(--gold)}.status-new{background:var(--red-soft);color:var(--red)}
.week-day{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--border)}
.week-day:last-child{border-bottom:none}
.week-day-label{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding-top:4px;line-height:1.6}
.week-day-label.today{color:var(--gold);text-shadow:0 0 8px rgba(200,160,48,0.3)}
.week-slot{padding:5px 10px;border-left:2px solid;border-radius:0 3px 3px 0;font-size:.74rem;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:all .15s var(--ease-out)}
.week-slot:last-child{margin-bottom:0}
.week-slot:hover{opacity:.8;transform:translateX(3px)}
.week-slot.ok{background:rgba(78,204,163,.05);border-color:var(--green)}.week-slot.wait{background:rgba(200,160,48,.05);border-color:var(--gold)}.week-slot.new{background:rgba(233,69,96,.05);border-color:var(--red)}
.week-slot-name{color:var(--text);word-break:break-word}
.week-slot-time{font-family:var(--mono);font-size:.6rem;color:var(--text-3);white-space:nowrap}
.week-empty,.empty-state{font-family:var(--mono);font-size:.68rem;color:var(--text-3);padding:6px 0}

/* ═══════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════ */
.admin-section{margin-bottom:16px;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .45s both}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.admin-title{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--gold);letter-spacing:.03em}
.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:20px}
.admin-stat-card{background:var(--surface);padding:18px 16px;text-align:center;transition:all .3s var(--ease-out)}
.admin-stat-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.admin-stat-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.admin-stat-val{font-family:var(--serif);font-size:1.8rem;font-weight:400;color:var(--gold)}
.admin-create{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:20px 22px;margin-bottom:16px}
.admin-create h3{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--gold);margin-bottom:14px}
.admin-form-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.admin-form-row input{padding:10px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--sans);font-size:.85rem;outline:none;transition:border-color .2s,box-shadow .2s}
.admin-form-row input:focus{border-color:rgba(200,160,48,0.4);background:rgba(200,160,48,0.04);box-shadow:0 0 0 3px rgba(200,160,48,0.08)}
.admin-salons{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:20px 22px}
.admin-salons h3{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--gold);margin-bottom:14px}
.admin-salon-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);transition:all .15s}
.admin-salon-row:last-child{border-bottom:none}
.admin-salon-row:hover{padding-left:6px}
.admin-salon-row strong{display:block;font-size:.85rem;color:var(--text);font-weight:500}
.admin-salon-row small{display:block;font-size:.72rem;color:var(--text-3);margin-top:2px}
.admin-salon-status{font-family:var(--mono);font-size:.55rem;text-transform:uppercase;padding:2px 8px;border-radius:2px}
.admin-salon-status.active{background:var(--green-soft);color:var(--green)}
.admin-salon-status:not(.active){background:var(--red-soft);color:var(--red)}

/* ═══════════════════════════════════════════
   ADMIN DASHBOARD — Network globale
   ═══════════════════════════════════════════ */
.admin-dashboard-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:16px}
.admin-chart-panel,.admin-notif-panel{background:var(--surface);padding:22px 24px}
.admin-chart-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:160px;padding:20px 10px 0}
.admin-chart-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.admin-chart-bar-wrap span{font-family:var(--mono);font-size:.55rem;color:var(--text-3);text-transform:uppercase}
.admin-chart-bar{width:100%;max-width:32px;background:linear-gradient(180deg,var(--gold),rgba(200,160,48,0.3));border-radius:2px 2px 0 0;transition:height 1.2s var(--ease-out);height:0%;animation:bar-grow 1.2s var(--ease-out) both}
@keyframes bar-grow{from{height:0%}to{height:var(--h)}}
.admin-chart-bar.active{background:linear-gradient(180deg,var(--green),rgba(78,204,163,0.3));box-shadow:0 0 12px rgba(78,204,163,0.2)}

.admin-notif-list{display:grid;gap:10px;max-height:200px;overflow-y:auto;padding-right:4px}
.admin-notif-item{display:grid;grid-template-columns:8px 1fr;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:4px;background:var(--surface);transition:all .15s;opacity:0;animation:item-reveal .4s var(--ease-out) both}
.admin-notif-item:nth-child(1){animation-delay:.05s}.admin-notif-item:nth-child(2){animation-delay:.1s}.admin-notif-item:nth-child(3){animation-delay:.15s}.admin-notif-item:nth-child(4){animation-delay:.2s}.admin-notif-item:nth-child(5){animation-delay:.25s}
.admin-notif-item:hover{background:var(--surface-2);border-color:var(--border-gold);transform:translateX(3px)}
.admin-notif-item.new{border-left:2px solid var(--green)}
.admin-notif-item.alert{border-left:2px solid var(--red)}
.admin-notif-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);margin-top:5px}
.admin-notif-item.new .admin-notif-dot{background:var(--green);box-shadow:0 0 6px rgba(78,204,163,0.4)}
.admin-notif-item.alert .admin-notif-dot{background:var(--red);box-shadow:0 0 6px rgba(233,69,96,0.4)}
.admin-notif-item strong{display:block;color:var(--text);font-size:.82rem;font-weight:500;margin-bottom:3px}
.admin-notif-item small{display:block;color:var(--text-3);font-size:.7rem}

.admin-pros-section{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:22px 24px;margin-bottom:16px;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .5s both}
.admin-pros-table{display:grid;gap:1px}
.admin-pros-row.header{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;padding:8px 12px;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border)}
.admin-pros-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center;transition:background .15s}
.admin-pros-row:last-child{border-bottom:none}
.admin-pros-row:hover{background:var(--gold-glow)}
.admin-pros-row strong{color:var(--text);font-weight:400;font-size:.85rem}
.admin-pros-row div{font-size:.8rem;color:var(--text-2)}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--border-gold)}

/* ═══════════════════════════════════════════
   PASSWORD TOGGLE
   ═══════════════════════════════════════════ */

.pwd-field{position:relative;display:flex;align-items:center}
.pwd-field input{width:100%;padding-right:40px}
.key-badge{font-size:.65rem;padding:2px 8px;border-radius:3px;margin-left:8px;font-family:var(--mono);font-weight:500;background:var(--red-soft);color:var(--red);border:1px solid rgba(198,40,40,0.2)}
.key-badge.configured{background:var(--green-soft);color:var(--green);border:1px solid rgba(78,204,163,0.2)}
.pwd-toggle{position:absolute;right:8px;background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:3px}
.pwd-toggle:hover{color:var(--gold)}
.pwd-toggle.active{color:var(--gold)}
.pwd-eye{display:block}

/* RESPONSIVE */
@media(max-width:960px){.kpi-grid{grid-template-columns:1fr 1fr}.agenda-grid{grid-template-columns:1fr}.admin-stats-grid{grid-template-columns:1fr 1fr}.admin-form-row{grid-template-columns:1fr 1fr}.admin-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:768px){.content{padding:20px 16px 48px}.topbar{padding:0 16px;gap:8px}.topbar-username{display:none}.hero-head{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}.auth-card{padding:32px 22px}.auth-logo{width:170px}.drawer{right:8px;width:calc(100vw - 16px)}.topbar{grid-template-columns:auto auto}.topbar-center{display:none}.admin-form-row{grid-template-columns:1fr}.admin-stats-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════
   VOICE PANEL — La Mia Voce
   ═══════════════════════════════════════════ */

.voice-badge{background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:4px;padding:8px 16px;font-family:var(--mono);font-size:.75rem;color:var(--gold);white-space:nowrap}
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.voice-panel{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:22px 24px;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .1s both}
.voice-panel-full{grid-column:1 / -1}
.voice-panel .panel-head{margin-bottom:16px}
.voice-content{display:flex;flex-direction:column;gap:12px}
.voice-divider{text-align:center;color:var(--text-3);font-size:.7rem;margin:4px 0;position:relative}
.voice-divider::before,.voice-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.voice-divider::before{left:0}.voice-divider::after{right:0}
.voice-status{font-size:.75rem;color:var(--text-3);margin-top:4px;min-height:18px}
.voice-status.success{color:var(--green)}
.voice-status.error{color:var(--red)}
.voice-status.info{color:var(--gold)}
.voice-estimate{font-size:.7rem;color:var(--text-3);font-family:var(--mono)}
.voice-test-actions{display:flex;gap:8px}

/* Consumo */
.voice-usage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.voice-usage-card{background:var(--bg-2);border:1px solid var(--border);border-radius:3px;padding:14px;text-align:center}
.voice-usage-label{font-size:.62rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:var(--mono)}
.voice-usage-val{font-size:1.4rem;font-weight:500;color:var(--text);font-family:var(--serif)}

.voice-bar-track{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.voice-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:3px;transition:width .8s var(--ease-out)}
.voice-bar-label{font-size:.65rem;color:var(--text-3);margin-bottom:6px;font-family:var(--mono)}

.voice-costs{background:var(--bg-2);border:1px solid var(--border);border-radius:3px;padding:14px 16px}
.voice-cost-row{display:flex;justify-content:space-between;font-size:.72rem;padding:5px 0;border-bottom:1px solid var(--border)}
.voice-cost-row:last-child{border-bottom:none}
.voice-cost-row span:first-child{color:var(--text-2)}
.voice-cost-row span:last-child{font-family:var(--mono);color:var(--text-3)}
.voice-cost-total{font-weight:500;border-top:1px solid var(--border-gold);margin-top:4px;padding-top:8px!important}

@media(max-width:960px){.voice-grid{grid-template-columns:1fr}.voice-usage-grid{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════
   POST-CALL FOLLOW-UP
   ═══════════════════════════════════════════ */

.postcall-badge{background:var(--green-soft);border:1px solid rgba(78,204,163,0.25);border-radius:4px;padding:8px 16px;font-family:var(--mono);font-size:.75rem;color:var(--green);white-space:nowrap}
.postcall-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
.postcall-panel{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:22px 24px;opacity:0;animation:fadeSlideUp .6s var(--ease-out) .15s both}
.postcall-content{display:flex;flex-direction:column;gap:10px}

.postcall-preview{background:var(--bg-2);border:1px solid var(--border-gold);border-radius:4px;padding:14px;margin-top:4px;animation:fadeSlideUp .3s var(--ease-out) both}
.postcall-preview-label{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:8px}
.postcall-preview-msg{font-size:.78rem;color:var(--text);line-height:1.6;white-space:pre-wrap;font-family:var(--sans)}
.postcall-preview-meta{font-size:.65rem;color:var(--text-3);margin-top:8px;font-family:var(--mono)}

.postcall-explain ol.postcall-steps{list-style:none;padding:0;margin:0;counter-reset:step}
.postcall-explain ol.postcall-steps li{position:relative;padding-left:24px;margin-bottom:8px;font-size:.74rem;color:var(--text-2);line-height:1.5}
.postcall-explain ol.postcall-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:16px;height:16px;background:var(--gold-dim);border:1px solid var(--border-gold);border-radius:50%;font-size:.6rem;font-family:var(--mono);color:var(--gold);display:flex;align-items:center;justify-content:center}
.postcall-savings{background:var(--green-soft);border:1px solid rgba(78,204,163,0.2);border-radius:3px;padding:10px 12px;font-size:.72rem;color:var(--green);margin-top:12px}

@media(max-width:960px){.postcall-grid{grid-template-columns:1fr}}