:root{
  --brand:#1b1512;
  --accent:#ff7a1a;
  --accent-d:#ff5a12;
  --gold:#ffc23c;
  --red:#ff3d2e;
  --ok:#35c98c;
  --ok-bg:rgba(53,201,140,.16);
  --warn:#ffcf4d;
  --warn-bg:rgba(255,207,77,.16);
  --danger:#ff5a5a;
  --danger-bg:rgba(255,90,90,.14);
  --bg:#171310;
  --void:#171310;
  --card:#211a15;
  --glass:rgba(255,232,210,.055);
  --glass-strong:rgba(255,232,210,.10);
  --line:rgba(255,224,190,.14);
  --line2:rgba(255,224,190,.08);
  --txt:#f7efe6;
  --muted:#a89686;
  --muted-faint:#786554;
  --sheen:rgba(255,255,255,.4);
  --field-bg:rgba(255,255,255,.04);
  --row-hover:rgba(255,232,210,.045);
  --header-tint:rgba(255,255,255,.03);
  --pill-off-bg:rgba(255,255,255,.08);
  --pill-cop-bg:rgba(79,139,255,.16);
  --pill-cop-fg:#8fb4ff;
  --pill-usd-fg:#5fe3ab;
  --chart-otros:#79695c;
  --radius:16px;
  --shadow:0 16px 34px -18px rgba(0,0,0,.7);
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  --brand:#fdf6ea;
  --ok:#1f9d63;
  --ok-bg:rgba(31,157,99,.12);
  --warn:#c98a00;
  --warn-bg:rgba(201,138,0,.12);
  --danger:#d64545;
  --danger-bg:rgba(214,69,69,.12);
  --bg:#f6f0e6;
  --void:#f6f0e6;
  --card:#fffaf3;
  --glass:rgba(255,255,255,.60);
  --glass-strong:rgba(255,255,255,.82);
  --line:rgba(120,88,58,.14);
  --line2:rgba(120,88,58,.09);
  --txt:#2b2016;
  --muted:#6d5c4c;
  --muted-faint:#9c8b78;
  --sheen:rgba(120,80,40,.10);
  --field-bg:rgba(90,65,40,.045);
  --row-hover:rgba(90,65,40,.05);
  --header-tint:rgba(90,65,40,.035);
  --pill-off-bg:rgba(90,65,40,.07);
  --pill-cop-bg:rgba(61,116,224,.12);
  --pill-cop-fg:#2d5bc4;
  --pill-usd-fg:#157a4f;
  --chart-otros:#b9ab98;
  --shadow:0 14px 28px -20px rgba(120,80,40,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--txt);font-size:14px;font-variant-numeric:tabular-nums}
#app{display:flex;min-height:100vh;position:relative;z-index:1}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- Fondo ambiental (vidrio necesita algo real que desenfocar) ---------- */
.bg-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--void)}
.bg-ambient .blob{position:absolute;border-radius:50%;filter:blur(80px);animation:bg-drift 40s ease-in-out infinite alternate}
.bg-ambient .blob-lamp{width:640px;height:640px;top:-220px;left:6%;background:radial-gradient(circle, rgba(255,178,90,.5), transparent 68%);opacity:.8}
.bg-ambient .blob-flare{width:560px;height:560px;bottom:-260px;right:-120px;background:radial-gradient(circle, var(--red), transparent 70%);opacity:.38;animation-duration:48s;animation-delay:-9s}
.bg-ambient .blob-shadow{width:520px;height:520px;bottom:4%;left:-160px;background:radial-gradient(circle, #1c3b3a, transparent 70%);opacity:.5;animation-duration:54s;animation-delay:-18s}
.bg-ambient .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 90% 80% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%)}
.bg-ambient .grain{position:absolute;inset:0;opacity:.03;background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);background-size:3px 3px}
@keyframes bg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(5%,4%) scale(1.07)}}
@media(prefers-reduced-motion:reduce){ .bg-ambient .blob{animation:none} }
:root[data-theme="light"] .bg-ambient .blob-lamp{background:radial-gradient(circle, rgba(255,178,110,.55), transparent 68%);opacity:.85}
:root[data-theme="light"] .bg-ambient .blob-flare{background:radial-gradient(circle, var(--gold), transparent 70%);opacity:.4}
:root[data-theme="light"] .bg-ambient .blob-shadow{background:radial-gradient(circle, #bfe6da, transparent 70%);opacity:.55}
:root[data-theme="light"] .bg-ambient .vignette{background:none}
:root[data-theme="light"] .bg-ambient .grain{background-image:radial-gradient(rgba(60,40,20,.9) 1px, transparent 1px)}

/* ---------- Splash de bienvenida ---------- */
#splash{position:fixed;inset:0;z-index:9999;background:var(--brand);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .5s ease, visibility .5s ease}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
#splash img{width:112px;height:112px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 6px rgba(255,255,255,.05), 0 10px 45px rgba(255,122,26,.35);
  animation:splash-pop .7s cubic-bezier(.34,1.56,.64,1) both,
            splash-pulse 1.8s ease-in-out .7s infinite}
#splash .splash-txt{color:var(--txt);font-family:var(--font-display);font-weight:700;font-size:16px;text-align:center;
  letter-spacing:.02em;opacity:0;animation:splash-fade .5s ease .35s forwards}
#splash .splash-txt span{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;color:var(--muted);margin-top:3px}
@keyframes splash-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes splash-pulse{0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,.05), 0 10px 45px rgba(255,122,26,.35)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 10px 60px rgba(255,122,26,.6)}}
@keyframes splash-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  #splash img{animation:none}
  #splash .splash-txt{animation:none;opacity:1}
}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display)}
svg.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Sidebar ---------- */
.sidebar{width:238px;background:linear-gradient(180deg, rgba(255,232,210,.055), rgba(255,232,210,.02));backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);color:var(--muted);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.brand img{position:relative;width:42px;height:42px;border-radius:50%;object-fit:cover;animation:logo-breathe 3.6s ease-in-out infinite}
@keyframes logo-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.45)}50%{box-shadow:0 0 0 6px rgba(255,122,26,0)}}
@media(prefers-reduced-motion:reduce){ .brand img{animation:none} }
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-txt strong{color:var(--txt);font-family:var(--font-display);font-size:15px}
.brand-txt span{font-size:11.5px;color:var(--muted-faint)}
nav{display:flex;flex-direction:column;gap:2px;padding:8px 10px;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:var(--muted);padding:11px 13px;border-radius:12px;font-size:13.5px;font-weight:600;text-align:left;transition:.15s}
.nav-item:hover{background:var(--glass);color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg, rgba(255,122,26,.24), rgba(255,194,60,.06));color:var(--txt);font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,150,60,.32)}
.nav-item.active svg.icon{color:var(--gold)}
.side-foot{padding:12px;border-top:1px solid var(--line);margin-top:6px}
.side-foot p{color:var(--muted-faint);font-size:11px;text-align:center;margin:10px 0 0}
.side-foot .btn{width:100%;background:var(--glass);color:var(--muted);border:1px solid var(--line)}
.side-foot .btn:hover{background:var(--glass-strong);color:var(--txt)}

.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--glass)}
.theme-label{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.theme-label svg.icon{color:var(--accent)}
.switch{flex:none;width:40px;height:22px;padding:0;border:1px solid var(--line);border-radius:99px;background:rgba(120,100,80,.25);position:relative;transition:background .2s}
.switch-thumb{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--accent));box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(18px)}

/* ---------- Main ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar h1{font-size:20px;color:var(--txt)}
.view{padding:24px 26px 60px;min-width:0}

/* ---------- Navegacion movil ---------- */
.btn-menu{display:none;border:0;background:transparent;font-size:22px;color:var(--txt);padding:4px 6px;border-radius:8px;line-height:1;margin-right:4px}
.btn-menu:hover{background:var(--glass)}
.sidebar-backdrop{display:none}
@media(max-width:900px){
  .btn-menu{display:inline-flex;align-items:center}
  .topbar-left{display:flex;align-items:center}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 0 rgba(0,0,0,0)}
  .sidebar.open{transform:translateX(0);box-shadow:12px 0 40px rgba(0,0,0,.5)}
  .sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(6,4,3,.6);z-index:55}
}

/* ---------- Buttons ---------- */
.btn{border:1px solid var(--line);background:var(--glass);color:var(--txt);padding:9px 15px;border-radius:12px;font-size:13.5px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--line2);background:var(--glass-strong)}
.btn.primary{position:relative;overflow:hidden;background:linear-gradient(135deg, var(--gold), var(--accent));border-color:rgba(255,190,110,.4);color:#241a10}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);transform:skewX(-18deg);transition:left .5s cubic-bezier(.16,1,.3,1)}
.btn.primary:hover::after{left:130%}
.btn.dark{background:var(--brand);border-color:var(--brand);color:var(--txt)}
.btn.dark:hover{background:#120d0a}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#0c2118}
.btn.ok:hover{filter:brightness(.95)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{color:var(--danger);border-color:rgba(255,90,90,.35)}
.btn.danger:hover{background:var(--danger-bg)}
.icon-btn{border:0;background:transparent;font-size:16px;color:var(--muted);padding:4px 7px;border-radius:7px}
.icon-btn:hover{background:var(--glass);color:var(--txt)}

/* ---------- Cards / KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.kpi{position:relative;overflow:hidden;background:var(--glass);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);animation:riseIn .55s cubic-bezier(.16,1,.3,1) backwards;transition:transform .25s ease,box-shadow .25s ease}
.kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--sheen),transparent)}
.kpi:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(0,0,0,.75)}
.kpi-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:rgba(255,232,210,.08);color:var(--accent);margin-bottom:10px}
.kpi .lbl{color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.kpi .val{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--txt);margin-top:6px}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:4px}
.kpi.accent{background:linear-gradient(120deg, var(--red) 0%, var(--accent) 55%, var(--gold) 100%);border-color:rgba(255,220,180,.4)}
.kpi.accent .kpi-icon{background:rgba(255,255,255,.28);color:#3a1e08}
.kpi.accent .lbl{color:rgba(30,15,5,.72)}
.kpi.accent .val{color:#221204}
.kpi.accent .sub{color:rgba(35,18,6,.75)}
.kpi.warn{box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,207,77,.25)}
.kpi.warn .val{color:var(--warn)}
.kpi.ok{box-shadow:var(--shadow),inset 0 0 0 1px rgba(53,201,140,.25)}
.kpi.ok .val{color:var(--ok)}
.kpi:nth-child(1){animation-delay:.02s}
.kpi:nth-child(2){animation-delay:.07s}
.kpi:nth-child(3){animation-delay:.12s}
.kpi:nth-child(4){animation-delay:.17s}
.kpi:nth-child(5){animation-delay:.22s}
.kpi:nth-child(6){animation-delay:.27s}
.kpi:nth-child(7){animation-delay:.32s}
.kpi:nth-child(8){animation-delay:.37s}

.panel{position:relative;overflow:hidden;background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;animation:riseIn .6s cubic-bezier(.16,1,.3,1) backwards}
.panel::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--sheen),transparent)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line2)}
.panel-head h3{font-size:15px;color:var(--txt)}
.panel-body{padding:16px 18px}
.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start}
.grid-2 .panel:nth-child(2){animation-delay:.06s}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- Chart (barras CSS) ---------- */
.bars{display:flex;align-items:flex-end;gap:12px;height:180px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar-wrap{width:100%;display:flex;align-items:flex-end;justify-content:center;height:150px}
.bar{width:60%;max-width:38px;background:linear-gradient(180deg,var(--gold),var(--accent));border-radius:8px 8px 0 0;min-height:3px;position:relative;transition:.2s;box-shadow:0 0 14px rgba(255,122,26,.35)}
.bar:hover{filter:brightness(1.08)}
.bar .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--brand);color:var(--txt);font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;margin-bottom:5px;opacity:0;pointer-events:none;transition:.15s;border:1px solid var(--line)}
.bar:hover .tip{opacity:1}
.bar-lbl{font-size:11px;color:var(--muted);white-space:nowrap}

/* ---------- Top clientes: avatar + barra de progreso ---------- */
.rank-row{display:flex;align-items:center;gap:12px;padding:7px 2px}
.avatar{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#241a10}
.rank-main{flex:1;min-width:0}
.rank-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px}
.rank-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--txt)}
.rank-amt{font-weight:700;font-family:var(--font-display);flex:none;color:var(--txt)}
.track{height:5px;border-radius:99px;background:var(--line2);overflow:hidden}
.track-fill{height:100%;border-radius:99px;background:linear-gradient(90deg, var(--accent), var(--gold));transition:width .5s cubic-bezier(.16,1,.3,1)}

/* ---------- Gráfico de torta ---------- */
.pie-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pie-wrap svg{flex-shrink:0}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:140px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:13px}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-label{flex:1;color:var(--txt)}
.legend-val{font-weight:700;color:var(--txt);font-family:var(--font-display)}

/* ---------- Gráfico de puntos ---------- */
.scatter-legend{display:flex;gap:18px;margin-top:8px;font-size:12px;color:var(--muted)}
.scatter-legend span{display:inline-flex;align-items:center;gap:6px}

/* ---------- Tables ---------- */
.tbl-tools{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:12px;font-size:13.5px;background:var(--glass);color:var(--txt)}
.search::before{content:"🔎";position:absolute;left:11px;top:8px;font-size:13px;opacity:.6}
table{width:100%;border-collapse:collapse;font-size:13px}
.table-wrap{overflow-x:auto;background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
thead th{background:var(--header-tint);color:var(--muted);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--txt)}
thead th.sortable .sort-arrow{color:var(--accent);font-size:10px}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle;color:var(--txt)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--row-hover)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.actions{white-space:nowrap;text-align:right}
.desc-cell{max-width:420px}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.pill.cop{background:var(--pill-cop-bg);color:var(--pill-cop-fg)}
.pill.usd{background:var(--ok-bg);color:var(--pill-usd-fg)}
.pill.off{background:var(--pill-off-bg);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.empty{text-align:center;color:var(--muted);padding:36px 10px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:12.5px;font-weight:600;color:var(--muted)}
input,select,textarea{font-family:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);color:var(--txt);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,.18)}
textarea{resize:vertical;min-height:60px}
.hint{font-size:11.5px;color:var(--muted)}

/* ---------- Invoice builder ---------- */
.inv-cols{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.inv-col-main{min-width:0}
@media(max-width:1050px){.inv-cols{grid-template-columns:1fr}}
.seg{display:inline-flex;background:var(--field-bg);border-radius:12px;padding:3px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:7px 16px;border-radius:9px;font-weight:600;color:var(--muted);font-size:13px}
.seg button.on{background:linear-gradient(135deg, var(--gold), var(--accent));color:#241a10;box-shadow:0 4px 14px -4px rgba(255,122,26,.5)}
.items-tbl td{padding:6px 6px}
.items-tbl input,.items-tbl select{padding:7px 8px;font-size:12.5px}
.items-tbl .num-in{text-align:right}
.items-tbl thead th{padding:8px 6px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:sticky;top:88px}
.tot-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px}
.tot-line.big{border-top:2px solid var(--line);margin-top:6px;padding-top:12px;font-size:19px;font-weight:700;color:var(--txt);font-family:var(--font-display)}
.tot-line input{width:120px;text-align:right}
.mini{width:60px!important}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(6,4,3,.65);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:70;overflow-y:auto}
.modal{background:var(--card);border:1px solid var(--line);border-radius:18px;width:100%;max-width:560px;box-shadow:0 30px 70px rgba(0,0,0,.55);animation:pop .15s ease}
@keyframes pop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}}
.modal.wide{max-width:920px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line2)}
.modal-head h3{color:var(--txt);font-size:16px}
.modal-body{padding:20px;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line2)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--brand);color:var(--txt);padding:12px 20px;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:80;font-size:13.5px;font-weight:500;transition:.2s;border:1px solid var(--line)}
.toast.ok{background:#173327;border-color:rgba(53,201,140,.4);color:#8fedc6}
.toast.err{background:#331616;border-color:rgba(255,90,90,.4);color:#ffb0b0}
.hidden{display:none!important}

.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tag{font-size:11px;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tpl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px}
.tpl-card h4{color:var(--txt);font-size:15px}
.tpl-card .tpl-meta{font-size:12.5px;color:var(--muted);flex:1}
.tpl-card .tpl-actions{display:flex;gap:8px;flex-wrap:wrap}
.link{background:none;border:0;color:var(--accent);font-weight:600;padding:0;font-size:13px}
.link:hover{text-decoration:underline}
.fixed-label{display:inline-block;font-weight:700;color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:6px 12px;border-radius:8px;font-size:13px}

/* ---------- Responsive (pantallas angostas) ---------- */
@media(max-width:900px){
  .topbar{padding:14px 16px}
  .view{padding:16px 14px 50px}
  .kpi .val{font-size:22px}
  .modal-back{padding:16px 10px;align-items:center}
  /* el <table> trae width:100% inline; min-width fuerza scroll horizontal
     real en vez de apachurrar las columnas hasta ser inusables */
  .items-tbl{min-width:750px}
  /* backdrop-filter en varias tarjetas a la vez puede sentirse pesado en
     celulares de gama baja; se desactiva el blur como red de seguridad de
     rendimiento. Sin blur, el tinte de vidrio (--glass, ~5% opacidad) se ve
     casi transparente y deja el texto de atrás filtrándose encima - por eso
     aqui se cambia a un fondo solido (--card) en vez de solo quitar el blur */
  .sidebar,.topbar,.kpi,.panel,.table-wrap{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .side-card{position:static}
}

/* ---------- Login ---------- */
.login-body{background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;position:relative;z-index:1}
.login-wrap{width:100%;max-width:360px;padding:20px;position:relative;z-index:1}
.login-card{background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px;text-align:center}
.login-logo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:12px;animation:logo-breathe 3.6s ease-in-out infinite}
.login-card h1{font-size:18px;color:var(--txt)}
.login-sub{color:var(--muted);font-size:12.5px;margin:2px 0 22px}
.login-form{text-align:left;display:flex;flex-direction:column;gap:14px}
.login-error{background:var(--danger-bg);color:var(--danger);font-size:12.5px;padding:9px 12px;border-radius:8px;margin-bottom:16px}