/* ════════════════════════════════════════════════════════
   CyberDocs MX — Pastel Playful v3
   Lavanda · Mint · Peach · superficies con tinte cálido
   Misma API: cero cambios de IDs/clases.
════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

:root{
  /* ── DARK con tinte violeta (no negro plano) ── */
  --bg:#15121f;
  --bg2:#1d1930;
  --bg3:#272040;
  --bg4:#322a52;
  --paper:#fff;

  --text:#f5f1ff;
  --text2:#b4abd0;
  --text3:#7a7396;

  --border:rgba(245,241,255,.08);
  --border2:rgba(245,241,255,.14);
  --border3:rgba(245,241,255,.22);

  /* acento principal: lavanda Apple-pastel */
  --accent:#b69dff;
  --accent2:#cdbcff;
  --accent-deep:#9070ff;
  --accentbg:rgba(182,157,255,.16);
  --accentborder:rgba(182,157,255,.40);

  /* secundario peach */
  --peach:#ffb4a2;
  --peachbg:rgba(255,180,162,.16);
  --peachborder:rgba(255,180,162,.40);

  /* terciario mint */
  --mint:#a3e6cd;
  --mintbg:rgba(163,230,205,.16);
  --mintborder:rgba(163,230,205,.40);

  /* sky */
  --sky:#a5d8ff;
  --skybg:rgba(165,216,255,.16);

  --success:#7ee0b1;--successbg:rgba(126,224,177,.14)
  ;--warning:#ffd089;--warningbg:rgba(255,208,137,.14);
  --danger:#ff9eb4;--dangerbg:rgba(255,158,180,.14);
  --info:#a5d8ff;--infobg:rgba(165,216,255,.14);

  /* radios suaves Apple-feel */
  --radius:16px;
  --radius2:18px;
  --radius3:10px;
  --radius-pill:980px;

  --shadow-sm:0 1px 2px rgba(15,10,40,.18),0 2px 8px rgba(15,10,40,.12);
  --shadow:0 8px 24px rgba(15,10,40,.32),0 2px 6px rgba(15,10,40,.18);
  --shadow-lg:0 24px 60px rgba(15,10,40,.48),0 8px 24px rgba(15,10,40,.28);
  --glow:0 0 0 4px var(--accentbg);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.22s;

  --topbar-h:64px;
  --sidebar-w:264px;

  /* tipografía limpia, sin serif */
  --f-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  --f-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

body.light-mode{
  /* ── LIGHT con tinte rosa-lavanda (NO beige) ── */
  --bg:#f7f3ff;
  --bg2:#ffffff;
  --bg3:#f1ebfb;
  --bg4:#e6dcf6;
  --paper:#1a1530;

  --text:#1a1530;
  --text2:#5a5478;
  --text3:#8e88a8;

  --border:rgba(26,21,48,.08);
  --border2:rgba(26,21,48,.12);
  --border3:rgba(26,21,48,.20);

  --accent:#7c5cff;
  --accent2:#9275ff;
  --accent-deep:#5a3df0;
  --accentbg:rgba(124,92,255,.10);
  --accentborder:rgba(124,92,255,.30);

  --peach:#ff7a5c;
  --peachbg:rgba(255,122,92,.10);
  --peachborder:rgba(255,122,92,.30);

  --mint:#34c89a;
  --mintbg:rgba(52,200,154,.10);
  --mintborder:rgba(52,200,154,.30);

  --sky:#5aa9ff;
  --skybg:rgba(90,169,255,.10);

  --success:#1fa470;--successbg:rgba(31,164,112,.10);
  --warning:#d68410;--warningbg:rgba(214,132,16,.10);
  --danger:#e85a7a;  --dangerbg:rgba(232,90,122,.10);
  --info:#3a8fdb;    --infobg:rgba(58,143,219,.10);

  --shadow-sm:0 1px 2px rgba(26,21,48,.04),0 2px 6px rgba(26,21,48,.05);
  --shadow:0 6px 20px rgba(26,21,48,.06),0 2px 6px rgba(26,21,48,.04);
  --shadow-lg:0 24px 60px rgba(26,21,48,.10),0 8px 24px rgba(26,21,48,.06);
}

/* alias inline → tipografía nueva */
[style*="Syne"],[style*="DM Sans"],[style*="Instrument"],[style*="JetBrains"]{font-family:var(--f-display)!important;letter-spacing:-.005em!important;font-style:normal!important}

html,body{font-family:var(--f-body);letter-spacing:-.005em}
::selection{background:var(--accent);color:#fff}

*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:padding-box;border:3px solid transparent}

html{overflow-x:clip;max-width:100vw}
body{background:var(--bg);color:var(--text);font-size:15px;min-height:100vh;overflow-x:clip;max-width:100vw;position:relative;line-height:1.55}

/* blobs pastel decorativos en el fondo del body */
body::before,body::after{content:'';position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(80px);opacity:.32;pointer-events:none;z-index:0}
body::before{top:-180px;right:-160px;background:radial-gradient(circle,var(--accent),transparent 65%)}
body::after{bottom:-220px;left:-160px;background:radial-gradient(circle,var(--peach),transparent 65%)}
body.light-mode::before{opacity:.22}
body.light-mode::after{opacity:.18}

#app,#loginPage{position:relative;z-index:1}

h1,h2,h3,h4,.brand{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.1}

.hidden{display:none!important}

/* ── Theme toggle ── */
#themeToggle{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-pill);padding:8px 14px;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease);display:flex;align-items:center;gap:7px;font-family:var(--f-body)}
#themeToggle:hover{background:var(--bg3);color:var(--text);border-color:var(--border3);transform:translateY(-1px)}

/* ── Notice banner ── */
#noticeBanner{display:none;padding:11px 24px;background:linear-gradient(90deg,var(--accent),var(--peach));color:#fff;font-size:13px;font-weight:600;text-align:center;position:relative;z-index:9;letter-spacing:0}
#noticeBanner.visible{display:block}

/* ════════════════════════════════════════════════
   BADGES — pills suaves
═══════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:0}
.badge-success{background:var(--successbg);color:var(--success)}
.badge-warning{background:var(--warningbg);color:var(--warning)}
.badge-danger{background:var(--dangerbg);color:var(--danger)}
.badge-info{background:var(--infobg);color:var(--info)}
.badge-purple{background:var(--accentbg);color:var(--accent)}
.badge-gray{background:var(--bg3);color:var(--text2)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot-success{background:var(--success)}
.dot-warning{background:var(--warning)}
.dot-danger{background:var(--danger)}
.dot-info{background:var(--info)}
.dot-gray{background:var(--text3)}

/* ── Notif bell ── */
#notifBell{position:relative;display:none;align-items:center}
#notifBtn{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-pill);width:40px;height:40px;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}
#notifBtn:hover{background:var(--bg3);color:var(--text);transform:translateY(-1px)}
#notifBadge{position:absolute;top:-3px;right:-3px;background:var(--peach);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:99px;display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1;border:2px solid var(--bg)}
#notifDropdown{position:absolute;right:0;top:calc(100% + 10px);width:340px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:500;overflow:hidden;animation:dropIn .25s var(--ease)}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){#notifDropdown{position:fixed;top:64px;right:10px;left:10px;width:auto;max-height:70vh;overflow-y:auto}}
#notifDropdown.hidden{display:none!important}
.notif-item{padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--dur) var(--ease)}
.notif-item:hover{background:var(--bg3)}
.notif-item:last-child{border-bottom:none}

/* ── Loading ── */
#loadingOverlay{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:18px}
.spinner{width:34px;height:34px;border:2.5px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loadingOverlay p{color:var(--text2);font-size:14px;font-weight:500}

/* ════════════════════════════════════════════════
   LOGIN — pastel orbs + card flotante
═══════════════════════════════════════════════════ */
#loginPage{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden;padding:32px}
#loginPage::before,#loginPage::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
#loginPage::before{top:-200px;left:-180px;width:620px;height:620px;background:radial-gradient(circle,var(--accent),transparent 60%);opacity:.55}
#loginPage::after{bottom:-220px;right:-200px;width:660px;height:660px;background:radial-gradient(circle,var(--peach),transparent 60%);opacity:.45}
body.light-mode #loginPage::before{opacity:.45}
body.light-mode #loginPage::after{opacity:.40}

.login-hero{display:none}

.login-box{width:100%;max-width:440px;padding:42px 40px;background:var(--bg2);border:1px solid var(--border2);border-radius:24px;position:relative;z-index:2;box-shadow:var(--shadow-lg);animation:formIn .55s var(--ease)}
@keyframes formIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.login-box::before{display:none}

.login-logo{text-align:center;margin-bottom:30px}
.login-logo .brand{font-size:28px;font-weight:800;letter-spacing:-.025em;font-family:var(--f-display);background:linear-gradient(135deg,var(--accent),var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-logo .brand span{color:var(--accent)}
.login-logo p{color:var(--text2);font-size:14px;margin-top:8px;font-weight:500}
.logo-dark{display:block!important;margin:0 auto}
.logo-light{display:none!important;margin:0 auto}
body.light-mode .logo-dark{display:none!important}
body.light-mode .logo-light{display:block!important}

.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:7px;font-weight:600}
.form-group input{width:100%;background:var(--bg);border:1.5px solid var(--border2);border-radius:14px;padding:14px 16px;color:var(--text);font-family:var(--f-body);font-size:15px;outline:none;transition:all var(--dur) var(--ease);font-weight:500}
.form-group input:hover{border-color:var(--border3)}
.form-group input:focus{border-color:var(--accent);background:var(--bg2);box-shadow:var(--glow)}
.form-group input::placeholder{color:var(--text3)}

/* ── PRIMARY BUTTON con gradiente Apple ── */
.btn-primary{width:100%;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);border:none;border-radius:14px;padding:15px;color:#fff;font-family:var(--f-body);font-size:15px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);margin-top:14px;letter-spacing:-.01em;position:relative;box-shadow:0 6px 18px var(--accentbg),0 2px 6px var(--accentbg);overflow:hidden}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 40%);pointer-events:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px var(--accentbg),0 3px 8px var(--accentbg);filter:brightness(1.06)}
.btn-primary:active{transform:translateY(0);transition-duration:.08s}
.btn-primary:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed;box-shadow:none;filter:none}

/* ════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════ */
#app{display:flex;height:100vh;overflow:hidden;background:var(--bg)}
#app.hidden{display:none!important}

#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;position:relative}
.sidebar-header{padding:12px 16px 10px;border-bottom:1px solid var(--border);text-align:left}
.sidebar-brand{font-family:var(--f-display);font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.1;background:linear-gradient(135deg,var(--accent),var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar-brand span{color:var(--accent)}
.sidebar-role{font-size:11px;color:var(--text3);font-weight:600;margin-top:3px;letter-spacing:0}
.sidebar-nav{flex:1;overflow-y:auto;padding:14px 12px}
.nav-section{font-size:11px;color:var(--text3);font-weight:700;padding:0 12px;margin:18px 0 6px;letter-spacing:.04em;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;cursor:pointer;color:var(--text2);font-size:13.5px;font-weight:600;transition:all var(--dur) var(--ease);margin-bottom:2px;letter-spacing:-.005em;position:relative}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--accentbg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accentborder)}
.nav-item .nav-icon{width:18px;height:18px;opacity:.75;flex-shrink:0;transition:opacity var(--dur) var(--ease)}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}
.sidebar-footer{border-top:1px solid var(--border);padding:8px 10px}
.user-card{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;transition:background var(--dur) var(--ease);cursor:pointer}
.user-card:hover{background:var(--bg3)}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;letter-spacing:-.01em}
.avatar-client{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff}
.avatar-provider{background:linear-gradient(135deg,var(--peach),#f4825c);color:#fff}
.avatar-admin{background:linear-gradient(135deg,var(--mint),#5dc7a4);color:#fff}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);letter-spacing:-.005em}
.user-role-label{font-size:10.5px;color:var(--text3);margin-top:1px;font-weight:500}
.logout-btn{background:transparent;border:1px solid var(--border2);border-radius:10px;padding:7px 10px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--f-body);transition:all var(--dur) var(--ease);width:100%;margin-top:6px}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);background:var(--dangerbg)}

/* ── MAIN ── */
#main{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);display:flex;flex-direction:column;position:relative;max-width:100%}
.topbar{padding:18px 32px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg);position:sticky;top:0;z-index:10;min-height:var(--topbar-h);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar-title{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.topbar-sub{font-size:13px;color:var(--text2);margin-top:3px;font-weight:500}

/* ── CREDITS PILL ── */
.credits-pill{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-pill);padding:5px 5px 5px 16px;transition:all var(--dur) var(--ease)}
.credits-pill:hover{border-color:var(--border3);transform:translateY(-1px)}
.credits-pill .amount{font-size:18px;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.credits-pill .clabel{font-size:12px;color:var(--text3);font-weight:600}
.credits-pill .add-btn{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:none;border-radius:99px;padding:8px 16px;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);font-family:var(--f-body);box-shadow:0 4px 12px var(--accentbg)}
.credits-pill .add-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ── PANELS ── */
.panel{display:none;padding:30px 36px;flex-direction:column;gap:22px}
.panel.active{display:flex;animation:panelIn .42s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════ */
.card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:22px 24px;transition:all var(--dur) var(--ease);box-shadow:var(--shadow-sm)}
.card-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.005em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.card-title svg,.card-title .nav-icon{width:16px!important;height:16px!important;opacity:.7;color:var(--accent)}

/* ── STATS — bento Apple-esque con orbe pastel ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,45%),1fr));gap:14px}
.stat-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:22px;position:relative;overflow:hidden;transition:all var(--dur) var(--ease);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-sm)}
.stat-card::before{content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.18;filter:blur(20px);pointer-events:none;transition:opacity var(--dur) var(--ease)}
.stat-card:nth-child(2)::before{background:radial-gradient(circle,var(--peach),transparent 65%)}
.stat-card:nth-child(3)::before{background:radial-gradient(circle,var(--mint),transparent 65%)}
.stat-card:nth-child(4)::before{background:radial-gradient(circle,var(--sky),transparent 65%)}
.stat-card[onclick]{cursor:pointer}
.stat-card[onclick]:hover{transform:translateY(-3px);border-color:var(--border3);box-shadow:var(--shadow)}
.stat-card[onclick]:hover::before{opacity:.34}
.stat-label{font-size:12px;color:var(--text2);font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:8px;position:relative}
.stat-label::before{content:'';width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0;box-shadow:0 0 12px var(--accent)}
.stat-card:nth-child(2) .stat-label::before{background:var(--peach);box-shadow:0 0 12px var(--peach)}
.stat-card:nth-child(3) .stat-label::before{background:var(--mint);box-shadow:0 0 12px var(--mint)}
.stat-card:nth-child(4) .stat-label::before{background:var(--sky);box-shadow:0 0 12px var(--sky)}
.stat-value{font-family:var(--f-display);font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--text);font-feature-settings:"lnum","tnum";position:relative}
.stat-value.purple{color:var(--accent)}
.stat-value.green{color:var(--mint)}
.stat-value.amber{color:var(--peach)}
.stat-value.blue{color:var(--sky)}
.stat-sub{font-size:12.5px;color:var(--text3);margin-top:6px;font-weight:500;position:relative}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:14px 18px;color:var(--text3);font-size:12px;letter-spacing:0;border-bottom:1px solid var(--border2);font-weight:700;background:var(--bg2)}
td{padding:14px 18px;border-bottom:1px solid var(--border);color:var(--text2);transition:background var(--dur) var(--ease)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--dur) var(--ease)}
tbody tr:hover td{background:var(--bg3);color:var(--text)}
.service-name{color:var(--text);font-weight:600;letter-spacing:-.005em}
.price{font-weight:700;color:var(--accent);letter-spacing:-.01em}

/* ════════════════════════════════════════════════
   CATALOG
═══════════════════════════════════════════════════ */
.cat-section{margin-bottom:32px}
.cat-label{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cat-label-text{font-family:var(--f-display);font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.025em;text-transform:none}
.cat-label-count{font-size:12px;color:var(--accent);background:var(--accentbg);border:1px solid var(--accentborder);border-radius:var(--radius-pill);padding:3px 11px;font-weight:700}
.cat-label-line{flex:1;height:1px;background:var(--border)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.service-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:22px;cursor:pointer;transition:all .28s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:170px;box-shadow:var(--shadow-sm)}
.service-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.10;filter:blur(20px);pointer-events:none;transition:opacity .28s var(--ease)}
.service-card:nth-child(2n)::before{background:radial-gradient(circle,var(--peach),transparent 65%)}
.service-card:nth-child(3n)::before{background:radial-gradient(circle,var(--mint),transparent 65%)}
.service-card:nth-child(4n)::before{background:radial-gradient(circle,var(--sky),transparent 65%)}
.service-card:hover{transform:translateY(-4px);border-color:var(--accentborder);box-shadow:var(--shadow)}
.service-card:hover::before{opacity:.30}
.sc-name{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--text);line-height:1.25;letter-spacing:-.02em;position:relative}
.sc-desc{font-size:13.5px;color:var(--text2);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative;white-space:pre-wrap}
.sc-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px;position:relative}
.sc-price{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.03em}
.sc-meta{font-size:11.5px;color:var(--text3);margin-top:3px;font-weight:500}
.sc-cta{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:none;border-radius:var(--radius-pill);padding:9px 18px;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--f-body);transition:all var(--dur) var(--ease);white-space:nowrap;letter-spacing:-.005em;box-shadow:0 4px 12px var(--accentbg)}
.sc-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════ */
#modalBg{position:fixed;inset:0;background:rgba(15,10,40,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:bgIn .25s var(--ease);padding:24px}
body.light-mode #modalBg{background:rgba(26,21,48,.30)}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:24px;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg);animation:modalIn .35s var(--ease-spring)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.modal::before{display:none}
.modal-header{padding:28px 30px 20px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.modal-header::after{content:'';position:absolute;top:-60px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.18;filter:blur(24px);pointer-events:none}
.modal-header h3{font-family:var(--f-display);font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.15;position:relative}
.modal-header p{font-size:14px;color:var(--text2);margin-top:6px;line-height:1.55;position:relative;font-weight:500}
.modal-body{padding:22px 30px}
.modal-footer{padding:16px 30px 24px;display:flex;gap:10px;justify-content:flex-end}
.modal-close{position:absolute;top:18px;right:18px;background:var(--bg3);border:1px solid var(--border2);border-radius:50%;width:34px;height:34px;color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);z-index:2}
.modal-close:hover{background:var(--danger);border-color:var(--danger);color:#fff;transform:rotate(90deg)}

.mform-group{margin-bottom:16px}
.mform-group label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:7px;font-weight:600}
.mform-group input,.mform-group textarea,.mform-group select{width:100%;background:var(--bg);border:1.5px solid var(--border2);border-radius:12px;padding:12px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;transition:all var(--dur) var(--ease);resize:vertical;letter-spacing:-.005em;font-weight:500}
.mform-group input:hover,.mform-group textarea:hover,.mform-group select:hover{border-color:var(--border3)}
.mform-group input:focus,.mform-group textarea:focus,.mform-group select:focus{border-color:var(--accent);background:var(--bg2);box-shadow:var(--glow)}
.mform-group select option{background:var(--bg2);color:var(--text)}
.mform-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%238e88a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.cost-preview{background:linear-gradient(135deg,var(--accentbg),var(--peachbg));border:1px solid var(--accentborder);border-radius:14px;padding:16px 20px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.cost-preview .clabel{font-size:13px;color:var(--text2);font-weight:600}
.cost-preview .val{font-family:var(--f-display);font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-.03em}

/* ── BUTTONS ── */
.btn-cancel{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:11px 20px;color:var(--text);font-family:var(--f-body);font-size:13.5px;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease);letter-spacing:-.005em}
.btn-cancel:hover{background:var(--bg4);border-color:var(--border3);transform:translateY(-1px)}
.btn-confirm{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:none;border-radius:12px;padding:11px 22px;color:#fff;font-family:var(--f-body);font-size:13.5px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);letter-spacing:-.005em;box-shadow:0 4px 14px var(--accentbg);position:relative;overflow:hidden}
.btn-confirm::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.btn-confirm:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 18px var(--accentbg)}
.btn-confirm:active{transform:translateY(0);transition-duration:.08s}
.btn-confirm:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed;box-shadow:none;filter:none}

.btn-sm{background:var(--bg3);border:1px solid var(--border2);border-radius:99px;padding:6px 14px;color:var(--text);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--f-body);transition:all var(--dur) var(--ease)}
.btn-sm:hover{background:var(--bg4);border-color:var(--border3);transform:translateY(-1px)}
.btn-sm.success{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--mint),#5dc7a4);box-shadow:0 3px 10px var(--mintbg)}
.btn-sm.success:hover{filter:brightness(1.08)}
.btn-sm.danger{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--danger),#e85a7a);box-shadow:0 3px 10px var(--dangerbg)}
.btn-sm.danger:hover{filter:brightness(1.08)}

.credit-option{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:1.5px solid var(--border2);border-radius:14px;padding:16px 20px;margin-bottom:10px;cursor:pointer;transition:all var(--dur) var(--ease)}
.credit-option:hover{border-color:var(--border3);transform:translateY(-1px)}
.credit-option.selected{border-color:var(--accent);background:var(--accentbg);box-shadow:var(--glow)}
.credit-option .credits{font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.03em}
.credit-option .cost{font-size:14px;color:var(--text2);font-weight:600}

.order-detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;gap:16px}
.order-detail-row:last-child{border-bottom:none}
.order-detail-row .key{color:var(--text3);font-size:13px;font-weight:500;flex-shrink:0;align-self:center}
.order-detail-row .val{color:var(--text);font-weight:600;text-align:right;max-width:60%;letter-spacing:-.005em}

/* ── TOAST ── */
#toast{position:fixed;bottom:28px;right:28px;background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:14px;padding:13px 18px;font-size:14px;box-shadow:var(--shadow-lg);z-index:2000;display:flex;align-items:center;gap:12px;transform:translateX(120%);opacity:0;transition:all .42s var(--ease-spring);max-width:380px;letter-spacing:-.005em;font-weight:500;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#toast.show{transform:none;opacity:1}
#toast .toast-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 10px currentColor}
#toast.t-success .toast-dot{background:var(--success);color:var(--success)}
#toast.t-danger .toast-dot{background:var(--danger);color:var(--danger)}
#toast.t-info .toast-dot{background:var(--info);color:var(--info)}
#toast.t-warning .toast-dot{background:var(--warning);color:var(--warning)}

.work-section{margin-bottom:22px}
.work-section h4{font-size:13px;color:var(--text);font-weight:700;margin-bottom:12px;letter-spacing:-.005em}
.info-box{background:var(--accentbg);border:1px solid var(--accentborder);border-radius:12px;padding:16px 20px;font-size:14px;color:var(--text);line-height:1.6;font-weight:500}
.delivery-area{background:var(--bg);border:1.5px solid var(--border2);border-radius:12px;padding:13px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;transition:all var(--dur) var(--ease);resize:vertical;width:100%;min-height:96px;letter-spacing:-.005em;font-weight:500}
.delivery-area:focus{border-color:var(--accent);background:var(--bg2);box-shadow:var(--glow)}

.cat-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--border2);border-radius:12px;padding:14px 18px;margin-bottom:8px;transition:all var(--dur) var(--ease)}
.cat-item:hover{border-color:var(--border3)}
.cat-item-name{font-weight:600;font-size:14.5px;letter-spacing:-.005em}
.cat-add-row{display:flex;gap:10px;margin-top:4px}
.cat-add-row input{flex:1;background:var(--bg);border:1.5px solid var(--border2);border-radius:12px;padding:12px 14px;color:var(--text);font-family:var(--f-body);font-size:14.5px;outline:none;transition:all var(--dur) var(--ease);font-weight:500}
.cat-add-row input:focus{border-color:var(--accent);box-shadow:var(--glow)}

#hamburgerBtn{display:none;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:8px;cursor:pointer;color:var(--text);transition:all var(--dur) var(--ease);flex-shrink:0;width:40px;height:40px}
#hamburgerBtn:hover{background:var(--bg3);border-color:var(--border3)}

.transfer-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.transfer-left{order:1}.transfer-right{order:2}
@media(max-width:700px){
  .transfer-grid{grid-template-columns:1fr!important;display:flex!important;flex-direction:column}
  .transfer-left{order:2}.transfer-right{order:1;position:relative!important;top:auto!important}
}

/* ════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════ */
@media(max-width:600px){
  .login-logo img{width:170px!important}
  .sidebar-header img{width:120px!important}
}
@media(max-width:700px){
  /* LOGIN */
  #loginPage{padding:18px}
  .login-box{max-width:100%;padding:34px 24px;border-radius:22px}

  /* APP SHELL */
  #app{flex-direction:column}
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:100;width:280px;min-width:280px;transform:translateX(-100%);transition:transform .35s var(--ease)}
  #sidebar.mobile-open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  #sidebarOverlay{display:none;position:fixed;inset:0;background:rgba(15,10,40,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99;animation:bgIn .25s var(--ease)}
  #sidebarOverlay.visible{display:block}
  #main{width:100%;height:100vh;height:100dvh}

  .topbar{padding:12px 16px;gap:8px;overflow:hidden;max-width:100%}
  .topbar-title{font-size:20px}
  .topbar-sub{display:none}
  #hamburgerBtn{display:flex}

  .panel{padding:18px 18px;gap:16px}

  .stats-grid{grid-template-columns:1fr 1fr!important;gap:10px;min-width:0}
  .stat-value{font-size:34px!important}
  .stat-card{padding:18px 18px;min-height:122px}

  /* Safari iOS: bloquear scroll horizontal en toda la app */
  #app,#main,.panel{overflow-x:hidden;max-width:100%;box-sizing:border-box}

  /* Todas las tablas en móvil: sin scroll horizontal por defecto */
  .table-wrap{overflow-x:hidden}
  table{min-width:0!important;width:100%}

  /* Solo permitir scroll en tablas que NO tienen layout de tarjeta */
  .table-wrap.scrollable{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Elementos con min-width fijo que desbordaban */
  div[style*="min-width:200px"],
  div[style*="min-width:220px"]{min-width:0!important;width:100%!important}

  #panel_orders .table-wrap table thead{display:none}
  #panel_orders .table-wrap table tbody tr{display:flex;flex-wrap:wrap;gap:4px;padding:14px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer}
  #panel_orders .table-wrap table tbody tr td:nth-child(1){flex:0 0 100%;font-weight:700;color:var(--text);font-size:14px}
  #panel_orders .table-wrap table tbody tr td:nth-child(2){flex:0 0 100%;font-size:12px;color:var(--text3)}
  #panel_orders .table-wrap table tbody tr td:nth-child(3){flex:1;font-size:12px;color:var(--text3)}
  #panel_orders .table-wrap table tbody tr td:nth-child(4){flex:0 0 auto}
  #panel_orders .table-wrap table tbody tr td:nth-child(5){flex:0 0 auto}
  #panel_orders .table-wrap table tbody tr td:nth-child(6){display:none}

  .card{padding:18px}
  .services-grid{grid-template-columns:1fr 1fr!important;gap:12px}
  .service-card{padding:16px;min-height:140px}
  .sc-name{font-size:15px}
  .sc-price{font-size:18px!important}

  .modal{width:100%;max-height:94vh;border-radius:20px}
  .modal-header{padding:24px 22px 16px}
  .modal-header h3{font-size:21px}
  .modal-body{padding:18px 22px}
  .modal-footer{padding:14px 22px 22px}

  div[style*="grid-template-columns:1fr 1fr"]{display:flex!important;flex-direction:column!important}
  div[style*="max-width:700px"]{max-width:100%!important}
  div[style*="flex-direction:column;gap:8px;flex-shrink:0"]{flex-direction:row!important;flex-wrap:wrap!important}

  .credits-pill .clabel{display:none}
  .credits-pill{padding:5px 5px 5px 12px;gap:8px}
  .credits-pill .amount{font-size:16px}

  .service-card{flex-direction:column!important;align-items:flex-start!important}

  #toast{bottom:14px;right:14px;left:14px;max-width:none}
  #noticeBanner{font-size:12px;padding:9px 16px}

  #themeToggle span{display:none}
  #themeToggle{padding:7px 10px}
  #notifBtn{width:38px;height:38px}

  /* ══ ADMIN: PEDIDOS + ACTIVIDAD RECIENTE → tarjetas ══ */
  #panel_admin_orders .table-wrap,
  #actividadRecienteCard .table-wrap{overflow-x:hidden}
  #panel_admin_orders .table-wrap table,
  #actividadRecienteCard .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_orders .table-wrap table thead,
  #actividadRecienteCard .table-wrap table thead{display:none}
  #panel_admin_orders .table-wrap table tbody tr,
  #actividadRecienteCard .table-wrap table tbody tr{
    display:flex;flex-direction:column;gap:4px;
    padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;
  }
  #panel_admin_orders .table-wrap table tbody tr:hover,
  #actividadRecienteCard .table-wrap table tbody tr:hover{background:var(--bg3)}
  /* Folio: pequeño gris */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(1),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(1){font-size:11px;color:var(--text3)}
  /* Servicio: grande negrita */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(2),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(2){font-size:14px;font-weight:700;color:var(--text)}
  /* Cliente: pequeño */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(3),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(3){font-size:12px;color:var(--text2)}
  /* Dato: pequeño gris */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(4),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(4){font-size:11px;color:var(--text3)}
  /* Proveedor y costo: ocultos */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(5),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(5),
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(6),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(6){display:none}
  /* Estado badge */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(7),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(7){display:flex}
  /* Acciones */
  #panel_admin_orders .table-wrap table tbody tr td:nth-child(8),
  #actividadRecienteCard .table-wrap table tbody tr td:nth-child(8){display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}

  /* ══ USUARIOS → tarjetas en móvil ══ */
  #panel_admin_users .table-wrap{overflow-x:hidden}
  #panel_admin_users .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_users .table-wrap table thead{display:none}
  #panel_admin_users .table-wrap table tbody tr{
    display:flex;flex-direction:column;gap:5px;
    padding:12px 14px;border-bottom:1px solid var(--border);
  }
  /* Col 1 Nombre+avatar */
  #panel_admin_users .table-wrap table tbody tr td:nth-child(1){font-size:14px;font-weight:600}
  /* Col 2 Email */
  #panel_admin_users .table-wrap table tbody tr td:nth-child(2){font-size:12px;color:var(--text3)}
  /* Col 3 Rol badge */
  #panel_admin_users .table-wrap table tbody tr td:nth-child(3){display:flex}
  /* Col 4 Créditos */
  #panel_admin_users .table-wrap table tbody tr td:nth-child(4){font-size:12px;color:var(--text2)}
  /* Col 5 Acciones */
  #panel_admin_users .table-wrap table tbody tr td:nth-child(5){display:flex;gap:6px;flex-wrap:wrap}

  /* ══ TRANSACCIONES → tarjetas en móvil ══ */
  #panel_admin_credits .table-wrap{overflow-x:hidden}
  #panel_admin_credits .table-wrap table{min-width:0!important;width:100%}
  #panel_admin_credits .table-wrap table thead{display:none}
  #panel_admin_credits .table-wrap table tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:3px 8px;
    padding:10px 14px;border-bottom:1px solid var(--border);
  }
  /* Fecha: fila 1 izq */
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(1){
    grid-row:1;grid-column:1;font-size:11px;color:var(--text3)
  }
  /* Usuario: fila 2 full */
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(2){
    grid-row:2;grid-column:1/3;font-size:13px;font-weight:600;color:var(--text)
  }
  /* Descripción: fila 3 full */
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(3){
    grid-row:3;grid-column:1/3;font-size:11px;color:var(--text3)
  }
  /* Tipo: oculto (info redundante en móvil) */
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(4){display:none}
  /* Cantidad: fila 1 derecha */
  #panel_admin_credits .table-wrap table tbody tr td:nth-child(5){
    grid-row:1;grid-column:2;font-size:13px;font-weight:700;text-align:right
  }

  /* ══ FECHA FILTRO CRÉDITOS → apilado ══ */
  #panel_admin_credits .card div[style*="display:flex"][style*="gap:10px"][style*="align-items:flex-end"]{
    flex-direction:column!important;
  }
  #panel_admin_credits .card div[style*="display:flex"][style*="gap:10px"][style*="align-items:flex-end"] > *{
    width:100%!important;min-width:0!important;
  }

  /* ══ REPORTES: tabla de servicios → scroll horizontal permitido ══ */
  #panel_admin_reports .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #panel_admin_reports .table-wrap table{min-width:600px}

  /* ══ REPORTES: form filtro → apilado ══ */
  div[style*="grid-template-columns:1fr 1fr 1fr auto"]{
    display:flex!important;flex-direction:column!important;gap:10px!important;
  }
  div[style*="grid-template-columns:1fr 1fr 1fr auto"] > *{
    width:100%!important;min-width:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ════════════════════════════════════════════════
   THEME PICKER · 8 paletas pastel
═══════════════════════════════════════════════════ */
/* — DARK overrides por tema — */
body[data-theme="lavanda"]{--bg:#15121f;--bg2:#1d1930;--bg3:#272040;--bg4:#322a52;--accent:#b69dff;--accent2:#cdbcff;--accent-deep:#9070ff;--accentbg:rgba(182,157,255,.16);--accentborder:rgba(182,157,255,.40)}
body[data-theme="rosa"]{--bg:#1f1218;--bg2:#2a1924;--bg3:#3a2333;--bg4:#4a2c41;--accent:#ff9ec0;--accent2:#ffb8d1;--accent-deep:#ff6fa3;--accentbg:rgba(255,158,192,.16);--accentborder:rgba(255,158,192,.40)}
body[data-theme="menta"]{--bg:#101e1a;--bg2:#162a24;--bg3:#1e3a32;--bg4:#264a40;--accent:#7ee0b8;--accent2:#a3e8c8;--accent-deep:#4cd0a0;--accentbg:rgba(126,224,184,.16);--accentborder:rgba(126,224,184,.40)}
body[data-theme="cielo"]{--bg:#101822;--bg2:#16222f;--bg3:#1f2e40;--bg4:#283d54;--accent:#9ec9ff;--accent2:#bcd9ff;--accent-deep:#6ea7ff;--accentbg:rgba(158,201,255,.16);--accentborder:rgba(158,201,255,.40)}
body[data-theme="durazno"]{--bg:#1e1612;--bg2:#2a1f18;--bg3:#3a2c22;--bg4:#4a392c;--accent:#ffb792;--accent2:#ffcdb1;--accent-deep:#ff8e5a;--accentbg:rgba(255,183,146,.16);--accentborder:rgba(255,183,146,.40)}
body[data-theme="ciruela"]{--bg:#1c1020;--bg2:#26172c;--bg3:#36213e;--bg4:#462b50;--accent:#e6a3e6;--accent2:#eebcee;--accent-deep:#cf76cf;--accentbg:rgba(230,163,230,.16);--accentborder:rgba(230,163,230,.40)}
body[data-theme="limon"]{--bg:#1a1a10;--bg:#1a1a10;--bg2:#222218;--bg3:#2f2f20;--bg4:#3d3d2a;--accent:#e8d97a;--accent2:#efe39c;--accent-deep:#d4bf48;--accentbg:rgba(232,217,122,.16);--accentborder:rgba(232,217,122,.40)}
body[data-theme="grafito"]{--bg:#161618;--bg2:#1f1f22;--bg3:#2b2b30;--bg4:#3a3a40;--accent:#b8bcc6;--accent2:#cfd2d9;--accent-deep:#8e94a3;--accentbg:rgba(184,188,198,.14);--accentborder:rgba(184,188,198,.36)}

/* — LIGHT overrides por tema — */
body.light-mode[data-theme="lavanda"]{--bg:#f7f3ff;--bg2:#ffffff;--bg3:#f1ebfb;--bg4:#e6dcf6;--accent:#7c5cff;--accent2:#9275ff;--accent-deep:#5a3df0;--accentbg:rgba(124,92,255,.10);--accentborder:rgba(124,92,255,.30)}
body.light-mode[data-theme="rosa"]{--bg:#fff3f7;--bg2:#ffffff;--bg3:#fbe7ef;--bg4:#f5d4e3;--accent:#e85a8b;--accent2:#f37aa6;--accent-deep:#c43770;--accentbg:rgba(232,90,139,.10);--accentborder:rgba(232,90,139,.30)}
body.light-mode[data-theme="menta"]{--bg:#f0fbf6;--bg2:#ffffff;--bg3:#e2f5ea;--bg4:#cdebd9;--accent:#1fa470;--accent2:#34c089;--accent-deep:#157a52;--accentbg:rgba(31,164,112,.10);--accentborder:rgba(31,164,112,.30)}
body.light-mode[data-theme="cielo"]{--bg:#f0f6ff;--bg2:#ffffff;--bg3:#e3eefd;--bg4:#cee0f8;--accent:#3a8fdb;--accent2:#5aa9ff;--accent-deep:#1f6aae;--accentbg:rgba(58,143,219,.10);--accentborder:rgba(58,143,219,.30)}
body.light-mode[data-theme="durazno"]{--bg:#fff5ee;--bg2:#ffffff;--bg3:#fbe9d8;--bg4:#f5d6bd;--accent:#e36b3a;--accent2:#f08458;--accent-deep:#b54e22;--accentbg:rgba(227,107,58,.10);--accentborder:rgba(227,107,58,.30)}
body.light-mode[data-theme="ciruela"]{--bg:#fbf0fb;--bg2:#ffffff;--bg3:#f5e2f5;--bg4:#ebceeb;--accent:#a83fa8;--accent2:#c45dc4;--accent-deep:#7d2a7d;--accentbg:rgba(168,63,168,.10);--accentborder:rgba(168,63,168,.30)}
body.light-mode[data-theme="limon"]{--bg:#fcfbe8;--bg2:#ffffff;--bg3:#f5f2cf;--bg4:#e9e4ad;--accent:#a08a16;--accent2:#bba32a;--accent-deep:#776509;--accentbg:rgba(160,138,22,.10);--accentborder:rgba(160,138,22,.30)}
body.light-mode[data-theme="grafito"]{--bg:#f4f5f8;--bg2:#ffffff;--bg3:#eaecf1;--bg4:#dadde4;--accent:#525964;--accent2:#6c747f;--accent-deep:#363c45;--accentbg:rgba(82,89,100,.10);--accentborder:rgba(82,89,100,.28)}

/* botón paleta + popover */
#themePaletteBtn{background:var(--bg2);border:1px solid var(--border2);border-radius:999px;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s cubic-bezier(.2,.8,.2,1);position:relative;flex-shrink:0;color:var(--text2)}
#themePaletteBtn:hover{background:var(--bg3);color:var(--text);transform:translateY(-1px)}
#themePaletteBtn .ring{position:absolute;inset:8px;border-radius:50%;background:conic-gradient(from 0deg,#b69dff,#ff9ec0,#7ee0b8,#9ec9ff,#ffb792,#e6a3e6,#e8d97a,#b69dff);box-shadow:inset 0 0 0 3px var(--bg2)}
#themePopover{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:18px;box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.4));padding:18px;z-index:2500;width:280px;animation:popIn .25s cubic-bezier(.34,1.56,.64,1)}
#themePopover.hidden{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
#themePopover .tp-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
#themePopover .tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tp-swatch{aspect-ratio:1/1;border-radius:14px;border:2px solid transparent;cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:6px}
.tp-swatch:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.tp-swatch.active{border-color:var(--text)}
.tp-swatch.active::after{content:'';position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.tp-swatch .tp-name{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);letter-spacing:0}
.tp-swatch[data-th="lavanda"]{background:linear-gradient(135deg,#b69dff,#7c5cff)}
.tp-swatch[data-th="rosa"]{background:linear-gradient(135deg,#ff9ec0,#e85a8b)}
.tp-swatch[data-th="menta"]{background:linear-gradient(135deg,#7ee0b8,#1fa470)}
.tp-swatch[data-th="cielo"]{background:linear-gradient(135deg,#9ec9ff,#3a8fdb)}
.tp-swatch[data-th="durazno"]{background:linear-gradient(135deg,#ffb792,#e36b3a)}
.tp-swatch[data-th="ciruela"]{background:linear-gradient(135deg,#e6a3e6,#a83fa8)}
.tp-swatch[data-th="limon"]{background:linear-gradient(135deg,#e8d97a,#a08a16)}
.tp-swatch[data-th="grafito"]{background:linear-gradient(135deg,#b8bcc6,#525964)}
#themePopoverOverlay{position:fixed;inset:0;z-index:2400}
#themePopoverOverlay.hidden{display:none}
@media(max-width:600px){#themePopover{width:calc(100vw - 24px);right:12px!important;left:12px!important}}