:root {
    --bg: #060f1b;
    --bg-2: #071827;
    --panel: #0e1b2e;
    --panel-soft: #10233a;
    --panel-2: #0a1727;
    --line: rgba(81, 139, 198, .18);
    --line-strong: rgba(0, 194, 255, .46);
    --text: #edf6ff;
    --muted: #7890aa;
    --cyan: #16d5f4;
    --blue: #2788ff;
    --green: #1fe08a;
    --yellow: #facb28;
    --orange: #ff8a34;
    --red: #ff4f66;
    --pink: #e94ca7;
    --shadow: 0 20px 80px rgba(0,0,0,.34);
    --shadow-soft: 0 10px 32px rgba(0,0,0,.24);
    --radius: 11px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scrollbar-color: rgba(22,213,244,.38) rgba(6,15,27,.8); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 78% 4%, rgba(19,195,255,.15), transparent 23rem),
        radial-gradient(circle at 20% 25%, rgba(39,136,255,.09), transparent 27rem),
        linear-gradient(180deg, #06101c 0%, #071827 42%, #06101c 100%);
    font-size: 13px;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.52), transparent 70%);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(6,15,27,.92); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(22,213,244,.5), rgba(39,136,255,.35)); border-radius: 999px; border: 2px solid rgba(6,15,27,.9); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(22,213,244,.76), rgba(39,136,255,.56)); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: 238px; z-index: 20;
    display: flex; flex-direction: column; gap: 16px; padding: 18px 17px;
    background: linear-gradient(180deg, rgba(4,14,25,.98), rgba(6,18,31,.98));
    border-right: 1px solid rgba(81,139,198,.17); box-shadow: 14px 0 40px rgba(0,0,0,.18);
}
.brand { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.brand-mark, .user-chip > span { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:linear-gradient(135deg,#13d4f2,#2b86ff); color:white; font-weight:900; box-shadow:0 0 28px rgba(22,213,244,.34); }
.brand strong { display:block; font-size:14px; letter-spacing:.01em; }
.brand small, .user-chip small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.sidebar nav { display:grid; gap:4px; overflow-y:auto; padding-right:3px; }
.sidebar nav p { margin:12px 0 5px; color:#657b94; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.sidebar nav a { display:flex; align-items:center; gap:10px; min-height:35px; padding:8px 10px; border-radius:8px; color:#c0cce0; font-weight:750; font-size:12px; transition:.18s ease; }
.sidebar nav a span { width:18px; color:#758aa3; font-size:10px; }
.sidebar nav a.active, .sidebar nav a:hover { color:#fff; background:linear-gradient(90deg, rgba(39,136,255,.38), rgba(22,213,244,.13)); outline:1px solid rgba(22,213,244,.42); box-shadow:inset 0 0 22px rgba(22,213,244,.08), 0 0 22px rgba(19,195,255,.06); }
.user-chip { margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.user-chip strong { display:block; font-size:12px; }
.main { width:100%; margin-left:238px; }
.topbar { position:sticky; top:0; z-index:10; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:rgba(6,15,27,.77); backdrop-filter:blur(18px); border-bottom:1px solid rgba(81,139,198,.18); }
.crumb { color:#a4b5ca; font-weight:750; }
.top-actions { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }
.icon-btn { display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:9px; background:rgba(12,27,45,.84); color:#d3e8fb; cursor:pointer; }
.menu-toggle { display:none; }
.content { padding:24px 26px 36px; max-width:1370px; }
.page-kicker { color:var(--cyan); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:900; margin-bottom:8px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.page-head h1 { margin:0; font-size:29px; line-height:1.08; letter-spacing:-.02em; text-shadow:0 0 26px rgba(255,255,255,.08); }
.page-head p { margin:8px 0 0; color:#8298b0; max-width:730px; }
.grid { display:grid; gap:14px; }
.grid.cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.two { grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card, .panel { background:linear-gradient(180deg, rgba(17,32,53,.88), rgba(9,22,38,.94)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.card::before, .panel::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg, rgba(22,213,244,.075), transparent 38%, rgba(39,136,255,.035)); opacity:.9; }
.card { padding:18px; min-height:100px; }
.card::after { content:""; position:absolute; right:-50px; top:-54px; width:140px; height:140px; background:radial-gradient(circle, rgba(22,213,244,.12), transparent 65%); }
.metric-label { color:#8fa5bd; text-transform:uppercase; font-size:10px; font-weight:900; margin-bottom:9px; letter-spacing:.04em; }
.metric-value { font-size:23px; font-weight:950; margin-bottom:6px; letter-spacing:-.025em; }
.metric-note { color:var(--green); font-size:11px; font-weight:800; }
.metric-note.bad { color:#ff6b86; }
.metric-icon { position:absolute; right:17px; top:17px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(39,136,255,.17); color:var(--cyan); font-weight:900; box-shadow:inset 0 0 18px rgba(22,213,244,.08); }
.panel { padding:18px; margin-bottom:14px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel h2, .panel h3 { margin:0; font-size:18px; letter-spacing:-.01em; }
.panel small { color:var(--muted); }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:37px; padding:9px 14px; border:1px solid transparent; border-radius:9px; color:#fff; background:linear-gradient(135deg,#1b8dff,#11c8e8); font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(17,200,232,.13); transition:.16s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(17,200,232,.21); }
.btn.secondary { background:rgba(39,136,255,.13); border-color:rgba(22,213,244,.45); color:#d8f2ff; }
.btn.danger { background:linear-gradient(135deg,#ff4f66,#ff903c); }
.btn.ghost { background:rgba(255,255,255,.025); border-color:var(--line); color:#bed0e5; }
.btn.small { min-height:30px; padding:6px 10px; font-size:11px; border-radius:8px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--radius); max-height:calc(100vh - 275px); background:rgba(7,18,31,.36); }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:13px 15px; text-align:left; border-bottom:1px solid rgba(81,139,198,.105); }
th { position:sticky; top:0; z-index:2; background:#0d1b2f; color:#879db6; font-size:10px; text-transform:uppercase; letter-spacing:.065em; }
td { color:#dce8f7; }
tr:hover td { background:rgba(39,136,255,.055); }
.muted { color:var(--muted); }
.amount { color:var(--green); font-weight:900; }
.danger-text { color:var(--red); font-weight:900; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(39,136,255,.12); color:#a9d5ff; font-size:11px; font-weight:850; }
.badge.green { background:rgba(32,209,132,.13); color:#65e3aa; }
.badge.red { background:rgba(255,82,100,.14); color:#ff9aaa; }
.badge.yellow { background:rgba(244,194,31,.14); color:#f5d56a; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field { display:grid; gap:7px; }
.field.full { grid-column:1 / -1; }
label { color:#8fa4bd; font-size:10px; text-transform:uppercase; font-weight:900; letter-spacing:.06em; }
input, select, textarea { width:100%; min-height:39px; color:var(--text); background:#081526; border:1px solid rgba(81,139,198,.27); border-radius:8px; padding:10px 12px; outline:none; }
select { cursor:pointer; }
textarea { min-height:84px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(22,213,244,.12); }
.search-input { max-width:320px; }
.modal { border:0; border-radius:13px; padding:0; color:var(--text); background:#0b182a; box-shadow:0 42px 140px rgba(0,0,0,.76); width:min(720px,calc(100vw - 30px)); }
.modal::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(5px); }
.modal-body { padding:22px; border:1px solid var(--line-strong); border-radius:13px; background:linear-gradient(180deg,rgba(16,31,52,.98),rgba(8,19,33,.98)); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.modal-head h3 { margin:0 0 5px; font-size:20px; }
.modal-head p { margin:0; color:var(--muted); }
.flash { margin:16px 26px 0; padding:12px 14px; border-radius:9px; border:1px solid var(--line); background:rgba(39,136,255,.12); }
.flash.error { border-color:rgba(255,82,100,.5); background:rgba(255,82,100,.12); }
.flash.success { border-color:rgba(32,209,132,.5); background:rgba(32,209,132,.11); }
.login-page { display:grid; place-items:center; min-height:100vh; padding:26px; }
.login-card { width:min(430px,100%); padding:28px; }
.login-card h1 { margin:18px 0 8px; font-size:32px; }
.login-card p { margin:0 0 24px; color:var(--muted); }
.chart-card { min-height:310px; }
.chart-shell { position:relative; height:292px; margin-top:6px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,rgba(11,28,48,.76),rgba(7,18,31,.45)); border:1px solid rgba(81,139,198,.11); }
.chart-shell::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(135,157,182,.12) 0 1px, transparent 1px 58px); opacity:.42; }
.line-svg { position:absolute; inset:12px 14px 28px; width:calc(100% - 28px); height:calc(100% - 40px); overflow:visible; }
.chart-labels { position:absolute; left:18px; right:18px; bottom:7px; display:flex; justify-content:space-between; color:#7188a1; font-size:10px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; color:#91a8c0; font-size:11px; }
.legend-pill { display:inline-flex; align-items:center; gap:7px; }
.legend-pill i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.area-fill { opacity:.18; }
.chart-area { height:285px; display:flex; align-items:end; gap:14px; padding:28px 8px 34px; border-radius:12px; background:linear-gradient(180deg,rgba(11,28,48,.56),rgba(7,18,31,.22)); border:1px solid rgba(81,139,198,.1); }
.bar { flex:1; min-width:38px; max-width:78px; border-radius:10px 10px 3px 3px; background:linear-gradient(180deg,#24d2f4 0%, #2d87ff 58%, #2458c8 100%); position:relative; box-shadow:0 12px 35px rgba(39,136,255,.18), inset 0 1px 0 rgba(255,255,255,.22); transition:.2s ease; }
.bar:hover { transform:translateY(-4px); filter:brightness(1.1); }
.bar span { position:absolute; left:50%; bottom:-25px; transform:translateX(-50%); color:var(--muted); font-size:10px; white-space:nowrap; }
.bar[data-tip]:hover::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:#071421; border:1px solid rgba(22,213,244,.4); border-radius:8px; padding:6px 8px; color:white; white-space:nowrap; font-size:11px; box-shadow:var(--shadow-soft); }
.donut-wrap { display:grid; place-items:center; gap:14px; }
.donut { width:178px; height:178px; border-radius:50%; background:conic-gradient(var(--red) 0 16%, var(--green) 16% 35%, var(--yellow) 35% 52%, var(--blue) 52% 70%, var(--pink) 70% 84%, var(--orange) 84% 100%); position:relative; filter:drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.donut::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 25deg, rgba(255,255,255,.2), transparent 26%, rgba(255,255,255,.09) 54%, transparent 80%); mix-blend-mode:screen; }
.donut::after { content:""; position:absolute; inset:48px; background:#0f1c30; border-radius:50%; box-shadow:inset 0 0 18px rgba(0,0,0,.28); }
.legend { display:grid; gap:8px; width:100%; }
.legend-row { display:flex; justify-content:space-between; gap:14px; color:#b7c6da; font-size:12px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; box-shadow:0 0 10px currentColor; }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.client-picker { position:relative; }
.client-options { display:none; position:absolute; z-index:30; inset:calc(100% + 6px) 0 auto; max-height:245px; overflow-y:auto; background:#081526; border:1px solid var(--line-strong); border-radius:10px; padding:8px; box-shadow:0 22px 60px rgba(0,0,0,.42); }
.client-options.open { display:grid; gap:6px; }
.client-option { padding:10px 10px; border-radius:8px; cursor:pointer; color:#dce8f7; }
.client-option:hover { background:rgba(39,136,255,.18); }
.validation-note { color:var(--muted); font-size:12px; }
.validation-note.ok { color:var(--green); }
.validation-note.bad { color:var(--red); }
.color-filter-row { display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-top:2px; }
.color-chip { display:inline-flex; align-items:center; gap:7px; color:#aabbd1; font-size:11px; }
.color-chip input { width:auto; min-height:0; accent-color:#16d5f4; }
@media print { .sidebar,.topbar,.toolbar,.btn { display:none !important; } .main{margin-left:0}.content{max-width:100%;padding:0} body{background:white;color:#111}.card,.panel{box-shadow:none;background:white;color:#111;border-color:#ddd} }
@media (max-width:1180px){ .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr));}.grid.two,.grid.three,.quick-grid{grid-template-columns:1fr;} .content{max-width:100%;} }
@media (max-width:820px){ .sidebar{transform:translateX(-100%);transition:transform .2s ease}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-toggle{display:inline-grid}.content{padding:18px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}.form-grid,.form-grid.three{grid-template-columns:1fr}.topbar{padding:0 16px}.grid.cards{grid-template-columns:1fr}.table-wrap{max-height:unset}.chart-shell{height:260px} }


/* === Refinamiento visual limpio: menos neón, más parecido a Lovable === */
:root{
    --bg:#06101c;
    --bg-2:#071827;
    --panel:#0d1b2f;
    --panel-soft:#10243b;
    --line:rgba(116,154,196,.16);
    --line-strong:rgba(80,139,190,.34);
    --text:#eef6ff;
    --muted:#8296ad;
    --cyan:#22b8d8;
    --blue:#2d8ce6;
    --green:#2cd489;
    --yellow:#f6c94b;
    --orange:#ff9550;
    --red:#ff5b70;
    --pink:#df5aa8;
    --shadow:0 18px 48px rgba(0,0,0,.28);
    --shadow-soft:0 10px 28px rgba(0,0,0,.20);
    --radius:12px;
}
html{scrollbar-color:rgba(34,133,166,.55) rgba(7,18,31,.95)}
body{
    background:
        radial-gradient(circle at 76% 0%, rgba(22,120,160,.13), transparent 28rem),
        linear-gradient(180deg,#06101c 0%,#071523 44%,#06101c 100%);
}
body::before{opacity:.38;background-size:52px 52px;}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#06101c;border-radius:999px}
::-webkit-scrollbar-thumb{background:#14677f;border:2px solid #06101c;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#1c7f9b}
.sidebar{background:linear-gradient(180deg,#06101c,#071422);box-shadow:none;border-right:1px solid rgba(116,154,196,.14)}
.brand-mark,.user-chip>span{background:linear-gradient(135deg,#21a9cf,#2f7ed8);box-shadow:none}
.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(90deg,rgba(35,121,176,.35),rgba(25,91,137,.18));outline:1px solid rgba(72,142,190,.32);box-shadow:none}
.topbar{background:rgba(6,15,27,.88);backdrop-filter:blur(14px)}
.content{max-width:none;width:100%;padding:26px 28px 42px;}
.page-head{margin-bottom:24px}.page-head h1{text-shadow:none}.page-kicker{color:#33c4dd;letter-spacing:.16em}
.card,.panel{background:linear-gradient(180deg,rgba(15,31,52,.92),rgba(9,22,37,.96));border:1px solid rgba(116,154,196,.16);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.card::before,.panel::before{background:linear-gradient(120deg,rgba(63,151,204,.055),transparent 42%,rgba(255,255,255,.018));opacity:.8}
.card::after{display:none}.card{min-height:108px;padding:19px 20px}.metric-icon{background:rgba(45,140,230,.14);color:#8bdcf2;box-shadow:none}.metric-value{font-size:24px}.metric-note{color:#35d692}.metric-note.bad{color:#ff7890}
.btn{background:linear-gradient(135deg,#2779d8,#26b7d3);box-shadow:0 9px 18px rgba(22,82,132,.18)}.btn:hover{box-shadow:0 13px 25px rgba(22,82,132,.24)}.btn.secondary{background:rgba(35,102,158,.22);border-color:rgba(66,142,193,.36)}
.grid{gap:16px}.grid.cards{grid-template-columns:repeat(4,minmax(220px,1fr))}.grid.two{grid-template-columns:minmax(0,1.72fr) minmax(390px,.88fr)}
.table-wrap{max-height:calc(100vh - 245px);border-color:rgba(116,154,196,.17);background:rgba(8,20,34,.44)}
th{background:#0b1a2d;color:#95a8be}td{color:#dbe6f4}tr:hover td{background:rgba(46,126,183,.07)}
.dot{box-shadow:none}.live-dot{box-shadow:none}.color-dot{box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:#2ea2c2;box-shadow:0 0 0 3px rgba(46,162,194,.10)}
.modal-body{border-color:rgba(80,139,190,.35);background:linear-gradient(180deg,rgba(14,30,51,.98),rgba(8,19,33,.98))}
/* Gráficos más limpios y profesionales */
.chart-card{min-height:340px}.chart-shell{height:315px;background:linear-gradient(180deg,rgba(10,27,46,.88),rgba(8,20,34,.62));border:1px solid rgba(116,154,196,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.chart-shell::before{background:repeating-linear-gradient(to bottom,rgba(148,168,190,.10) 0 1px,transparent 1px 54px),repeating-linear-gradient(to right,rgba(148,168,190,.055) 0 1px,transparent 1px 92px);opacity:.78}.line-svg polyline{filter:none!important}.line-svg polygon{opacity:.20}.line-svg polyline:nth-of-type(1){stroke-width:3.2}.line-svg polyline:nth-of-type(2),.line-svg polyline:nth-of-type(3){stroke-width:2.6}.chart-labels{color:#778aa0}.chart-legend{margin-top:13px;color:#9aadc1}.legend-pill i{box-shadow:none}
.donut{width:188px;height:188px;filter:none;background:conic-gradient(#ff5b70 0 16%,#28c987 16% 35%,#f2c84b 35% 52%,#3b8fe8 52% 70%,#d951a4 70% 84%,#ff9145 84% 100%)}.donut::before{opacity:.18}.donut::after{inset:51px;background:#0f1d31;box-shadow:inset 0 0 0 1px rgba(116,154,196,.08)}.donut-wrap{min-height:258px;align-content:center}.legend-row{padding:3px 0}.legend-row strong{color:#dfeaf6}
.chart-area{height:310px;align-items:end;justify-content:center;gap:24px;padding:34px 22px 42px;background:linear-gradient(180deg,rgba(10,27,46,.82),rgba(8,20,34,.48));border-color:rgba(116,154,196,.14)}.bar{max-width:100px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#30b9df 0%,#2e88e0 62%,#285fba 100%);box-shadow:0 10px 22px rgba(23,70,118,.22),inset 0 1px 0 rgba(255,255,255,.16)}.bar:hover{filter:brightness(1.04);transform:translateY(-3px)}.bar[data-tip]:hover::after{border-color:rgba(80,139,190,.36);box-shadow:0 12px 28px rgba(0,0,0,.25)}
/* Aprovechar mejor el espacio disponible */
.panel.full-width,.content>.panel{width:100%}.page-head .toolbar{margin-left:auto}.search-input{max-width:380px}.quick-grid{grid-template-columns:repeat(4,minmax(180px,1fr))}
@media (min-width:1500px){.grid.cards{grid-template-columns:repeat(4,minmax(260px,1fr))}.chart-shell{height:335px}.chart-area{height:325px}.content{padding-right:34px}.table-wrap{max-height:calc(100vh - 235px)}}
@media (max-width:1180px){.grid.two{grid-template-columns:1fr}.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* === Sidebar premium limpio: más elegante, menos pesado === */
:root{
    --sidebar-w:260px;
    --sidebar-bg-a:#06111f;
    --sidebar-bg-b:#081827;
    --sidebar-line:rgba(132,166,204,.15);
    --sidebar-muted:#7e92aa;
    --sidebar-item:#c7d5e6;
    --sidebar-active:#13334f;
}
.sidebar{
    width:var(--sidebar-w);
    padding:18px 15px 16px;
    gap:14px;
    background:
        linear-gradient(180deg,rgba(8,20,35,.98) 0%,rgba(5,14,25,.99) 100%);
    border-right:1px solid var(--sidebar-line);
    box-shadow:8px 0 28px rgba(0,0,0,.16);
}
.main{margin-left:var(--sidebar-w)}
.brand{
    min-height:54px;
    padding:9px 9px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(23,52,82,.42),rgba(7,19,34,.12));
    border:1px solid rgba(132,166,204,.10);
}
.brand:hover{border-color:rgba(82,148,200,.25);background:linear-gradient(135deg,rgba(23,62,94,.50),rgba(7,19,34,.18))}
.brand-mark{
    width:38px;height:38px;border-radius:13px;
    background:linear-gradient(135deg,#2b9dda,#2f79cf);
    box-shadow:none;
    position:relative;
}
.brand-mark::after{
    content:"";
    position:absolute;inset:8px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.22);
}
.brand-copy strong{font-size:15px;letter-spacing:.01em;color:#f2f7ff}
.brand-copy small{font-size:10px;color:#83a2bd;text-transform:uppercase;letter-spacing:.08em}
.sidebar-card{
    display:grid;gap:4px;
    padding:12px 13px;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(20,50,78,.55),rgba(8,21,36,.68));
    border:1px solid rgba(102,145,187,.16);
}
.sidebar-card small{color:#34bfd7;font-size:9px;text-transform:uppercase;letter-spacing:.15em;font-weight:900}
.sidebar-card strong{font-size:12px;color:#eef6ff}
.sidebar-card span{font-size:10px;color:#7f94ac}
.sidebar nav.main-nav{
    gap:5px;
    padding:2px 4px 4px 0;
    scrollbar-width:thin;
    scrollbar-color:rgba(80,122,156,.45) transparent;
}
.sidebar nav.main-nav::-webkit-scrollbar{width:4px}
.sidebar nav.main-nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav.main-nav::-webkit-scrollbar-thumb{background:rgba(80,122,156,.45);border:0;border-radius:999px}
.sidebar nav p{
    margin:13px 8px 6px;
    color:#71869c;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}
.sidebar nav a{
    position:relative;
    display:grid;
    grid-template-columns:28px 22px 1fr;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:8px 10px;
    border-radius:13px;
    color:var(--sidebar-item);
    font-size:12px;
    font-weight:800;
    outline:0;
    border:1px solid transparent;
    background:transparent;
}
.sidebar nav a strong{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar nav a .nav-num{
    width:auto;
    color:#6f8399;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
}
.nav-icon{
    width:26px;height:26px;border-radius:10px;
    display:inline-grid;place-items:center;
    background:rgba(21,43,66,.78);
    border:1px solid rgba(117,151,185,.10);
    position:relative;
}
.nav-icon::before{content:"";display:block;width:12px;height:12px;border-radius:4px;border:2px solid #7ea4c7;opacity:.88}
.icon-dashboard::before{border-radius:3px;box-shadow:8px 0 0 -3px #7ea4c7,0 8px 0 -3px #7ea4c7,8px 8px 0 -3px #7ea4c7}
.icon-inventario::before{border-radius:3px;transform:rotate(45deg);border-color:#83a9c8}
.icon-compras::before{width:13px;height:10px;border-radius:3px;border-top:0;box-shadow:0 -5px 0 -2px #7ea4c7}
.icon-ventas::before{width:13px;height:9px;border-left:0;border-bottom:0;transform:rotate(45deg);border-radius:2px}
.icon-perdidas::before{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #7ea4c7;border-top:0;border-radius:2px;background:transparent}
.icon-clientes::before{border-radius:50%;width:10px;height:10px;box-shadow:0 9px 0 -3px #7ea4c7}
.icon-proveedores::before{width:14px;height:10px;border-radius:3px;box-shadow:0 -5px 0 -3px #7ea4c7}
.icon-precios::before{width:9px;height:13px;border-radius:4px;transform:rotate(12deg)}
.icon-reportes::before{width:13px;height:10px;border-radius:2px;border-top:0;border-right:0;transform:skew(-8deg)}
.icon-usuarios::before{border-radius:50%;width:10px;height:10px;box-shadow:8px 7px 0 -4px #7ea4c7,-8px 7px 0 -4px #7ea4c7}
.sidebar nav a:hover{
    color:#f6fbff;
    background:rgba(19,43,68,.72);
    border-color:rgba(97,143,184,.14);
    outline:0;
}
.sidebar nav a.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(24,80,120,.88),rgba(15,48,78,.82));
    border-color:rgba(76,143,190,.42);
    box-shadow:inset 3px 0 0 #2aa9d5;
    outline:0;
}
.sidebar nav a.active .nav-icon{
    background:linear-gradient(135deg,#1c87c2,#2e77cf);
    border-color:rgba(255,255,255,.14);
}
.sidebar nav a.active .nav-icon::before{border-color:#fff;box-shadow:none}
.sidebar nav a.active .icon-dashboard::before{box-shadow:8px 0 0 -3px #fff,0 8px 0 -3px #fff,8px 8px 0 -3px #fff}
.sidebar nav a.active .icon-compras::before,.sidebar nav a.active .icon-proveedores::before,.sidebar nav a.active .icon-clientes::before,.sidebar nav a.active .icon-usuarios::before{box-shadow:none}
.sidebar nav a.active .icon-perdidas::before{border-bottom-color:#fff}
.sidebar nav a.active .nav-num{color:#b7d9ef}
.user-chip{
    margin-top:auto;
    border-top:1px solid rgba(132,166,204,.13);
    padding:14px 4px 0;
    gap:10px;
}
.user-chip>span{
    width:36px;height:36px;border-radius:13px;
    background:linear-gradient(135deg,#2c9bd6,#2e78cf);
    box-shadow:none;
}
.user-chip div{min-width:0;flex:1}
.user-chip strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip small{font-size:10px;color:#7e92aa}
.user-logout{
    width:30px;height:30px;border-radius:10px;
    display:grid;place-items:center;
    color:#a9bdd1;
    border:1px solid rgba(132,166,204,.13);
    background:rgba(20,42,66,.45);
}
.user-logout:hover{color:#fff;background:rgba(30,74,110,.65);border-color:rgba(88,143,188,.28)}
@media (max-width:820px){.main{margin-left:0}.sidebar{width:var(--sidebar-w)}}

/* === Ajuste final: sidebar limpio, iconos reales, animaciones suaves y gráficos interactivos === */
:root{
    --cyan:#22c7dc;
    --blue:#2f84d8;
    --green:#28c987;
    --red:#f15b73;
    --yellow:#e9bd3e;
    --orange:#ed8840;
    --pink:#d74f9d;
    --panel:#0e1d31;
    --panel-soft:#10243a;
    --line:rgba(130,160,190,.16);
}
body{
    background:
        radial-gradient(circle at 80% 5%, rgba(35,130,170,.10), transparent 25rem),
        linear-gradient(180deg,#06101c 0%,#071522 50%,#050d18 100%);
}
body::before{opacity:.45;background-size:50px 50px}
.sidebar{
    background:linear-gradient(180deg,#06111d 0%,#050d18 100%)!important;
    box-shadow:10px 0 34px rgba(0,0,0,.18)!important;
    border-right:1px solid rgba(125,158,190,.14)!important;
}
.brand{
    background:linear-gradient(135deg,rgba(28,56,86,.48),rgba(7,19,31,.32))!important;
    border-color:rgba(130,160,190,.14)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.brand-mark,.user-chip>span{
    background:linear-gradient(135deg,#3195d4,#2677bf)!important;
    box-shadow:0 10px 24px rgba(27,111,180,.18)!important;
}
.sidebar-card{
    background:linear-gradient(135deg,rgba(18,45,71,.52),rgba(8,20,34,.55))!important;
    border-color:rgba(125,158,190,.14)!important;
}
.sidebar nav a{
    grid-template-columns:30px 22px 1fr!important;
    min-height:43px!important;
    transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease;
}
.sidebar nav a:hover{transform:translateX(3px)}
.sidebar nav a.active{
    background:linear-gradient(90deg,rgba(24,76,112,.92),rgba(13,43,69,.78))!important;
    border-color:rgba(64,133,185,.38)!important;
    box-shadow:inset 3px 0 0 #2b9ed0,0 10px 26px rgba(0,0,0,.16)!important;
}
.nav-icon{
    width:28px!important;height:28px!important;border-radius:10px!important;
    background:rgba(24,47,72,.72)!important;
    border:1px solid rgba(132,166,204,.16)!important;
    color:#8ba9c8!important;
    display:grid!important;place-items:center!important;
    transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease!important;
}
.nav-icon::before,.nav-icon::after{display:none!important;content:none!important}
.nav-icon svg{
    width:16px;height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.sidebar nav a:hover .nav-icon{color:#c5dcf2;background:rgba(34,77,112,.76)!important;transform:scale(1.04)}
.sidebar nav a.active .nav-icon{
    background:linear-gradient(135deg,#2a8cca,#2c75c3)!important;
    border-color:rgba(255,255,255,.13)!important;
    color:#fff!important;
    box-shadow:0 7px 16px rgba(32,111,174,.22)!important;
}
.sidebar nav a.active .nav-icon svg{stroke:#fff!important}.sidebar nav a.active .nav-num{color:#b5d1e7!important}
.sidebar nav p{color:#768da4!important}.user-logout{transition:.2s ease}.user-logout:hover{transform:translateY(-1px)}

.content{max-width:1460px;margin:0 auto;width:100%;}
.page-head{animation:fadeSlide .45s ease both}.toolbar{gap:10px}
.card,.panel{
    border-color:rgba(125,158,190,.17)!important;
    background:linear-gradient(180deg,rgba(15,31,52,.93),rgba(8,20,34,.96))!important;
    box-shadow:0 14px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.025)!important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    animation:softRise .48s ease both;
}
.card:hover,.panel:hover{transform:translateY(-2px);border-color:rgba(90,143,190,.28)!important;box-shadow:0 18px 42px rgba(0,0,0,.24)!important}
.card:nth-child(2){animation-delay:.03s}.card:nth-child(3){animation-delay:.06s}.card:nth-child(4){animation-delay:.09s}.card:nth-child(5){animation-delay:.12s}.card:nth-child(6){animation-delay:.15s}.card:nth-child(7){animation-delay:.18s}.card:nth-child(8){animation-delay:.21s}
.metric-icon{background:rgba(46,123,190,.16)!important;color:#a7d8ee!important;box-shadow:none!important}.metric-value{text-shadow:none!important}
.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover{transform:translateY(-1px)}
.table-wrap{background:rgba(8,20,34,.50)!important;scrollbar-color:rgba(94,129,160,.55) transparent!important}.table-wrap::-webkit-scrollbar{width:8px;height:8px}.table-wrap::-webkit-scrollbar-track{background:transparent}.table-wrap::-webkit-scrollbar-thumb{background:rgba(86,125,158,.5)!important;border:2px solid rgba(8,20,34,.96)!important;border-radius:999px!important}
tr{transition:background .18s ease}tr:hover td{background:rgba(53,116,166,.075)!important}
.dot,.color-dot{box-shadow:none!important}

.chart-card{overflow:hidden}.chart-shell,.chart-area{
    position:relative;
    background:linear-gradient(180deg,rgba(9,25,42,.86),rgba(8,20,34,.60))!important;
    border-color:rgba(125,158,190,.16)!important;
}
.chart-shell::before{opacity:.42!important;background:repeating-linear-gradient(to bottom,rgba(148,168,190,.11) 0 1px,transparent 1px 56px),repeating-linear-gradient(to right,rgba(148,168,190,.055) 0 1px,transparent 1px 120px)!important}
.line-svg{overflow:visible}.line-svg polyline{filter:none!important;stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLine 1.25s cubic-bezier(.22,.8,.22,1) forwards}.line-svg polygon{opacity:.16!important;animation:fadeIn .9s ease .28s both}.chart-point{fill:#0e1d31;stroke-width:2.3;opacity:0;cursor:pointer;animation:pointPop .45s ease .8s forwards;transition:r .18s ease,fill .18s ease,stroke .18s ease}.line-ventas+ .chart-point,.chart-point:nth-of-type(1){stroke:#22c7dc}.chart-point:hover{r:6;fill:#fff}.chart-tip{position:fixed;z-index:9999;pointer-events:none;padding:8px 10px;border-radius:10px;background:rgba(7,16,28,.96);border:1px solid rgba(125,158,190,.28);box-shadow:0 12px 30px rgba(0,0,0,.32);color:#f3f8ff;font-size:12px;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;white-space:nowrap}.chart-tip.show{opacity:1;transform:translateY(0)}
.donut{filter:none!important;animation:donutIn .85s ease both;transition:transform .24s ease}.donut:hover{transform:scale(1.025)}.donut::before{display:none!important}.donut::after{background:#0e1d31!important;box-shadow:inset 0 0 0 1px rgba(125,158,190,.12)!important}
.bar{box-shadow:0 12px 24px rgba(25,85,140,.20)!important;animation:barGrow .85s cubic-bezier(.2,.75,.2,1) both;transform-origin:bottom}.bar:hover{transform:translateY(-4px)!important;filter:brightness(1.04)!important}.bar:nth-child(2){animation-delay:.08s}.bar:nth-child(3){animation-delay:.16s}.bar:nth-child(4){animation-delay:.24s}.bar:nth-child(5){animation-delay:.32s}.bar:nth-child(6){animation-delay:.40s}
.bar[data-tip]::after{transition:opacity .18s ease,transform .18s ease!important;background:rgba(7,16,28,.96)!important;border:1px solid rgba(125,158,190,.28)!important;box-shadow:0 12px 28px rgba(0,0,0,.30)!important}
.legend-row{transition:background .18s ease,transform .18s ease}.legend-row:hover{background:rgba(255,255,255,.025);transform:translateX(2px)}

@keyframes softRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:.16}}
@keyframes pointPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes donutIn{from{opacity:0;transform:scale(.86) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes barGrow{from{transform:scaleY(.05);opacity:.25}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* === Pantalla Listas de precios: matriz editable tipo Lovable === */
.content{max-width:none;margin:0;width:100%;padding:28px clamp(28px,3vw,54px) 44px;}
.page-head.pricing-head{align-items:flex-start;padding-bottom:28px;border-bottom:1px solid rgba(125,158,190,.14);margin-bottom:26px;}
.pricing-head h1{font-size:34px;letter-spacing:-.04em;margin-bottom:7px;}
.pricing-head p{max-width:690px;font-size:14px;line-height:1.45;color:#9fb0c4;}
.btn.small{min-height:32px;padding:8px 12px;font-size:11px;border-radius:9px;}
.price-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(640px,100%);padding:4px;margin:0 0 26px;background:rgba(11,25,42,.76);border:1px solid rgba(125,158,190,.14);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);}
.price-tab{min-height:34px;border:0;border-radius:14px;background:transparent;color:#93a6bd;font-weight:900;cursor:pointer;transition:background .22s ease,color .22s ease,transform .22s ease;}
.price-tab:hover{color:#dcecff;background:rgba(42,101,150,.18);}
.price-tab.active{color:#fff;background:linear-gradient(90deg,#2e8ee6,#1bbfd5);box-shadow:0 10px 24px rgba(31,126,190,.18);}
.price-matrix{display:none;padding:0;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,rgba(15,31,52,.94),rgba(9,21,36,.96))!important;}
.price-matrix.active{display:block;animation:softRise .35s ease both;}
.price-card-head{display:flex;align-items:center;gap:14px;padding:24px 26px;border-bottom:1px solid rgba(125,158,190,.13);}
.price-card-head h2{margin:0 0 4px;font-size:18px;}
.price-card-head p{margin:0;color:#94a8be;font-size:13px;}
.price-icon{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(45,140,230,.22),rgba(34,199,220,.10));color:#5fc5ec;border:1px solid rgba(125,158,190,.14);}
.price-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.price-table-scroll{overflow:auto;padding:20px 22px 24px;}
.price-grid-table{width:100%;border-collapse:separate;border-spacing:0;min-width:880px;}
.price-grid-table thead th{position:static;background:transparent;color:#98aabe;font-size:12px;letter-spacing:.07em;text-align:center;border-bottom:1px solid rgba(125,158,190,.13);padding:12px 14px;}
.price-grid-table thead th:first-child{text-align:left;}
.price-grid-table tbody th{background:transparent;color:#f1f6ff;font-size:15px;text-align:left;font-weight:900;padding:14px 14px;border-bottom:1px solid rgba(125,158,190,.09);}
.price-grid-table td{padding:10px 9px;border-bottom:1px solid rgba(125,158,190,.09);background:transparent!important;}
.price-grid-table tr:hover td,.price-grid-table tr:hover th{background:rgba(46,126,183,.035)!important;}
.price-input{height:42px;min-height:42px;text-align:center;border-radius:14px;background:rgba(15,31,52,.92);border:1px solid rgba(125,158,190,.18);font-size:15px;font-weight:800;color:#f6fbff;transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.price-input:hover{border-color:rgba(80,143,190,.34);background:rgba(17,38,62,.92);}
.price-input:focus{border-color:#3197cc;box-shadow:0 0 0 3px rgba(49,151,204,.11);transform:translateY(-1px);}
.price-type-head{width:160px;}
.color-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:none!important;}
.pricing-secondary{margin-top:18px;}
.table-wrap.compact{max-height:270px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (min-width:1500px){.pricing-head h1{font-size:38px}.price-table-scroll{padding:24px 28px 30px}.price-input{height:46px}.price-grid-table tbody th{font-size:16px}.content{padding-left:clamp(42px,4vw,70px);padding-right:clamp(42px,4vw,70px)}}
@media (max-width:980px){.page-head.pricing-head{flex-direction:column}.price-tabs{width:100%}.pricing-secondary{grid-template-columns:1fr!important}.price-table-scroll{padding:14px}.pricing-head h1{font-size:28px}}


/* === Reportes estilo Lovable: filtros vivos, cards limpias y gráficos animados === */
.reports-head{padding-bottom:22px;border-bottom:1px solid rgba(125,158,190,.13);margin-bottom:28px;}
.reports-head h1{font-size:34px;letter-spacing:-.04em;margin:4px 0 6px;}
.reports-head p{font-size:14px;color:#9db1c6;}
.lovable-filter-panel{padding:25px 26px 26px;border-radius:22px;margin-bottom:28px;background:linear-gradient(180deg,rgba(15,30,51,.96),rgba(10,22,38,.98))!important;}
.filter-title{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(125,158,190,.13);text-transform:uppercase;letter-spacing:.02em;color:#eaf3ff;font-weight:900;}
.filter-icon{color:#14cce6;font-size:22px;line-height:1;transform:rotate(90deg);display:inline-block;}
.report-filter-form{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:20px;align-items:end;}
.report-filter-form .field label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#98a9bc;font-weight:900;margin-bottom:7px;}
.report-filter-form select,.report-filter-form input{height:43px;border-radius:12px;border:1px solid rgba(128,157,190,.21);background:#0a1728;color:#eef6ff;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.report-filter-form select:focus,.report-filter-form input:focus{border-color:rgba(48,143,214,.58);box-shadow:0 0 0 3px rgba(35,130,190,.12);background:#0c1c30;}
.report-filter-form .full{grid-column:1/-1;}
.colors-field{margin-top:2px;}
.lovable-color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lovable-color-chip{height:36px;display:inline-flex;align-items:center;gap:9px;padding:0 14px;border-radius:999px;border:1px solid rgba(125,158,190,.15);background:rgba(10,21,36,.62);color:#9badc1;font-size:12px;font-weight:800;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;}
.lovable-color-chip input{position:absolute;opacity:0;pointer-events:none;}
.lovable-color-chip i{width:10px;height:10px;border-radius:50%;box-shadow:none!important;}
.lovable-color-chip:hover{transform:translateY(-1px);border-color:rgba(68,139,205,.42);color:#dbeafb;background:rgba(17,39,65,.86);}
.lovable-color-chip.active{border-color:#2e8ee6;color:#f5fbff;background:linear-gradient(180deg,rgba(35,77,118,.72),rgba(14,40,70,.82));box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
.clear-colors{margin-left:8px;color:#e8f3ff;font-size:12px;font-weight:900;text-decoration:none;transition:color .18s ease;}
.clear-colors:hover{color:#18cbe6;}
.filter-apply{display:none;}
.reports-metrics{grid-template-columns:repeat(4,minmax(230px,1fr))!important;margin-bottom:18px;}
.report-card{min-height:128px;border-radius:20px!important;padding:24px 25px!important;background:linear-gradient(180deg,rgba(17,32,53,.95),rgba(12,24,41,.98))!important;}
.report-card .metric-label{font-size:12px;letter-spacing:.075em;color:#9daec2;}
.report-card .metric-value{font-size:30px;letter-spacing:-.04em;margin-top:12px;}
.report-card .metric-note{margin-top:6px;font-size:12px;}
.muted-text{color:#9aaec4!important;}
.metric-icon.blue{color:#76aef5!important;background:rgba(45,105,190,.18)!important}.metric-icon.green{color:#4be0a3!important;background:rgba(37,155,112,.16)!important}.metric-icon.yellow{color:#f0c34b!important;background:rgba(167,124,21,.18)!important}
.reports-main-grid{grid-template-columns:minmax(0,1.75fr) minmax(360px,.9fr)!important;gap:22px!important;}
.reports-bottom-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(340px,1fr)!important;gap:20px!important;margin-top:20px;}
.lovable-chart-panel{padding:24px 25px!important;border-radius:20px!important;}
.lovable-chart-panel h2{font-size:20px;margin-top:4px;margin-bottom:10px;}
.lovable-line-shell{height:330px!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(10,27,46,.74),rgba(8,20,34,.40))!important;}
.lovable-line-shell .line-svg{position:absolute;inset:28px 28px 42px 28px;width:calc(100% - 56px);height:calc(100% - 70px);}
.lovable-line-shell .chart-labels{left:28px;right:28px;bottom:14px;}
.center-legend{justify-content:center;gap:26px;margin-top:12px;}
.lovable-donut-wrap{display:grid!important;grid-template-columns:1fr!important;place-items:center;gap:18px;min-height:330px;}
.lovable-donut-wrap .donut{width:218px!important;height:218px!important;border:2px solid rgba(255,255,255,.72);}
.lovable-donut-wrap .donut::after{inset:64px!important;}
.lovable-donut-wrap .legend{width:100%;max-width:310px;}
.lovable-bar-area{height:306px!important;padding:38px 26px 45px!important;gap:26px!important;}
.lovable-bar-area .bar{width:96px!important;min-width:72px!important;}
.top-client-list .legend-row{padding:8px 0;font-size:13px;}
.line-svg polyline{stroke-dasharray:1400;stroke-dashoffset:1400;animation:drawLine 1.1s cubic-bezier(.25,.8,.25,1) forwards;}
.line-svg polygon{opacity:0;animation:areaRise .9s ease .25s forwards;}
.chart-point{opacity:0;animation:pointPop .38s ease .82s forwards;}
.donut{animation:donutLoad .95s cubic-bezier(.22,.8,.22,1) both;}
.bar{animation:barGrow .82s cubic-bezier(.2,.78,.2,1) both;}
@keyframes areaRise{from{opacity:0}to{opacity:.16}}
@keyframes donutLoad{from{opacity:0;clip-path:circle(0% at 50% 50%);transform:rotate(-10deg) scale(.96)}to{opacity:1;clip-path:circle(75% at 50% 50%);transform:rotate(0) scale(1)}}
@media (max-width:1180px){.report-filter-form{grid-template-columns:repeat(2,minmax(0,1fr));}.reports-main-grid,.reports-bottom-grid{grid-template-columns:1fr!important}.reports-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:720px){.report-filter-form,.reports-metrics{grid-template-columns:1fr!important}.lovable-line-shell{height:270px!important}.lovable-donut-wrap .donut{width:180px!important;height:180px!important}.lovable-donut-wrap .donut::after{inset:53px!important}}

/* === Ajuste Lovable desde video: reportes, filtros, cards y gráficos === */
.content{max-width:none!important;width:100%!important;padding:30px 36px 48px!important;}
.page-head.lovable-report-head{max-width:1440px;margin:0 auto 28px!important;padding-bottom:28px;border-bottom:1px solid rgba(132,166,204,.12);}
.page-head.lovable-report-head h1{font-size:36px!important;letter-spacing:-.035em;line-height:1.05;}
.page-head.lovable-report-head p{font-size:15px;color:#a6b7cb;}

.lovable-filter-panel,.reports-filter-panel{
    max-width:1440px;margin:0 auto 28px!important;padding:24px 26px!important;border-radius:24px!important;
    background:linear-gradient(180deg,rgba(17,32,53,.88),rgba(13,28,47,.94))!important;
    border:1px solid rgba(132,166,204,.16)!important;box-shadow:none!important;
}
.filter-title{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid rgba(132,166,204,.12);text-transform:uppercase;font-size:15px;color:#edf6ff;}
.filter-title svg{width:19px;height:19px;fill:none;stroke:#22c7dc;stroke-width:2;}
.report-filter-form,.lovable-report-form{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;align-items:end;}
.report-filter-form .field.full{grid-column:1/-1;}
.report-filter-form .date-field{display:none;}
.report-filter-form:has(select[name="rango"] option[value="rango"]:checked) .date-field{display:grid;}
.report-filter-form label{font-size:12px!important;letter-spacing:.07em;color:#9cacc0!important;margin-bottom:1px;}
.report-filter-form select,.report-filter-form input[type="date"]{
    min-height:48px!important;border-radius:14px!important;background:#0b1829!important;border:1px solid rgba(132,166,204,.20)!important;
    color:#f4f8ff!important;padding:0 16px!important;font-size:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.lovable-color-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:4px;}
.lovable-color-chip{display:inline-flex!important;align-items:center;gap:10px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(132,166,204,.14);background:rgba(8,19,33,.48);color:#9eadbf!important;font-weight:750;letter-spacing:0;text-transform:none;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;}
.lovable-color-chip:hover{transform:translateY(-1px);background:rgba(22,49,77,.68);color:#dce9f9!important;}
.lovable-color-chip.active{color:#fff!important;border-color:#2f84d8;background:rgba(30,77,123,.48);box-shadow:inset 0 0 0 1px rgba(47,132,216,.25);}
.lovable-color-chip input{position:absolute;opacity:0;pointer-events:none;}
.lovable-color-chip i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:none!important;}
.clear-colors{margin-left:8px;font-weight:900;color:#e6edf7!important;padding:9px 10px;border-radius:10px;}
.clear-colors:hover{background:rgba(255,255,255,.04);}
.filter-apply{grid-column:1 / span 2;min-height:48px!important;border-radius:12px!important;max-width:420px;}

.reports-metrics,.lovable-metric-grid{max-width:1440px;margin:0 auto!important;grid-template-columns:repeat(4,minmax(230px,1fr))!important;gap:18px!important;}
.report-card{min-height:136px!important;border-radius:22px!important;padding:24px 26px!important;background:linear-gradient(180deg,rgba(18,32,52,.94),rgba(13,27,45,.98))!important;}
.report-card .metric-label{font-size:13px!important;color:#a0afc1!important;margin-bottom:12px;}
.report-card .metric-value{font-size:33px!important;line-height:1.05;letter-spacing:-.04em;}
.report-card .metric-note{font-size:13px!important;}
.report-card .metric-icon{width:56px!important;height:56px!important;border-radius:21px!important;right:22px!important;top:26px!important;background:rgba(21,128,159,.38)!important;color:#12d7e8!important;font-size:24px;}
.report-card .metric-icon.blue{background:rgba(42,111,213,.32)!important;color:#5da4ff!important;}.report-card .metric-icon.green{background:rgba(24,130,92,.32)!important;color:#2ce294!important;}.report-card .metric-icon.yellow{background:rgba(153,110,11,.35)!important;color:#f2c23e!important;}

.reports-main-grid,.lovable-report-charts{max-width:1440px;margin-left:auto!important;margin-right:auto!important;display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(360px,.82fr)!important;gap:24px!important;}
.reports-bottom-grid,.lovable-bottom-charts{max-width:1440px;margin:24px auto 0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;}
.lovable-chart-panel{border-radius:22px!important;padding:26px!important;background:linear-gradient(180deg,rgba(17,32,53,.94),rgba(11,24,41,.98))!important;border:1px solid rgba(132,166,204,.16)!important;box-shadow:0 18px 45px rgba(0,0,0,.18)!important;}
.lovable-chart-panel .page-kicker{font-size:12px!important;letter-spacing:.22em!important;color:#19cde4!important;margin-bottom:10px;}
.lovable-chart-panel h2{font-size:23px!important;letter-spacing:-.025em;margin-bottom:8px!important;}
.lovable-line-shell{height:356px!important;margin-top:22px;padding:26px 26px 40px!important;border-radius:15px!important;background:#0b1b2d!important;border:1px solid rgba(132,166,204,.12)!important;overflow:visible!important;}
.lovable-line-shell::before{content:""!important;position:absolute!important;inset:26px 26px 46px!important;background:repeating-linear-gradient(to bottom,rgba(132,166,204,.10) 0 1px,transparent 1px 64px),repeating-linear-gradient(to right,rgba(132,166,204,.07) 0 1px,transparent 1px 118px)!important;opacity:.55!important;border-radius:10px;}
.lovable-line-svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible!important;}
.lovable-line-svg polyline{stroke-dasharray:1600;stroke-dashoffset:1600;animation:drawLine 1.45s cubic-bezier(.22,.85,.2,1) forwards;}
.lovable-line-svg .area-fill{opacity:.18;animation:areaRise .9s ease .35s both;}
.line-ventas{stroke:#2f7cff!important}.line-compras{stroke:#16c7e5!important}.line-utilidad{stroke:#29d77d!important}.line-mermas{stroke:#ff5d73!important;}
.chart-point{opacity:0;animation:pointPop .42s ease 1.05s forwards;fill:#0b1b2d!important;stroke-width:2.8!important;cursor:pointer;transition:r .16s ease,fill .16s ease;}
.point-ventas{stroke:#2f7cff!important}.point-compras{stroke:#16c7e5!important}.point-utilidad{stroke:#29d77d!important}.point-mermas{stroke:#ff5d73!important}.chart-point:hover{r:6.2!important;fill:#f8fbff!important;}
.chart-labels{position:absolute;left:26px;right:26px;bottom:12px;display:flex;justify-content:space-between;color:#90a2b7;font-size:12px;z-index:2;}
.center-legend{justify-content:center!important;gap:28px!important;margin-top:16px!important;text-transform:lowercase;color:#a8b7ca;}
.legend-pill{display:inline-flex;align-items:center;gap:8px}.legend-pill i{width:8px;height:8px;border-radius:50%;display:block;}

.lovable-donut-wrap{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;align-content:center;min-height:356px!important;padding-top:14px;}
.donut-svg{width:218px;height:218px;overflow:visible;transform:rotate(-90deg);animation:donutLoad 1s cubic-bezier(.22,.75,.2,1) both;}
.donut-track{fill:none;stroke:#182842;stroke-width:28;}
.donut-segment{fill:none;stroke-width:28;transition:stroke-width .18s ease,filter .18s ease;cursor:pointer;}
.donut-segment:hover{stroke-width:32;filter:brightness(1.08);}
.donut-hole{fill:#0e1d31;stroke:rgba(255,255,255,.08);stroke-width:1;}
.donut-legend{margin-top:20px!important;display:grid!important;grid-template-columns:repeat(2,minmax(125px,1fr));gap:10px 24px;width:min(420px,100%);}
.donut-legend .legend-row{font-size:14px;color:#afbed0;align-items:center;}.donut-legend .legend-row strong{font-size:14px;color:#eef6ff;}.donut-legend .dot{width:11px;height:11px;}

.lovable-bar-area{height:320px!important;padding:40px 42px 52px!important;gap:34px!important;justify-content:center!important;align-items:end!important;}
.lovable-bar-area .bar{width:96px;flex:0 0 96px;max-width:96px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#34c3e4 0%,#2d8be1 58%,#2861bd 100%)!important;box-shadow:none!important;}
.lovable-bar-area .bar span{bottom:-28px;color:#93a5ba;font-size:12px;}
.top-client-panel .top-client-list{margin-top:24px!important;gap:14px!important;}.top-client-panel .legend-row{font-size:14px;padding:6px 0;}.top-client-panel .amount{color:#eaf3ff!important;}

@media (max-width:1180px){.report-filter-form,.lovable-report-form{grid-template-columns:repeat(2,minmax(0,1fr));}.reports-metrics,.lovable-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.reports-main-grid,.lovable-report-charts,.reports-bottom-grid,.lovable-bottom-charts{grid-template-columns:1fr!important}.filter-apply{grid-column:1/-1}}
@media (max-width:760px){.content{padding:22px 16px 38px!important}.report-filter-form,.lovable-report-form{grid-template-columns:1fr}.reports-metrics,.lovable-metric-grid{grid-template-columns:1fr!important}.page-head.lovable-report-head h1{font-size:30px!important}.lovable-line-shell{height:300px!important}.donut-legend{grid-template-columns:1fr}.lovable-bar-area .bar{width:70px;flex-basis:70px}}

/* ===== FIX FINAL REPORTES LOVABLE CANVAS ===== */
.lovable-report-head{max-width:1280px;margin-inline:auto;padding-top:30px;padding-bottom:24px;border-bottom:1px solid rgba(148,163,184,.12)}
.lovable-filter-panel,.lovable-metric-grid,.lovable-report-charts,.lovable-bottom-charts{max-width:1280px;margin-left:auto;margin-right:auto}
.lovable-filter-panel{padding:22px 24px 26px;border-radius:24px;background:linear-gradient(180deg,rgba(18,34,55,.86),rgba(13,28,47,.88));box-shadow:none;border:1px solid rgba(80,120,160,.24)}
.lovable-report-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;align-items:end}
.lovable-report-form .field{display:grid;gap:8px}.lovable-report-form label{letter-spacing:.055em;text-transform:uppercase;color:#91a2b6;font-size:12px;font-weight:800}.lovable-report-form select,.lovable-report-form input{height:44px;border-radius:13px;background:#0b1b2d;border:1px solid rgba(113,145,180,.26);color:#f4f8ff;padding:0 14px;font-size:14px;outline:none}.lovable-report-form select:focus,.lovable-report-form input:focus{border-color:#2b8cff;box-shadow:0 0 0 3px rgba(43,140,255,.10)}
.lovable-report-form .full{grid-column:1/-1}.filter-title{display:flex;align-items:center;gap:10px;padding-bottom:17px;margin-bottom:16px;border-bottom:1px solid rgba(148,163,184,.12);font-size:15px;text-transform:uppercase;color:#edf6ff}.filter-title svg{width:18px;height:18px;color:#16c7e5}.lovable-color-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.lovable-color-chip{display:inline-flex!important;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(106,135,169,.24);background:rgba(9,22,38,.62);text-transform:none!important;letter-spacing:0!important;color:#9fafc0!important;cursor:pointer;transition:.18s ease}.lovable-color-chip input{position:absolute;opacity:0;pointer-events:none}.lovable-color-chip i{width:10px;height:10px;border-radius:50%;box-shadow:none}.lovable-color-chip:hover,.lovable-color-chip.active{border-color:#2f8cff;background:rgba(24,68,112,.42);color:#fff!important;transform:translateY(-1px)}.clear-colors{color:#d8e4f2;text-decoration:none;font-weight:800;margin-left:10px}.filter-apply{height:42px;max-width:360px;grid-column:1/3}.lovable-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}.report-card{min-height:128px;padding:24px 22px;border-radius:22px;background:linear-gradient(180deg,rgba(18,34,55,.94),rgba(14,29,49,.96));border:1px solid rgba(95,128,167,.22);box-shadow:none;position:relative;overflow:hidden;animation:btFadeUp .55s ease both}.report-card:hover{transform:translateY(-3px);border-color:rgba(66,153,225,.38)}.metric-label{font-size:12px;text-transform:uppercase;letter-spacing:.055em;color:#96a7ba;font-weight:900}.metric-value{font-size:30px;line-height:1.1;margin-top:14px;color:#f7fbff;font-weight:900}.metric-note{margin-top:8px;color:#04d38c;font-weight:800}.metric-note.bad{color:#fb6075}.metric-icon{position:absolute;right:22px;top:26px;width:46px;height:46px;border-radius:18px;display:grid;place-items:center;color:#20e0f8;background:rgba(0,185,218,.14);font-weight:900;font-size:20px}.metric-icon.blue{color:#4c94ff;background:rgba(47,124,255,.15)}.metric-icon.green{color:#20d88b;background:rgba(32,216,139,.15)}.metric-icon.yellow{color:#f0b90b;background:rgba(240,185,11,.16)}
.lovable-report-charts{grid-template-columns:minmax(0,2.1fr) minmax(360px,.95fr);gap:22px}.lovable-bottom-charts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:22px}.lovable-chart-panel{border-radius:24px;background:linear-gradient(180deg,rgba(18,34,55,.94),rgba(13,28,47,.98));border:1px solid rgba(95,128,167,.24);box-shadow:none;padding:24px;animation:btFadeUp .6s ease both}.lovable-chart-panel h2{font-size:21px;margin:6px 0 18px;color:#f4f8ff}.bt-canvas-wrap{position:relative;border-radius:18px;background:#0b1f33;border:1px solid rgba(95,128,167,.22);overflow:hidden}.bt-canvas-wrap canvas{display:block;width:100%;height:100%}.bt-line-wrap{height:360px;padding:0}.bt-donut-wrap{height:295px;background:transparent;border:0}.bt-bar-wrap,.bt-loss-wrap{height:300px}.donut-legend{margin-top:14px}.chart-legend{display:flex;gap:20px;align-items:center;justify-content:center;margin-top:16px}.legend-pill{display:inline-flex;align-items:center;gap:8px;color:#aebdd0;font-weight:700}.legend-pill i,.dot{display:inline-block;width:9px;height:9px;border-radius:50%}.top-client-panel{min-height:390px}.top-client-list{display:grid;gap:15px;margin-top:18px}.legend-row{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#c8d5e5}.legend-row span{display:flex;align-items:center;gap:10px}.legend-row strong{color:#f4f8ff}.bt-chart-tip{position:fixed;z-index:9999;pointer-events:none;background:#101e31;border:1px solid rgba(88,124,163,.34);box-shadow:0 18px 40px rgba(0,0,0,.28);color:#f8fbff;border-radius:14px;padding:12px 14px;font-weight:700;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .14s ease,transform .14s ease}.bt-chart-tip.show{opacity:1;transform:translateY(0) scale(1)}.bt-chart-tip small{display:block;color:#9fb1c7;margin-top:4px;font-weight:600}.page-kicker{color:#26d9ef;text-transform:uppercase;letter-spacing:.22em;font-weight:900;font-size:12px}@keyframes btFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media(max-width:1200px){.lovable-report-form{grid-template-columns:repeat(2,1fr)}.lovable-metric-grid{grid-template-columns:repeat(2,1fr)}.lovable-report-charts,.lovable-bottom-charts{grid-template-columns:1fr}.bt-line-wrap{height:320px}}@media(max-width:680px){.lovable-report-form,.lovable-metric-grid{grid-template-columns:1fr}.filter-apply{grid-column:1/-1;max-width:none}.lovable-filter-panel,.lovable-chart-panel{padding:18px}.bt-line-wrap{height:280px}.metric-value{font-size:26px}}


/* === DASHBOARD LOVABLE EXACTO: estructura, colores, cards y gráficos === */
:root{--sidebar-w:280px;--lovable-bg:#071221;--lovable-bg2:#07192a;--lovable-panel:#111d30;--lovable-panel2:#0d1b2d;--lovable-border:rgba(112,145,182,.15);--lovable-border2:rgba(59,130,246,.22);--lovable-text:#f5f9ff;--lovable-muted:#98a9bd;--lovable-cyan:#17d4ef;--lovable-blue:#2e86ff;--lovable-green:#20d08a;--lovable-red:#ff4e68;--lovable-yellow:#f3bd26;--lovable-orange:#ff842e;--lovable-pink:#e94aa3}
body{font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;background:radial-gradient(circle at 85% 4%,rgba(109,65,120,.16),transparent 22rem),linear-gradient(180deg,#081426 0%,#061120 48%,#050d18 100%)!important;color:var(--lovable-text)}
body::before{display:none!important}.app-shell{background:transparent}.sidebar{width:var(--sidebar-w)!important;padding:0!important;gap:0!important;background:#0b1628!important;border-right:1px solid rgba(119,146,178,.13)!important;box-shadow:none!important}.main{margin-left:var(--sidebar-w)!important}.brand{height:84px;margin:0!important;padding:0 20px!important;border:0!important;border-bottom:1px solid rgba(119,146,178,.12)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.brand-mark{width:44px!important;height:44px!important;border-radius:16px!important;background:linear-gradient(135deg,#0fd2ef,#2c83ff)!important;box-shadow:0 14px 36px rgba(23,126,222,.22)!important;position:relative;font-size:0}.brand-mark::after{content:"";width:18px;height:18px;border:2px solid #fff;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}.brand strong{font-size:17px!important;line-height:1;color:#fff}.brand small{font-size:11px!important;color:#8fa4bc!important;letter-spacing:.16em!important;text-transform:uppercase}.sidebar-card{display:none!important}.main-nav{padding:20px 12px 0!important;gap:2px!important;overflow-y:auto!important}.main-nav p{margin:18px 10px 9px!important;font-size:12px!important;letter-spacing:.18em!important;color:#8aa0b8!important;font-weight:700}.main-nav a{min-height:46px!important;display:grid!important;grid-template-columns:24px 1fr!important;gap:14px!important;padding:0 18px!important;border-radius:14px!important;color:#e8f1fb!important;font-weight:900!important;font-size:16px!important;border:1px solid transparent!important;background:transparent!important;outline:0!important;box-shadow:none!important}.main-nav a .nav-num{display:none!important}.nav-icon{width:22px!important;height:22px!important;border:0!important;background:transparent!important;color:#f0f7ff!important;border-radius:0!important}.nav-icon svg{width:20px!important;height:20px!important;stroke-width:2!important}.main-nav a strong{font-size:16px}.main-nav a:hover{transform:none!important;background:rgba(49,95,145,.15)!important}.main-nav a.active{background:linear-gradient(90deg,rgba(47,132,216,.28),rgba(22,213,244,.12))!important;border:2px solid #2f84ff!important;box-shadow:0 0 0 1px rgba(22,213,244,.14),0 12px 28px rgba(40,120,220,.18),inset 0 0 24px rgba(47,132,216,.12)!important}.main-nav a.active .nav-icon{background:transparent!important;color:#fff!important;box-shadow:none!important}.user-chip{height:76px;margin:0!important;margin-top:auto!important;padding:0 20px!important;border-top:1px solid rgba(119,146,178,.12)!important;gap:12px}.user-chip>span{width:40px!important;height:40px!important;border-radius:50%!important;background:linear-gradient(135deg,#16d4ef,#2b83ff)!important;box-shadow:none!important;font-size:15px}.user-chip strong{font-size:15px!important}.user-chip small{font-size:13px!important;color:#91a6be!important}.user-logout{display:none!important}
.app-topbar{height:64px!important;padding:0 28px!important;background:#091426!important;border-bottom:1px solid rgba(119,146,178,.11)!important;backdrop-filter:none!important}.topbar-left{display:flex;align-items:center;gap:16px}.menu-toggle{display:grid!important;border-radius:50%!important;background:#0f1d31!important}.top-search{height:43px;width:min(520px,42vw);display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:22px;background:#0d1a2d;border:1px solid rgba(119,146,178,.15)}.top-search svg,.top-icon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.top-search svg{width:19px;height:19px;color:#8aa0b8}.top-search input{height:auto;min-height:0;border:0;background:transparent;padding:0;color:#e9f2ff;font-size:16px;box-shadow:none!important}.top-search input::placeholder{color:#91a4ba}.top-actions{gap:10px!important}.top-actions>span:not(.live-dot){display:none}.top-actions>.live-dot{display:none}.top-actions>.icon-btn{display:none}.top-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid rgba(119,146,178,.14);background:#0d1a2d;color:#d8e7f6;cursor:pointer}.top-icon svg{width:20px;height:20px}.top-icon i{position:absolute;top:9px;right:10px;width:8px;height:8px;background:#17d4ef;border-radius:50%}.content{max-width:none!important;padding:0!important;margin:0!important}.flash{margin:16px 34px!important}
.lovable-dashboard{padding:38px 50px 54px;background:linear-gradient(180deg,#081d31 0%,#08182a 52%,#070f1d 100%);min-height:calc(100vh - 64px)}.dash-hero{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(119,146,178,.11);padding-bottom:30px;margin-bottom:34px}.dash-hero h1{font-size:42px;line-height:1.02;margin:0 0 8px;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 0 rgba(255,255,255,.05)}.dash-hero p{font-size:17px;color:#a8b8ca;margin:0}.page-kicker{font-size:12px!important;letter-spacing:.30em!important;color:#19d4ef!important;font-weight:950!important;margin-bottom:14px!important;text-transform:uppercase}.live-pill{height:38px;display:flex;align-items:center;gap:10px;padding:0 18px;border-radius:999px;color:#9fb2c5;background:rgba(15,29,49,.8);border:1px solid rgba(119,146,178,.13);font-size:14px}.live-pill .live-dot{display:inline-block!important;width:9px;height:9px;background:#18c987;box-shadow:none}.lovable-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:34px}.lovable-card{height:132px;border-radius:22px;padding:26px 24px;background:#111d30;border:1px solid var(--lovable-border);box-shadow:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;animation:lovableRise .55s ease both}.lovable-card::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.018),transparent 55%);pointer-events:none}.lovable-card span{display:block;color:#a0aebf;text-transform:uppercase;font-weight:900;font-size:14px;letter-spacing:.05em;margin-bottom:12px}.lovable-card strong{display:block;color:#fff;font-size:34px;line-height:1;font-weight:950;letter-spacing:-.04em;max-width:250px}.lovable-card strong.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lovable-card small,.lovable-card em{display:block;margin-top:10px;color:#05d990;font-style:normal;font-weight:900;font-size:13px}.lovable-card small.negative{color:#ff5270}.lovable-card:nth-child(1){animation-delay:.03s}.lovable-card:nth-child(2){animation-delay:.06s}.lovable-card:nth-child(3){animation-delay:.09s}.lovable-card:nth-child(4){animation-delay:.12s}.lovable-card:nth-child(5){animation-delay:.15s}.lovable-card:nth-child(6){animation-delay:.18s}.lovable-card:nth-child(7){animation-delay:.21s}.lovable-card:nth-child(8){animation-delay:.24s}.card-icon{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;flex:0 0 auto}.card-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card-icon.blue{color:#2d86ff;background:rgba(45,134,255,.20)}.card-icon.cyan{color:#18d4ef;background:rgba(24,163,190,.20)}.card-icon.green{color:#16d58a;background:rgba(22,190,126,.18)}.card-icon.yellow{color:#f2be27;background:rgba(185,139,12,.28)}.card-icon.red{color:#ff5069;background:rgba(200,44,77,.25)}
.dash-grid-main{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(390px,1fr);gap:28px;margin-bottom:34px}.dash-grid-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,1.04fr);gap:28px}.lovable-panel{background:#111d30!important;border:1px solid var(--lovable-border)!important;border-radius:22px!important;padding:28px!important;box-shadow:none!important;animation:lovableRise .58s ease both;overflow:hidden}.lovable-panel:hover{transform:none!important;box-shadow:none!important;border-color:rgba(112,145,182,.18)!important}.panel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.lovable-panel h2{margin:0;color:#fff;font-size:24px;line-height:1.15;letter-spacing:-.035em}.lovable-panel p{margin:6px 0 0;color:#9fb0c4;font-size:15px}.mini-tabs{display:flex;gap:28px;color:#a1afc2;font-size:14px;padding-top:46px}.lovable-chart{border:1px solid rgba(119,146,178,.10);border-radius:16px;background:#0b1c2e;position:relative}.line-chart{height:320px;padding:24px 22px 38px}.line-chart::before{content:"";position:absolute;inset:24px 22px 60px;background:repeating-linear-gradient(to bottom,rgba(120,146,175,.10) 0 1px,transparent 1px 65px),repeating-linear-gradient(to right,rgba(120,146,175,.08) 0 1px,transparent 1px 125px);opacity:.55}.line-chart svg{position:relative;z-index:1;width:100%;height:235px;overflow:visible}.line-chart .line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:none;stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLovable 1.45s cubic-bezier(.22,.8,.22,1) forwards}.line-chart .line.cyan{stroke:#13cde9;stroke-width:2.8}.line-chart .line.blue{stroke:#2d7fff}.line-chart .line.green{stroke:#22cf7f}.line-chart .area{opacity:0;animation:fadeArea .85s ease .35s forwards}.x-labels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);color:#a4b2c4;font-size:14px;margin-top:4px}.x-labels span{text-align:center}.donut-panel{min-height:360px}.lovable-donut-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;min-height:270px}.lovable-donut{width:205px;height:205px;border-radius:50%;position:relative;animation:donutLovable .75s ease both;box-shadow:none}.lovable-donut::after{content:"";position:absolute;inset:58px;border-radius:50%;background:#111d30;border:0}.lovable-legend{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.lovable-legend div{display:flex;align-items:center;justify-content:space-between;color:#aab8ca;font-size:14px}.lovable-legend span{display:flex;align-items:center;gap:9px}.lovable-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}.lovable-legend strong{font-size:15px;color:#eaf3ff}.lovable-bars{height:310px;border:1px solid rgba(119,146,178,.10);border-radius:16px;background:#0b1c2e;display:flex;align-items:end;justify-content:center;gap:56px;padding:50px 64px 54px;position:relative}.lovable-bars::before{content:"";position:absolute;inset:28px 38px 78px;background:repeating-linear-gradient(to bottom,rgba(120,146,175,.09) 0 1px,transparent 1px 56px),repeating-linear-gradient(to right,rgba(120,146,175,.06) 0 1px,transparent 1px 140px);opacity:.45}.vbar{position:relative;z-index:1;width:120px;height:100%;display:flex;align-items:end;justify-content:center}.vbar span{display:block;width:100%;height:var(--h);border-radius:12px 12px 3px 3px;background:linear-gradient(180deg,#38c2df 0%,#2b7ee1 100%);animation:barLovable .9s cubic-bezier(.2,.75,.2,1) both;transform-origin:bottom}.vbar em{position:absolute;bottom:-34px;font-style:normal;color:#a8b7ca;font-size:14px}.sales-list{display:grid}.sales-list>div{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(119,146,178,.10)}.sales-list strong{display:block;color:#f4f8ff;font-size:16px;margin-bottom:5px}.sales-list small{display:block;color:#93a6bb;font-size:14px}.sales-list b{color:#16d992;font-size:17px}.open-arrow{font-size:26px;color:#a9b8ca}.chart-tip{position:fixed;z-index:9999;padding:10px 12px;border-radius:12px;background:rgba(9,18,32,.98);border:1px solid rgba(119,146,178,.25);box-shadow:0 16px 36px rgba(0,0,0,.34);color:#fff;font-size:13px;pointer-events:none;opacity:0;transform:translateY(5px);transition:.15s}.chart-tip.show{opacity:1;transform:translateY(0)}
@keyframes lovableRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes drawLovable{to{stroke-dashoffset:0}}@keyframes fadeArea{to{opacity:1}}@keyframes donutLovable{from{opacity:0;transform:scale(.82) rotate(-22deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes barLovable{from{transform:scaleY(.08);opacity:.25}to{transform:scaleY(1);opacity:1}}
@media(max-width:1300px){.lovable-metrics{grid-template-columns:repeat(2,1fr)}.dash-grid-main,.dash-grid-bottom{grid-template-columns:1fr}.top-search{width:420px}}@media(max-width:900px){.main{margin-left:0!important}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.lovable-dashboard{padding:26px 18px}.dash-hero{display:block}.live-pill{margin-top:18px}.lovable-metrics{grid-template-columns:1fr}.top-search{width:calc(100vw - 150px)}.dash-hero h1{font-size:34px}.lovable-card strong{font-size:29px}}


/* === FIX FINAL: Sidebar y Clientes igual estilo Lovable === */
:root{--bt-sidebar:280px;--bt-nav-text:#f3f8ff;--bt-nav-muted:#91a4bb;--bt-card:#111d30;--bt-page:#081d31;}
.sidebar{
    width:var(--bt-sidebar)!important;
    padding:0!important;
    background:#0b1628!important;
    border-right:1px solid rgba(119,146,178,.13)!important;
    box-shadow:none!important;
    overflow:hidden!important;
}
.main{margin-left:var(--bt-sidebar)!important;}
.brand{
    margin:0!important;
    height:86px!important;
    padding:0 20px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border:0!important;
    border-bottom:1px solid rgba(119,146,178,.12)!important;
    border-radius:0!important;
    background:transparent!important;
}
.brand-mark{
    width:46px!important;height:46px!important;border-radius:50%!important;
    background:linear-gradient(135deg,#1fc9ef,#2f87ff)!important;
    color:#fff!important;font-size:0!important;position:relative;box-shadow:none!important;
}
.brand-mark::before{content:"";width:20px;height:20px;border:2px solid rgba(255,255,255,.92);border-radius:6px;position:absolute;inset:0;margin:auto;}
.brand-copy strong{font-size:17px!important;color:#fff!important;font-weight:950!important;line-height:1.1!important;}
.brand-copy small{font-size:12px!important;color:#9aadbf!important;letter-spacing:.18em!important;text-transform:uppercase!important;}
.sidebar-card{display:none!important;}
.sidebar nav.main-nav{
    flex:1!important;
    display:block!important;
    padding:22px 12px 92px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
}
.sidebar nav.main-nav::-webkit-scrollbar{width:0!important;}
.sidebar nav p{
    margin:17px 8px 10px!important;
    color:#8ca0b7!important;
    font-size:12px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.22em!important;
}
.sidebar nav a{
    min-height:48px!important;
    height:48px!important;
    padding:0 16px!important;
    margin:4px 0!important;
    border-radius:13px!important;
    gap:14px!important;
    color:var(--bt-nav-text)!important;
    background:transparent!important;
    border:1px solid transparent!important;
    outline:0!important;
    box-shadow:none!important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.sidebar nav a:hover{background:rgba(23,49,80,.55)!important;border-color:rgba(119,146,178,.12)!important;transform:none!important;}
.sidebar nav a.active{
    background:linear-gradient(90deg,rgba(34,119,210,.42),rgba(19,195,255,.12))!important;
    border-color:#2d88ff!important;
    box-shadow:inset 3px 0 0 #23c7f5,0 0 0 1px rgba(45,136,255,.12)!important;
}
.sidebar nav a .nav-num{display:none!important;}
.nav-icon{
    width:22px!important;height:22px!important;min-width:22px!important;
    display:grid!important;place-items:center!important;
    background:transparent!important;border:0!important;color:#f1f7ff!important;
}
.nav-icon svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.sidebar nav a strong{
    display:block!important;max-width:none!important;width:auto!important;
    overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;
    font-size:15px!important;font-weight:900!important;letter-spacing:-.02em!important;color:#f7fbff!important;
}
.user-chip{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;
    height:76px!important;margin:0!important;padding:0 20px!important;
    border-top:1px solid rgba(119,146,178,.12)!important;
    background:#0b1628!important;border-radius:0!important;display:flex!important;align-items:center!important;gap:12px!important;
}
.user-chip>span{width:40px!important;height:40px!important;border-radius:50%!important;background:linear-gradient(135deg,#19c4ee,#2f85ff)!important;color:#fff!important;font-size:15px!important;font-weight:950!important;box-shadow:none!important;}
.user-chip strong{font-size:15px!important;color:#fff!important;}
.user-chip small{font-size:13px!important;color:#92a5bb!important;}
.user-logout{display:none!important;}

/* Clientes */
.lovable-clients-page{padding:38px 50px 60px;background:linear-gradient(180deg,#081d31 0%,#08182a 52%,#070f1d 100%);min-height:calc(100vh - 64px);}
.clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:0 0 32px!important;padding-bottom:28px;border-bottom:1px solid rgba(119,146,178,.12);}
.clients-head h1{font-size:42px!important;line-height:1.02!important;margin:0 0 8px!important;letter-spacing:-.045em!important;color:#fff!important;}
.clients-head p{font-size:17px!important;color:#a8b8ca!important;margin:0!important;}
.lovable-primary{background:linear-gradient(90deg,#2f85ff,#18d2ee)!important;color:white!important;border:0!important;border-radius:16px!important;min-height:44px!important;padding:0 22px!important;font-weight:900!important;box-shadow:none!important;}
.clients-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:34px;}
.client-search-card{width:min(430px,100%);height:43px;border-radius:14px;border:1px solid rgba(119,146,178,.15);background:#0d1a2d;display:flex;align-items:center;gap:12px;padding:0 14px;}
.client-search-card svg{width:19px;height:19px;fill:none;stroke:#8aa0b8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.client-search-card input{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:0!important;color:#e9f2ff!important;font-size:15px!important;width:100%;}
.client-filter-pills{display:flex;gap:9px;flex-wrap:wrap}.client-pill{height:36px;padding:0 15px;display:grid;place-items:center;border-radius:999px;background:#0d1a2d;border:1px solid rgba(119,146,178,.14);color:#a8b8ca;font-weight:850}.client-pill.active{color:#fff;background:rgba(45,136,255,.25);border-color:#2d88ff;}
.client-card-grid{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:22px;}
.lovable-client-card{background:#111d30;border:1px solid rgba(119,146,178,.13);border-radius:22px;padding:22px;min-height:242px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;animation:lovableRise .55s ease both;}
.lovable-client-card:hover{transform:translateY(-3px);border-color:rgba(45,136,255,.45);background:#13233a;}
.client-card-top{display:flex;align-items:center;gap:16px;position:relative;}.client-avatar{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:#0d4b87;color:#2c95ff;flex:0 0 auto}.client-avatar.big{width:56px;height:56px}.client-avatar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.client-main-info{min-width:0;flex:1}.client-main-info h3{margin:0;color:#f5f9ff;font-size:17px;letter-spacing:-.02em}.client-main-info p{margin:5px 0 0;color:#8ea1b8;font-size:13px}.client-type{height:25px;padding:0 12px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#e7f4ff;border:1px solid rgba(119,146,178,.16);background:rgba(255,255,255,.06)}.client-type.revendedor{color:#1bd6e8;background:rgba(15,160,183,.12);border-color:rgba(22,213,244,.28)}.client-type.especial{color:#6da9ff;background:rgba(47,132,255,.13);border-color:rgba(47,132,255,.28)}
.client-info-lines{display:grid;gap:10px;margin:22px 0 20px;color:#98aabe}.client-info-lines span{display:flex;align-items:center;gap:10px;min-width:0}.client-info-lines svg{width:15px;height:15px;fill:none;stroke:#8ea1b8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.client-card-footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(119,146,178,.11);padding-top:16px}.client-card-footer small{display:block;text-transform:uppercase;color:#9dacbf;font-size:11px}.client-card-footer strong{font-size:17px;color:#f5f9ff}.client-card-footer .amount{color:#12d98d!important;}
.client-drawer{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px);transition:opacity .22s ease;}.client-drawer.open{opacity:1;pointer-events:auto}.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(540px,100vw);background:#0b1628;border-left:1px solid rgba(45,136,255,.24);padding:34px 28px;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.78,.2,1);overflow-y:auto;box-shadow:-30px 0 90px rgba(0,0,0,.45)}.client-drawer.open .drawer-panel{transform:translateX(0)}.drawer-close{position:absolute;right:18px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid #2d88ff;background:rgba(45,136,255,.12);color:#7fb9ff;font-size:24px;line-height:1;cursor:pointer}.drawer-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}.drawer-head h2{font-size:23px;margin:0;color:#fff}.drawer-head p{margin:8px 0 0;color:#9daec1;font-size:15px}.drawer-client-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:14px 16px;border-radius:16px;background:#111d30;border:1px solid rgba(119,146,178,.13)}.drawer-client-summary span{color:#9fb0c4;font-weight:900}.drawer-client-summary b{color:#12d98d;font-size:18px}.drawer-actions{display:flex;gap:10px;margin-bottom:22px}.drawer-action{height:38px;padding:0 15px;border-radius:12px;border:1px solid rgba(119,146,178,.16);background:#111d30;color:#eaf3ff;font-weight:900;display:grid;place-items:center;cursor:pointer}.drawer-action.edit{background:rgba(47,132,255,.18);border-color:rgba(47,132,255,.32)}.drawer-action.danger{background:rgba(255,79,102,.10);border-color:rgba(255,79,102,.25);color:#ff8494}.purchase-history-list{display:grid;gap:13px}.purchase-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-radius:17px;background:#111d30;border:1px solid rgba(119,146,178,.13)}.purchase-item strong{display:block;color:#f4f8ff;font-size:16px}.purchase-item span{display:block;color:#91a4ba;margin-top:5px}.purchase-item b{color:#12d98d;font-size:16px;white-space:nowrap}.history-empty{padding:18px;border:1px dashed rgba(119,146,178,.22);border-radius:16px;color:#9fb0c4;text-align:center;}
@media(max-width:1180px){.client-card-grid{grid-template-columns:repeat(2,minmax(260px,1fr));}.clients-tools{align-items:flex-start;flex-direction:column}.client-filter-pills{width:100%}}
@media(max-width:900px){.main{margin-left:0!important}.lovable-clients-page{padding:28px 18px}.client-card-grid{grid-template-columns:1fr}.clients-head{display:block}.clients-head .btn{margin-top:18px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}}


/* === Ajuste final: Perdas y Listas de precios idénticas al diseño Lovable === */
.lovable-pricing-page,.loss-page{animation:lovableEnter .45s ease both;}
@keyframes lovableEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lovable-pricing-head,.loss-head{align-items:flex-start;padding:38px 0 32px;border-bottom:1px solid rgba(125,158,190,.13);margin-bottom:32px;}
.lovable-pricing-head h1,.loss-head h1{font-size:42px;line-height:1.02;letter-spacing:-.055em;margin:8px 0 8px;color:#f4f8ff;}
.lovable-pricing-head p,.loss-head p{font-size:16px;line-height:1.5;color:#a8bad0;max-width:760px;margin:0;}
.pricing-toolbar{margin:0;align-self:center;gap:10px}.btn-symbol{font-size:17px;line-height:1;opacity:.95}.save-btn{min-width:172px;border-radius:999px;background:linear-gradient(90deg,#2e8cff,#17bfd1)!important;}
.lovable-tabs{width:min(620px,100%);height:43px;margin:0 0 28px;padding:4px;border-radius:999px;background:#101c30;border:1px solid rgba(122,151,184,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);}
.lovable-tabs .price-tab{border-radius:999px;font-size:14px;color:#9aaec5;}
.lovable-tabs .price-tab.active{background:linear-gradient(90deg,#2f8fff,#17c5d3);box-shadow:none;color:#fff;}
.lovable-price-card{border-radius:20px!important;background:#111d30!important;border-color:rgba(125,158,190,.16)!important;box-shadow:none!important;overflow:hidden;margin-bottom:28px;}
.lovable-price-card::before{display:none}.lovable-price-card .price-card-head{padding:28px 28px 24px;border-bottom:1px solid rgba(125,158,190,.11);background:transparent;}
.lovable-price-card .price-icon{width:42px;height:42px;border-radius:50%;background:#0b5793;color:#42bdff;border:0;}
.lovable-price-card .price-card-head h2{font-size:18px;color:#f3f7ff;margin:0 0 5px}.lovable-price-card .price-card-head p{font-size:13px;color:#95a8be;margin:0;}
.price-table-scroll{padding:26px 34px 30px!important;overflow-x:auto}.lovable-price-table{min-width:940px;border-spacing:0}.lovable-price-table thead th{font-size:13px;letter-spacing:.08em;color:#9caec3;background:transparent!important;border-bottom:1px solid rgba(125,158,190,.11);padding:14px 12px 15px;text-align:center;}.lovable-price-table thead th:first-child{text-align:left;line-height:1.05;width:150px}.lovable-price-table tbody th{font-size:16px;color:#f3f7ff;padding:15px 12px;border-bottom:1px solid rgba(125,158,190,.09);}.lovable-price-table td{padding:9px 9px;border-bottom:1px solid rgba(125,158,190,.09);}.lovable-price-table tr:last-child td,.lovable-price-table tr:last-child th{border-bottom:0}.lovable-price-table tr:hover td,.lovable-price-table tr:hover th{background:transparent!important}.lovable-price-table .price-input{height:40px;min-height:40px;border-radius:13px;background:#121f33;border:1px solid rgba(141,164,192,.16);color:#eef6ff;font-weight:800;font-size:15px;text-align:center;box-shadow:none;}.lovable-price-table .price-input:hover{background:#14243a;border-color:rgba(61,133,190,.30)}.lovable-price-table .price-input:focus{border-color:#2c94dc;background:#14243a;box-shadow:0 0 0 3px rgba(44,148,220,.12);transform:none}.special-client-area{margin:26px 28px 28px;padding:26px;border-radius:20px;background:#111d30;border:1px solid rgba(125,158,190,.13)}.special-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.special-head-row h2{font-size:20px;margin:0}.special-client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.special-client-card{padding:20px;border-radius:15px;background:#0d192b;border:1px solid rgba(125,158,190,.10);display:grid;gap:14px}.special-client-card h3{margin:0 0 6px;font-size:18px}.special-client-card p,.special-client-card span{margin:0;color:#9daec4}.special-client-card b{color:#f3f7ff}.empty-special{grid-column:1/-1;color:#99abc1;text-align:center}

.loss-head .btn{align-self:center}.loss-main-btn{min-width:190px;border-radius:999px;background:linear-gradient(90deg,#ff4f66,#ffc21e)!important;box-shadow:none!important;}
.loss-summary-card{display:flex;align-items:center;gap:22px;min-height:116px;margin:0 0 34px;padding:24px 28px;border-radius:24px;background:linear-gradient(90deg,rgba(86,33,59,.72),rgba(11,30,43,.52));border:1px solid rgba(255,79,102,.42);box-shadow:none;position:relative;overflow:hidden;}.loss-summary-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,79,102,.075),transparent 60%);pointer-events:none}.loss-icon{width:58px;height:58px;border-radius:20px;background:rgba(255,79,102,.22);display:grid;place-items:center;color:#ff5268;position:relative;z-index:1}.loss-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.loss-summary-card span{display:block;text-transform:uppercase;letter-spacing:.08em;color:#a9adbd;font-size:14px;margin-bottom:6px;font-weight:800}.loss-summary-card strong{font-size:34px;color:#f6f8ff;line-height:1}.loss-table-panel{padding:0!important;border-radius:22px!important;background:#111d30!important;border:1px solid rgba(125,158,190,.13)!important;box-shadow:none!important;overflow:hidden}.loss-table-panel::before{display:none}.loss-table-wrap{border:0!important;border-radius:0!important;background:transparent!important;max-height:calc(100vh - 430px)!important;min-height:142px}.loss-table{min-width:760px}.loss-table th{background:#111d30!important;color:#99aabd;font-size:13px;letter-spacing:.07em;padding:18px 22px;border-bottom:1px solid rgba(125,158,190,.10)}.loss-table td{padding:17px 22px;font-size:15px;background:transparent!important;border-bottom:1px solid rgba(125,158,190,.09)}.loss-table tr:last-child td{border-bottom:0}.loss-table tr:hover td{background:rgba(255,255,255,.025)!important}.loss-table .danger-text{color:#ff5268;font-size:16px;font-weight:900}.loss-modal textarea{min-height:104px}.modal-actions{display:flex;justify-content:flex-end;margin-top:18px}
@media(max-width:980px){.lovable-pricing-head,.loss-head{flex-direction:column;padding-top:18px}.lovable-pricing-head h1,.loss-head h1{font-size:32px}.pricing-toolbar{align-self:flex-start}.special-client-grid{grid-template-columns:1fr}.loss-summary-card{border-radius:18px}.loss-table-wrap{max-height:none!important}}

/* =========================================================
   AJUSTE FINAL LOVABLE: alineación global, sidebar fijo, reportes y tipografías
   ========================================================= */
:root{
  --sidebar-w:280px;
  --bt-bg-main:#081d31;
  --bt-bg-bottom:#071322;
  --bt-panel:#111d30;
  --bt-panel-soft:#0f1d30;
  --bt-border:rgba(122,151,184,.14);
  --bt-border-strong:rgba(122,151,184,.22);
  --bt-text:#f6f9ff;
  --bt-muted:#a4b4c8;
  --bt-cyan:#18d6ef;
  --bt-blue:#2f86ff;
  --bt-green:#12d98d;
}
html,body{overflow-x:hidden!important;background:#061120!important;}
body{font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif!important;font-weight:500!important;}
body::before{display:none!important;}
.app-shell{min-height:100vh!important;background:#061120!important;}
.main{margin-left:var(--sidebar-w)!important;background:linear-gradient(180deg,#081d31 0%,#081827 54%,#070e1d 100%)!important;min-height:100vh!important;}
.content{max-width:none!important;width:100%!important;margin:0!important;padding:38px 46px 56px!important;background:linear-gradient(180deg,#081d31 0%,#081827 54%,#070e1d 100%)!important;}
.app-topbar{height:74px!important;padding:0 36px!important;background:#091426!important;border-bottom:1px solid var(--bt-border)!important;box-shadow:none!important;}
.top-search{width:min(560px,48vw)!important;height:46px!important;border-radius:999px!important;background:#0d1a2d!important;border:1px solid rgba(122,151,184,.16)!important;}
.top-search input{font-size:16px!important;font-weight:450!important;}
.top-icon,.menu-toggle{background:#0d1a2d!important;border:1px solid rgba(122,151,184,.15)!important;box-shadow:none!important;}
.sidebar{width:var(--sidebar-w)!important;background:#0b1628!important;border-right:1px solid rgba(122,151,184,.14)!important;box-shadow:none!important;}
.brand{height:92px!important;padding:0 20px!important;border-bottom:1px solid rgba(122,151,184,.12)!important;}
.brand-mark{width:46px!important;height:46px!important;border-radius:50%!important;box-shadow:none!important;}
.brand-copy strong{font-size:17px!important;font-weight:760!important;letter-spacing:-.025em!important;}
.brand-copy small{font-size:11px!important;letter-spacing:.18em!important;color:#9baec4!important;font-weight:650!important;}
.sidebar nav.main-nav{padding:24px 12px 92px!important;overflow-y:auto!important;scrollbar-width:none!important;}
.sidebar nav.main-nav::-webkit-scrollbar{width:0!important;height:0!important;}
.sidebar nav p{font-size:12px!important;font-weight:750!important;letter-spacing:.24em!important;color:#8fa1b8!important;margin:18px 8px 11px!important;}
.sidebar nav a{height:47px!important;min-height:47px!important;border-radius:13px!important;padding:0 16px!important;margin:4px 0!important;gap:14px!important;color:#f4f8ff!important;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;outline:0!important;}
.sidebar nav a strong{font-size:15px!important;font-weight:700!important;letter-spacing:-.015em!important;line-height:1!important;}
.sidebar nav a:hover{background:rgba(27,52,82,.48)!important;border-color:rgba(122,151,184,.10)!important;}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(47,132,255,.36),rgba(19,195,255,.10))!important;border-color:#2f86ff!important;box-shadow:inset 3px 0 0 #1ed3f2,0 0 0 1px rgba(47,132,255,.08)!important;}
.nav-icon{width:22px!important;height:22px!important;min-width:22px!important;color:#ffffff!important;background:transparent!important;border:0!important;}
.nav-icon svg{width:21px!important;height:21px!important;stroke-width:1.85!important;}
.user-chip{height:76px!important;padding:0 20px!important;background:#0b1628!important;border-top:1px solid rgba(122,151,184,.13)!important;}
.user-chip strong{font-size:15px!important;font-weight:760!important;}
.user-chip small{font-size:13px!important;font-weight:450!important;}

/* Page heads Lovable: todas las pantallas alineadas */
.page-head:not(.dash-hero){display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:28px!important;padding:0 0 30px!important;margin:0 0 34px!important;border-bottom:1px solid rgba(122,151,184,.12)!important;}
.page-head h1{font-size:42px!important;line-height:1.02!important;letter-spacing:-.055em!important;font-weight:780!important;margin:8px 0 8px!important;color:#fff!important;text-shadow:none!important;}
.page-head p{font-size:16px!important;line-height:1.5!important;color:#a8bad0!important;max-width:790px!important;margin:0!important;}
.page-kicker{font-size:12px!important;letter-spacing:.30em!important;color:#18d6ef!important;font-weight:850!important;text-transform:uppercase!important;margin-bottom:14px!important;}
.btn{font-weight:760!important;border-radius:999px!important;box-shadow:none!important;}
.btn:hover{transform:translateY(-1px)!important;}
.card,.panel,.lovable-card,.lovable-panel,.report-card{box-shadow:none!important;}
.card,.panel{border-radius:22px!important;background:#111d30!important;border:1px solid var(--bt-border)!important;}
.card::before,.panel::before{opacity:.35!important;}
.metric-label{font-weight:760!important;font-size:13px!important;letter-spacing:.055em!important;color:#9caec3!important;}
.metric-value{font-weight:760!important;letter-spacing:-.04em!important;color:#f7fbff!important;}

/* Reportes exactamente más cercano al diseño Lovable */
.reports-head{padding:0 0 30px!important;margin:0 0 34px!important;max-width:none!important;}
.reports-head .toolbar{display:none!important;}
.reports-filter-panel{max-width:none!important;margin:0 0 32px!important;padding:28px 28px 30px!important;border-radius:24px!important;background:#111d30!important;border:1px solid var(--bt-border)!important;box-shadow:none!important;}
.filter-title{height:42px!important;margin:0 0 24px!important;padding:0 0 18px!important;border-bottom:1px solid rgba(122,151,184,.12)!important;color:#eef6ff!important;font-size:17px!important;font-weight:780!important;text-transform:uppercase!important;}
.filter-title svg{width:20px!important;height:20px!important;color:#18d6ef!important;stroke-width:2!important;}
.lovable-report-form{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px 22px!important;}
.lovable-report-form label{font-size:13px!important;font-weight:760!important;letter-spacing:.065em!important;color:#9caec3!important;}
.lovable-report-form select,.lovable-report-form input{height:46px!important;border-radius:14px!important;background:#101d30!important;border:1px solid rgba(122,151,184,.22)!important;color:#f6f9ff!important;font-size:16px!important;font-weight:450!important;padding:0 16px!important;box-shadow:none!important;}
.lovable-report-form select:focus,.lovable-report-form input:focus{border-color:rgba(47,132,255,.70)!important;box-shadow:0 0 0 3px rgba(47,132,255,.10)!important;}
.colors-field{margin-top:4px!important;}
.lovable-color-row{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;}
.lovable-color-chip{height:37px!important;padding:0 15px!important;border-radius:999px!important;background:#101d30!important;border:1px solid rgba(122,151,184,.18)!important;color:#a8b7ca!important;font-size:14px!important;font-weight:560!important;letter-spacing:0!important;box-shadow:none!important;}
.lovable-color-chip i{width:11px!important;height:11px!important;box-shadow:none!important;}
.lovable-color-chip.active{background:rgba(45,96,153,.42)!important;border-color:#2f86ff!important;color:#f8fbff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)!important;}
.clear-colors{font-weight:700!important;color:#e4edf7!important;margin-left:14px!important;}
.filter-apply{display:none!important;}
.reports-metrics,.lovable-metric-grid{max-width:none!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;margin:0 0 32px!important;}
.report-card{height:150px!important;min-height:150px!important;padding:28px 28px!important;border-radius:24px!important;background:#111d30!important;border:1px solid var(--bt-border)!important;}
.report-card .metric-value{font-size:36px!important;line-height:1!important;margin-top:16px!important;}
.report-card .metric-note{font-size:14px!important;margin-top:12px!important;font-weight:700!important;}
.report-card .metric-icon{right:26px!important;top:26px!important;width:54px!important;height:54px!important;border-radius:20px!important;font-size:20px!important;}
.lovable-report-charts{max-width:none!important;display:grid!important;grid-template-columns:minmax(0,2fr) minmax(380px,1fr)!important;gap:30px!important;margin:0 0 32px!important;}
.lovable-bottom-charts{max-width:none!important;display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:30px!important;margin:0!important;}
.lovable-chart-panel{padding:28px 28px 30px!important;border-radius:24px!important;background:#111d30!important;border:1px solid var(--bt-border)!important;box-shadow:none!important;}
.lovable-chart-panel h2{font-size:25px!important;font-weight:760!important;letter-spacing:-.04em!important;margin:4px 0 24px!important;color:#fff!important;}
.bt-canvas-wrap{border-radius:18px!important;background:#0b1d31!important;border:1px solid rgba(122,151,184,.12)!important;}
.bt-line-wrap{height:365px!important;}
.bt-donut-wrap{height:310px!important;background:transparent!important;border:0!important;}
.bt-bar-wrap,.bt-loss-wrap{height:320px!important;}
.chart-legend{margin-top:18px!important;gap:24px!important;}
.legend-pill{font-size:14px!important;font-weight:550!important;color:#aebdd0!important;}
.donut-legend{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px 30px!important;margin-top:20px!important;}
.legend-row{font-size:15px!important;color:#b3c2d4!important;}
.legend-row strong{font-weight:760!important;color:#f4f8ff!important;}
.top-client-panel{min-height:398px!important;}
.top-client-list .legend-row{padding:12px 14px!important;border-radius:16px!important;background:#0d1b2d!important;border:1px solid rgba(122,151,184,.09)!important;}

/* Precios y pérdidas: misma alineación Lovable */
.lovable-pricing-page,.loss-page,.lovable-clients-page{padding:0!important;background:transparent!important;}
.lovable-pricing-head,.loss-head,.clients-head{padding:0 0 30px!important;margin:0 0 34px!important;border-bottom:1px solid rgba(122,151,184,.12)!important;}
.lovable-tabs{width:min(680px,100%)!important;height:44px!important;margin-bottom:30px!important;background:#101d30!important;border:1px solid rgba(122,151,184,.16)!important;}
.lovable-price-card,.loss-table-panel,.loss-summary-card{border-radius:24px!important;}
.lovable-price-card{background:#111d30!important;border:1px solid var(--bt-border)!important;}
.loss-summary-card{min-height:124px!important;background:linear-gradient(90deg,rgba(86,33,59,.72),rgba(11,30,43,.50))!important;}
.loss-table-panel{background:#111d30!important;border:1px solid var(--bt-border)!important;}

@media(max-width:1280px){
  .lovable-report-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .reports-metrics,.lovable-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .lovable-report-charts,.lovable-bottom-charts{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  .main{margin-left:0!important;}
  .content{padding:28px 18px 42px!important;}
  .page-head{display:block!important;}
  .page-head h1{font-size:34px!important;}
  .top-search{width:calc(100vw - 150px)!important;}
  .sidebar{transform:translateX(-100%)!important;transition:.25s ease!important;}
  .sidebar.open{transform:translateX(0)!important;}
}
@media(max-width:680px){
  .lovable-report-form,.reports-metrics,.lovable-metric-grid{grid-template-columns:1fr!important;}
  .report-card{height:auto!important;min-height:128px!important;}
}

/* =========================================================
   CORRECCIÓN FINAL LOVABLE REAL: tipografía ligera, sidebar limpio,
   textos sin recorte y cards con espacio correcto
   ========================================================= */
:root{
  --sidebar-w:280px;
  --lov-bg:#071522;
  --lov-bg-2:#081d31;
  --lov-sidebar:#0a1628;
  --lov-panel:#111d30;
  --lov-panel-2:#0d1a2d;
  --lov-border:rgba(122,151,184,.14);
  --lov-border-2:rgba(122,151,184,.22);
  --lov-text:#f5f8ff;
  --lov-muted:#9eb0c6;
  --lov-cyan:#1bd5ee;
  --lov-blue:#2e86ff;
  --lov-green:#16d98b;
}
html, body{
  font-family:"Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
  background:#061120!important;
}
body, button, input, select, textarea{font-weight:400!important;}
strong,b{font-weight:650!important;}

/* Sidebar igual a Lovable: sin números, sin cuadros raros y sin texto cortado */
.sidebar{
  width:var(--sidebar-w)!important;
  padding:0!important;
  gap:0!important;
  background:var(--lov-sidebar)!important;
  border-right:1px solid var(--lov-border)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.main{margin-left:var(--sidebar-w)!important;}
.brand{
  height:96px!important;
  min-height:96px!important;
  margin:0!important;
  padding:0 24px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid var(--lov-border)!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.brand:hover{background:transparent!important;border-color:var(--lov-border)!important;}
.brand-mark{
  width:48px!important;height:48px!important;border-radius:999px!important;
  background:linear-gradient(135deg,#16c4ee,#2f86ff)!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:0!important;
}
.brand-mark::before,.brand-mark::after{display:none!important;content:none!important;}
.brand-mark{position:relative!important;}
.brand-mark::marker{display:none!important;}
.brand-mark::before{content:""!important;display:block!important;position:absolute!important;inset:14px!important;border:2px solid rgba(255,255,255,.92)!important;border-radius:7px!important;background:transparent!important;}
.brand-mark::after{content:""!important;display:block!important;position:absolute!important;inset:10px!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:10px!important;background:transparent!important;}
.brand-copy strong{font-size:16px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-.02em!important;color:#fff!important;}
.brand-copy small{font-size:11px!important;font-weight:500!important;letter-spacing:.18em!important;color:#a0b4ca!important;}
.sidebar-card{display:none!important;}
.sidebar nav.main-nav{
  display:block!important;
  padding:27px 14px 96px!important;
  overflow-y:auto!important;
  height:calc(100vh - 172px)!important;
  scrollbar-width:none!important;
}
.sidebar nav.main-nav::-webkit-scrollbar{display:none!important;}
.sidebar nav p{
  margin:18px 8px 10px!important;
  font-size:12px!important;
  line-height:1!important;
  color:#8ba0b8!important;
  font-weight:500!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
}
.sidebar nav a,
.sidebar nav a:focus,
.sidebar nav a:focus-visible,
.sidebar nav a:active{
  display:grid!important;
  grid-template-columns:28px 1fr!important;
  align-items:center!important;
  gap:16px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 16px!important;
  margin:3px 0!important;
  border-radius:12px!important;
  color:#f3f7ff!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  outline:0!important;
  text-decoration:none!important;
  overflow:hidden!important;
  transform:none!important;
}
.sidebar nav a:hover{
  background:rgba(42,75,110,.28)!important;
  border-color:rgba(122,151,184,.10)!important;
  transform:none!important;
}
.sidebar nav a.active,
.sidebar nav a.active:focus,
.sidebar nav a.active:focus-visible{
  background:linear-gradient(90deg,rgba(47,132,255,.30),rgba(25,199,227,.12))!important;
  border:1px solid #2f86ff!important;
  box-shadow:inset 4px 0 0 #19d4ef!important;
  outline:none!important;
}
.sidebar nav a.active::before,.sidebar nav a.active::after{display:none!important;content:none!important;}
.sidebar nav a .nav-num{display:none!important;}
.sidebar nav a strong{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
  color:inherit!important;
}
.nav-icon{
  width:22px!important;height:22px!important;min-width:22px!important;
  display:grid!important;place-items:center!important;
  background:transparent!important;
  border:0!important;
  color:#f4f8ff!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.nav-icon svg{width:20px!important;height:20px!important;stroke-width:1.75!important;stroke:currentColor!important;fill:none!important;}
.sidebar nav a.active .nav-icon{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;}
.user-chip{
  position:absolute!important;left:0;right:0;bottom:0;
  height:76px!important;margin:0!important;padding:0 24px!important;
  border-top:1px solid var(--lov-border)!important;
  background:var(--lov-sidebar)!important;
  display:flex!important;align-items:center!important;gap:12px!important;
}
.user-chip>span{width:42px!important;height:42px!important;border-radius:999px!important;background:linear-gradient(135deg,#14c4ee,#2f86ff)!important;box-shadow:none!important;font-size:16px!important;font-weight:700!important;}
.user-chip strong{font-size:15px!important;font-weight:600!important;letter-spacing:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.user-chip small{font-size:13px!important;font-weight:400!important;color:#a1b5cb!important;}
.user-logout{display:none!important;}

/* Header y contenido con las mismas proporciones */
.app-topbar{height:72px!important;padding:0 34px!important;background:#091426!important;border-bottom:1px solid var(--lov-border)!important;}
.top-search{height:44px!important;width:min(560px,48vw)!important;background:#0d1a2d!important;border:1px solid rgba(122,151,184,.16)!important;border-radius:999px!important;}
.top-search input{font-size:16px!important;font-weight:400!important;color:#dce8f7!important;}
.top-icon,.menu-toggle{width:42px!important;height:42px!important;border-radius:999px!important;background:#0d1a2d!important;border:1px solid rgba(122,151,184,.16)!important;}
.content{padding:38px 46px 56px!important;background:linear-gradient(180deg,#081d31 0%,#081827 55%,#071120 100%)!important;}
.page-head:not(.dash-hero),.lovable-pricing-head,.loss-head,.clients-head,.reports-head{
  padding:0 0 30px!important;margin:0 0 34px!important;border-bottom:1px solid rgba(122,151,184,.12)!important;
}
.page-head h1,.lovable-pricing-head h1,.loss-head h1,.clients-head h1,.reports-head h1{
  font-size:40px!important;line-height:1.05!important;font-weight:700!important;letter-spacing:-.045em!important;text-shadow:none!important;
}
.page-head p,.lovable-pricing-head p,.loss-head p,.clients-head p,.reports-head p{font-size:16px!important;font-weight:400!important;color:#a9bad0!important;line-height:1.45!important;}
.page-kicker{font-size:12px!important;font-weight:700!important;letter-spacing:.30em!important;color:var(--lov-cyan)!important;}

/* Cards: texto más fino y sin recortes */
.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
.card,.panel,.report-card,.lovable-chart-panel,.lovable-price-card,.loss-table-panel{
  background:#111d30!important;border:1px solid var(--lov-border)!important;border-radius:22px!important;box-shadow:none!important;
}
.card{min-height:130px!important;height:auto!important;padding:24px 24px!important;overflow:hidden!important;}
.card::before,.card::after,.panel::before,.panel::after{opacity:.18!important;}
.metric-label{
  color:#9caec3!important;font-size:13px!important;line-height:1.2!important;font-weight:650!important;letter-spacing:.055em!important;max-width:calc(100% - 72px)!important;white-space:normal!important;
}
.metric-value{
  font-size:31px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.045em!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:calc(100% - 72px)!important;
}
.metric-note{font-size:13px!important;font-weight:600!important;line-height:1.25!important;white-space:normal!important;}
.metric-icon{width:52px!important;height:52px!important;right:24px!important;top:28px!important;border-radius:19px!important;box-shadow:none!important;}

/* Ajuste específico del dashboard para que no corte títulos ni valores */
.dash-hero h1{font-size:38px!important;font-weight:700!important;letter-spacing:-.045em!important;}
.dashboard-page .card,.page-dashboard .card{min-height:130px!important;}
.dashboard-page .metric-label,.page-dashboard .metric-label{font-size:13px!important;}
.dashboard-page .metric-value,.page-dashboard .metric-value{font-size:30px!important;}

@media(max-width:1320px){
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .metric-value{white-space:nowrap!important;}
}
@media(max-width:900px){
  .main{margin-left:0!important;}
  .sidebar{transform:translateX(-100%)!important;transition:.25s ease!important;}
  .sidebar.open{transform:translateX(0)!important;}
  .content{padding:28px 18px 42px!important;}
  .grid.cards{grid-template-columns:1fr!important;}
}

/* =========================================================
   AJUSTE FINAL DE PROPORCIONES LOVABLE
   - evita doble padding en dashboard
   - sidebar tamaño Lovable
   - textos completos y tipografía menos gruesa
   ========================================================= */
:root{ --sidebar-w:280px!important; }
.sidebar{ width:280px!important; }
.main{ margin-left:280px!important; }
.content{ padding:38px 34px 56px!important; max-width:none!important; }
.content:has(.lovable-dashboard){ padding:0!important; }
.lovable-dashboard{
  padding:38px 34px 56px!important;
  max-width:none!important;
  width:100%!important;
}
.app-topbar{ height:72px!important; padding:0 34px!important; }
.top-search{ width:min(560px,42vw)!important; }

/* Sidebar más fiel: sin efecto blanco, tipografía normal y medidas limpias */
.brand{height:96px!important;min-height:96px!important;padding:0 22px!important;}
.brand-copy strong{font-size:15px!important;font-weight:700!important;letter-spacing:-.01em!important;}
.brand-copy small{font-size:11px!important;font-weight:500!important;letter-spacing:.19em!important;}
.sidebar nav.main-nav{height:calc(100vh - 172px)!important;padding:27px 14px 88px!important;}
.sidebar nav p{font-size:12px!important;font-weight:500!important;letter-spacing:.29em!important;margin:18px 8px 10px!important;}
.sidebar nav a,
.sidebar nav a:focus,
.sidebar nav a:focus-visible,
.sidebar nav a:active{
  height:46px!important;min-height:46px!important;
  grid-template-columns:22px 1fr!important;gap:18px!important;
  padding:0 18px!important;margin:4px 0!important;
  border-radius:12px!important;
  background:transparent!important;outline:none!important;box-shadow:none!important;
}
.sidebar nav a strong{font-size:16px!important;font-weight:600!important;line-height:1.1!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(47,132,255,.28),rgba(24,213,239,.10))!important;border:1px solid rgba(47,132,255,.98)!important;box-shadow:inset 4px 0 0 #18d4ef, 0 0 0 1px rgba(24,213,239,.05)!important;}
.sidebar nav a.active *, .sidebar nav a:focus *{outline:none!important;}
.nav-icon{width:22px!important;height:22px!important;min-width:22px!important;}
.nav-icon svg{width:20px!important;height:20px!important;stroke-width:1.85!important;}
.user-chip{height:76px!important;padding:0 22px!important;}
.user-chip strong{font-size:15px!important;font-weight:600!important;}
.user-chip small{font-size:13px!important;font-weight:400!important;}

/* Dashboard: igualar espacios y evitar texto cortado */
.dash-hero{padding-bottom:30px!important;margin-bottom:34px!important;}
.dash-hero h1{font-size:38px!important;line-height:1.04!important;font-weight:700!important;letter-spacing:-.045em!important;text-shadow:none!important;}
.dash-hero p{font-size:16px!important;line-height:1.45!important;font-weight:400!important;color:#a8b8ca!important;}
.page-kicker{font-size:12px!important;font-weight:700!important;letter-spacing:.30em!important;}
.live-pill{height:38px!important;font-size:14px!important;padding:0 18px!important;}
.lovable-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin-bottom:34px!important;}
.lovable-card{
  min-height:132px!important;height:auto!important;
  padding:24px 24px!important;border-radius:22px!important;
  background:#111d30!important;border:1px solid rgba(122,151,184,.14)!important;
  overflow:hidden!important;display:flex!important;align-items:center!important;gap:16px!important;
}
.lovable-card > div{min-width:0!important;max-width:calc(100% - 72px)!important;}
.lovable-card span{font-size:13px!important;line-height:1.18!important;font-weight:650!important;letter-spacing:.055em!important;margin-bottom:12px!important;color:#a0aec0!important;white-space:normal!important;}
.lovable-card strong{font-size:31px!important;line-height:1.05!important;font-weight:700!important;letter-spacing:-.045em!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;color:#fff!important;}
.lovable-card strong.truncate{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;}
.lovable-card small,.lovable-card em{font-size:13px!important;line-height:1.25!important;font-weight:600!important;margin-top:10px!important;white-space:normal!important;}
.card-icon{width:52px!important;height:52px!important;border-radius:18px!important;flex:0 0 52px!important;}
.card-icon svg{width:24px!important;height:24px!important;stroke-width:2!important;}

/* Grillas Lovable */
.dash-grid-main{grid-template-columns:minmax(0,1.7fr) minmax(350px,.82fr)!important;gap:24px!important;margin-bottom:34px!important;}
.dash-grid-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:24px!important;}
.lovable-panel{border-radius:22px!important;background:#111d30!important;border:1px solid rgba(122,151,184,.14)!important;box-shadow:none!important;}
.trend-panel,.donut-panel,.bars-panel,.sales-panel{padding:28px!important;}
.lovable-chart{height:318px!important;}
.lovable-donut{width:210px!important;height:210px!important;}

/* Páginas normales: mismo arranque visual que Lovable */
.page-head:not(.dash-hero),.lovable-pricing-head,.loss-head,.clients-head,.reports-head{
  padding:0 0 30px!important;margin:0 0 34px!important;
}
.page-head h1,.lovable-pricing-head h1,.loss-head h1,.clients-head h1,.reports-head h1{font-size:40px!important;font-weight:700!important;line-height:1.05!important;letter-spacing:-.045em!important;}
.page-head p,.lovable-pricing-head p,.loss-head p,.clients-head p,.reports-head p{font-size:16px!important;font-weight:400!important;line-height:1.45!important;}

@media(max-width:1450px){
  .lovable-card strong{font-size:27px!important;}
  .lovable-card span{font-size:12px!important;}
}
@media(max-width:1300px){
  .lovable-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .dash-grid-main,.dash-grid-bottom{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  .main{margin-left:0!important;}
  .content{padding:28px 18px 42px!important;}
  .content:has(.lovable-dashboard){padding:0!important;}
  .lovable-dashboard{padding:28px 18px 42px!important;}
  .sidebar{transform:translateX(-100%)!important;transition:.25s ease!important;}
  .sidebar.open{transform:translateX(0)!important;}
}


/* =========================================================
   CAPA VISUAL LOVABLE: animaciones, tooltips y graficos
   ========================================================= */
:root{
  --bt-ease:cubic-bezier(.22,.78,.22,1);
  --bt-ease-soft:cubic-bezier(.2,.72,.18,1);
}
.card,.panel,.lovable-card,.lovable-panel,.lovable-chart-panel,.table-wrap,.client-card-grid,.lovable-client-card{
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .72s var(--bt-ease),transform .72s var(--bt-ease),border-color .28s ease,box-shadow .28s ease,background .28s ease,filter .28s ease!important;
  transition-delay:var(--bt-stagger,0ms)!important;
  will-change:opacity,transform;
}
.card.is-visible,.panel.is-visible,.lovable-card.is-visible,.lovable-panel.is-visible,.lovable-chart-panel.is-visible,.table-wrap.is-visible,.client-card-grid.is-visible,.lovable-client-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.lovable-card:hover,.card:hover,.lovable-client-card:hover{
  transform:translateY(-3px) scale(1.006)!important;
  border-color:rgba(64,166,220,.28)!important;
  filter:brightness(1.035);
}
.lovable-panel:hover,.panel:hover,.lovable-chart-panel:hover{
  border-color:rgba(64,166,220,.24)!important;
}
.btn,.icon-btn,.top-icon,.drawer-action,.client-pill,.price-tab,.lovable-color-chip,.sidebar nav a{
  transition:transform .24s var(--bt-ease),background .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease,filter .24s ease!important;
}
.btn:hover,.icon-btn:hover,.top-icon:hover,.drawer-action:hover,.client-pill:hover,.price-tab:hover,.lovable-color-chip:hover{
  transform:translateY(-2px);
}
.sidebar nav a:hover{
  transform:translateX(3px)!important;
}
.table-wrap tbody tr{
  opacity:0;
  transform:translateY(8px);
  animation:btRowIn .58s var(--bt-ease) forwards;
}
.table-wrap tbody tr:nth-child(2){animation-delay:.035s}.table-wrap tbody tr:nth-child(3){animation-delay:.07s}.table-wrap tbody tr:nth-child(4){animation-delay:.105s}.table-wrap tbody tr:nth-child(5){animation-delay:.14s}.table-wrap tbody tr:nth-child(6){animation-delay:.175s}.table-wrap tbody tr:nth-child(n+7){animation-delay:.21s}
.table-wrap tbody tr:hover td{
  transition:background .22s ease,color .22s ease;
}
.modal[open]{
  animation:btModalBackdrop .18s ease both;
}
.modal[open] .modal-body{
  animation:btModalIn .34s var(--bt-ease) both;
  transform-origin:50% 42%;
}
.modal.is-closing .modal-body{
  animation:btModalOut .18s ease both;
}
.modal::backdrop{
  transition:opacity .22s ease,backdrop-filter .22s ease;
}
.client-drawer{transition:opacity .28s ease!important;}
.drawer-panel{transition:transform .36s var(--bt-ease)!important;}
.bt-canvas-wrap,.lovable-chart,.lovable-bars{
  min-height:260px;
  contain:layout paint;
}
.bt-canvas-wrap canvas{
  cursor:crosshair;
}
.bt-chart-tip{
  min-width:190px;
  background:rgba(8,17,31,.96)!important;
  border:1px solid rgba(202,224,244,.18)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(12px);
  transition:opacity .18s ease,transform .18s var(--bt-ease),left .08s linear,top .08s linear!important;
}
.bt-chart-tip strong{display:block;font-size:13px;font-weight:760;color:#fff;margin-bottom:8px;letter-spacing:0!important;}
.bt-chart-tip span{display:grid;grid-template-columns:12px minmax(62px,1fr) auto;align-items:center;gap:8px;color:#aebfd2;font-size:12px;font-weight:600;padding:4px 0;}
.bt-chart-tip span i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 12px currentColor;}
.bt-chart-tip span b{color:#f4f8ff;font-size:12px;font-weight:760;text-align:right;white-space:nowrap;}
.bt-chart-tip small{font-size:12px;line-height:1.35;}
.chart-tip{
  transition:opacity .18s ease,transform .18s var(--bt-ease),left .08s linear,top .08s linear!important;
}
.lovable-line-guide{
  position:absolute;
  z-index:4;
  width:1px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(238,246,255,.86),rgba(255,255,255,.06));
  box-shadow:0 0 16px rgba(238,246,255,.16);
  transform:translateX(-.5px);
  transition:opacity .18s ease,left .08s linear;
}
.lovable-line-guide.show{opacity:1;}
.line-chart svg,.bt-canvas-wrap canvas{transition:filter .24s ease;}
.line-chart:hover svg,.bt-canvas-wrap:hover canvas{filter:brightness(1.04);}
.vbar span{transition:filter .24s ease,transform .24s var(--bt-ease),box-shadow .24s ease;}
.vbar:hover span{filter:brightness(1.12);transform:scaleY(1.02);box-shadow:0 18px 32px rgba(47,134,255,.18);}
.lovable-donut{transition:filter .24s ease,transform .28s var(--bt-ease);}
.lovable-donut:hover{transform:scale(1.018);filter:brightness(1.06);}
.is-refreshing{
  opacity:.38!important;
  transform:translateY(7px) scale(.992)!important;
  pointer-events:none;
}
.lovable-report-charts,.lovable-bottom-charts,.lovable-metric-grid{
  transition:opacity .32s ease,transform .32s var(--bt-ease)!important;
}
@keyframes btRowIn{to{opacity:1;transform:translateY(0)}}
@keyframes btModalIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes btModalOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.975)}}
@keyframes btModalBackdrop{from{opacity:0}to{opacity:1}}
@media(max-width:680px){
  .bt-canvas-wrap{min-height:240px;}
  .bt-chart-tip{max-width:calc(100vw - 34px);min-width:174px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .card,.panel,.lovable-card,.lovable-panel,.lovable-chart-panel,.table-wrap,.client-card-grid,.lovable-client-card{opacity:1!important;transform:none!important;}
}


/* =========================================================
   AJUSTE FINAL: sidebar sin cuadritos y colores escalables
   ========================================================= */
.brand-mark{
  width:48px!important;
  height:48px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#17c9f0 0%,#2f86ff 100%)!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:800!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:none!important;
  position:relative!important;
}
.brand-mark::before,.brand-mark::after,.nav-icon::before,.nav-icon::after{
  display:none!important;
  content:none!important;
}
.sidebar nav a .nav-icon,
.sidebar nav a:hover .nav-icon,
.sidebar nav a.active .nav-icon{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#f4f8ff!important;
  transform:none!important;
}
.sidebar nav a .nav-icon svg{
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
}
.sidebar nav a.active,
.sidebar nav a:hover{
  overflow:hidden!important;
}
.colors-field{
  min-width:0!important;
}
.lovable-color-row[data-color-filter-list]{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  max-height:118px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:8px!important;
  margin-top:6px!important;
  border:1px solid rgba(122,151,184,.13)!important;
  border-radius:18px!important;
  background:#0b1a2d!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(59,143,210,.65) rgba(8,18,31,.82)!important;
}
.lovable-color-row[data-color-filter-list]::-webkit-scrollbar{width:8px!important;height:8px!important;}
.lovable-color-row[data-color-filter-list]::-webkit-scrollbar-track{background:rgba(8,18,31,.82)!important;border-radius:999px!important;}
.lovable-color-row[data-color-filter-list]::-webkit-scrollbar-thumb{background:rgba(59,143,210,.65)!important;border-radius:999px!important;border:2px solid rgba(8,18,31,.92)!important;}
.lovable-color-chip{
  height:38px!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:#101d30!important;
  border:1px solid rgba(122,151,184,.18)!important;
  color:#aebdd0!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  line-height:1!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.lovable-color-chip input{position:absolute!important;opacity:0!important;pointer-events:none!important;}
.lovable-color-chip i{
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  border-radius:999px!important;
  display:block!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.28)!important;
}
.lovable-color-chip .all-dot{
  background:conic-gradient(#ff5268 0 16%,#23d18b 16% 34%,#f6c94b 34% 52%,#2f86ff 52% 70%,#df5aa8 70% 86%,#ff9550 86% 100%)!important;
}
.lovable-color-chip:hover{
  background:#14263d!important;
  border-color:rgba(47,134,255,.44)!important;
  color:#f4f8ff!important;
  transform:translateY(-1px)!important;
}
.lovable-color-chip.active{
  background:rgba(47,134,255,.20)!important;
  border-color:#2f86ff!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(47,134,255,.18)!important;
}
.lovable-color-chip.active i{
  box-shadow:0 0 0 4px rgba(47,134,255,.14), inset 0 0 0 1px rgba(255,255,255,.42)!important;
}
.clear-colors{display:none!important;}
@media(max-width:760px){
  .lovable-color-row[data-color-filter-list]{max-height:150px!important;}
  .lovable-color-chip{height:36px!important;font-size:13px!important;}
}

/* Ajustes finales: precios por rangos, venta multicolor, promo e impuesto */
.price-range-page .lovable-tabs{max-width:760px;grid-template-columns:repeat(5,minmax(0,1fr));}
.price-range-card{overflow:hidden;}
.price-range-card .price-card-head{align-items:center;gap:16px;}
.promo-status{margin-left:auto;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.03em;}
.promo-status.on{color:#19e6a0;background:rgba(25,230,160,.11);border-color:rgba(25,230,160,.24)}
.promo-status.off{color:#ff6b7c;background:rgba(255,82,100,.11);border-color:rgba(255,82,100,.24)}
.price-range-table{width:100%;border-collapse:separate;border-spacing:0;}
.price-range-table thead th{background:rgba(31,48,72,.75);color:#dbe9ff;text-align:center;font-size:13px;text-transform:none;letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.08);}
.price-range-table tbody th{width:150px;text-align:center;color:#dbe9ff;font-weight:500;background:rgba(255,255,255,.025);}
.price-range-table th,.price-range-table td{padding:10px 14px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);}
.price-range-table th:last-child,.price-range-table td:last-child{border-right:0;}
.price-range-table td{position:relative;background:rgba(255,255,255,.018);}
.price-range-table .currency-prefix{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#9fb1c7;font-weight:600;z-index:1;}
.price-range-table .price-input{width:100%;height:38px;padding-left:34px;text-align:right;background:rgba(5,17,33,.72);border:1px solid rgba(148,163,184,.16);border-radius:10px;color:#f8fbff;font-size:14px;}
.price-range-table .price-input:focus{border-color:#22c7ee;box-shadow:0 0 0 3px rgba(34,199,238,.12);outline:0;}
.promo-inline-card{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding:14px 18px;border:1px solid rgba(34,199,238,.15);border-radius:16px;background:rgba(8,26,45,.62);color:#aec2d8;}
.sale-modal-wide{max-width:min(980px,94vw);}
.sale-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.sale-lines-panel{margin-top:18px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(5,17,33,.45);padding:16px;}
.sale-lines-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.sale-lines-head b{display:block;color:#f3f8ff;font-size:16px;}
.sale-lines-head span{display:block;color:#95aac3;font-size:13px;margin-top:3px;}
.sale-lines{display:grid;gap:10px;}
.sale-line{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 42px;gap:10px;align-items:end;padding:12px;border:1px solid rgba(148,163,184,.11);border-radius:16px;background:rgba(15,32,53,.52);}
.sale-line .field{margin:0;}
.line-stock{font-size:12px;color:#9fb1c7;padding-bottom:13px;}
.line-stock.ok{color:#19e6a0}.line-stock.bad{color:#ff6378}.line-remove{align-self:center;}
.switch-row{display:flex;align-items:center;gap:10px;height:45px;padding:0 12px;border:1px solid rgba(148,163,184,.16);border-radius:13px;background:rgba(5,17,33,.56);color:#dbe9ff;}
.switch-row input{accent-color:#14c8eb;}
.sale-summary-box{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px;}
.sale-summary-box>div{padding:13px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.14);background:rgba(12,28,48,.72);}
.sale-summary-box span{display:block;color:#9fb1c7;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.sale-summary-box strong{display:block;margin-top:5px;color:#fff;font-size:16px;white-space:nowrap;}
.sale-summary-box .grand{background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(20,184,166,.13));border-color:rgba(34,199,238,.25)}
.sale-summary-box .grand strong{font-size:20px;color:#18e6a3;}
.promo-sale-btn.is-disabled{opacity:.65;filter:saturate(.7);}
@media (max-width: 980px){.sale-form-grid{grid-template-columns:1fr 1fr}.sale-summary-box{grid-template-columns:repeat(2,1fr)}.sale-line{grid-template-columns:1fr 1fr}.line-remove{grid-column:2}.price-range-page .lovable-tabs{grid-template-columns:1fr 1fr;max-width:none}}
@media (max-width: 620px){.sale-form-grid,.sale-line{grid-template-columns:1fr}.sale-summary-box{grid-template-columns:1fr}.price-range-table{min-width:720px}.price-table-scroll{overflow:auto}}

/* === Ajuste comercial final: venta ordenada, promo automática y precios por tipo === */
.sale-modal-polished{
    width:min(980px,calc(100vw - 46px))!important;
    max-height:calc(100vh - 42px)!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
}
.sale-modal-polished .sale-modal-head{
    padding:26px 30px 18px!important;
    margin:0!important;
    border-bottom:1px solid rgba(128,160,196,.13)!important;
}
.sale-modal-polished .sale-modal-head h3{font-size:30px!important;letter-spacing:-.045em!important;margin-top:6px!important;}
.sale-modal-scrollarea{
    padding:22px 30px 18px!important;
    overflow:auto!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(26,161,205,.55) rgba(10,22,38,.45);
}
.sale-modal-scrollarea::-webkit-scrollbar{width:9px}.sale-modal-scrollarea::-webkit-scrollbar-track{background:rgba(10,22,38,.55);border-radius:99px}.sale-modal-scrollarea::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1cb5dc,#1d6fa6);border-radius:99px;border:2px solid rgba(10,22,38,.65)}
.sale-section{margin-bottom:16px;padding:18px;border-radius:18px;background:rgba(9,22,38,.56);border:1px solid rgba(125,158,190,.12)}
.client-section{padding-bottom:16px}.add-client-inline{margin-top:10px!important;width:max-content!important;}
.refined-sale-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px 16px!important}.refined-sale-grid .field{min-width:0}.refined-sale-grid .field label,.sale-lines .field label{font-size:12px!important;letter-spacing:.055em!important;color:#96aabd!important}.sale-modal-polished input,.sale-modal-polished select{height:48px!important;border-radius:13px!important;background:#08192c!important;border-color:rgba(128,160,196,.22)!important;font-size:15px!important;color:#edf6ff!important}.sale-modal-polished input:focus,.sale-modal-polished select:focus{border-color:#23b8d5!important;box-shadow:0 0 0 3px rgba(35,184,213,.12)!important}
.tax-field{align-self:end}.pretty-toggle{height:48px;display:flex!important;align-items:center;gap:12px;padding:0 14px;border-radius:14px;background:#08192c;border:1px solid rgba(128,160,196,.18);cursor:pointer;color:#dce9f8;font-weight:800;text-transform:none!important;letter-spacing:0!important}.pretty-toggle input{position:absolute!important;opacity:0!important;pointer-events:none!important}.toggle-ui{width:44px;height:24px;border-radius:99px;background:#14243a;border:1px solid rgba(128,160,196,.25);position:relative;transition:.2s ease}.toggle-ui::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#8aa0b8;transition:.2s ease}.pretty-toggle input:checked + .toggle-ui{background:linear-gradient(90deg,#2297e6,#13c3d3);border-color:rgba(27,199,220,.62)}.pretty-toggle input:checked + .toggle-ui::after{transform:translateX(19px);background:#fff}.pretty-toggle span:last-child{font-size:13px;line-height:1.1}
.promo-state-banner{margin-top:14px;padding:13px 16px 13px 46px;border-radius:15px;position:relative;background:rgba(15,31,52,.78);border:1px solid rgba(128,160,196,.15);color:#9fb2c8}.promo-state-banner::before{content:"";position:absolute;left:16px;top:17px;width:14px;height:14px;border-radius:50%;background:#748aa1}.promo-state-banner b{display:block;color:#f4f8ff;font-size:14px;margin-bottom:3px}.promo-state-banner span{display:block;font-size:13px;line-height:1.35}.promo-state-banner.promo-on{border-color:rgba(32,208,138,.32);background:rgba(15,70,55,.25);color:#a6e8cf}.promo-state-banner.promo-on::before{background:#20d08a;box-shadow:0 0 0 5px rgba(32,208,138,.12)}.promo-state-banner.promo-on b{color:#33e3a0}.promo-state-banner.promo-wait{border-color:rgba(47,132,255,.28);background:rgba(32,73,130,.20)}.promo-state-banner.promo-wait::before{background:#2f84ff}.promo-state-banner.promo-off{border-color:rgba(255,181,69,.24);background:rgba(92,65,24,.18)}.promo-state-banner.promo-off::before{background:#ffb545}.promo-state-banner.mayorista{border-color:rgba(23,213,239,.28);background:rgba(17,93,114,.18)}.promo-state-banner.mayorista::before{background:#17d5ef}
.sale-lines-panel{padding:18px 20px!important;border-radius:18px!important}.sale-lines-head b{font-size:19px!important}.sale-lines-head span{font-size:14px!important;color:#98aabd!important}.sale-line{display:grid!important;grid-template-columns:minmax(210px,1fr) minmax(150px,.75fr) auto 42px!important;gap:12px!important;align-items:end!important;padding:14px!important;border-radius:16px!important;background:rgba(12,30,50,.58)!important;border:1px solid rgba(128,160,196,.12)!important}.line-stock{height:48px;display:flex;align-items:center;padding:0 12px;border-radius:13px;background:rgba(8,25,44,.78);white-space:nowrap;font-weight:800}.line-stock.ok{color:#23e09a}.line-stock.bad{color:#ff7183}.line-remove{align-self:end!important;height:42px!important;width:42px!important;border-radius:13px!important}.refined-summary-box{display:grid!important;grid-template-columns:repeat(6,minmax(120px,1fr))!important;gap:12px!important;margin-top:16px!important}.refined-summary-box>div{padding:14px!important;border-radius:15px!important;background:#0e1b2e!important;border:1px solid rgba(128,160,196,.13)!important}.refined-summary-box span{display:block;color:#94a8bd;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.05em;margin-bottom:6px}.refined-summary-box strong{font-size:17px;color:#f7fbff}.refined-summary-box .grand{background:linear-gradient(180deg,rgba(22,145,169,.22),rgba(8,68,83,.26))!important;border-color:rgba(23,213,239,.3)!important}.refined-summary-box .grand strong{font-size:22px;color:#20e39e}.sale-modal-actions{padding:16px 30px 24px;margin:0!important;border-top:1px solid rgba(128,160,196,.12);display:flex;justify-content:flex-end;background:rgba(7,18,31,.74)}
@media(max-width:980px){.refined-sale-grid{grid-template-columns:1fr!important}.sale-line{grid-template-columns:1fr!important}.refined-summary-box{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sale-modal-polished{width:calc(100vw - 20px)!important}.sale-modal-scrollarea{padding:18px!important}.sale-modal-polished .sale-modal-head{padding:22px 20px 16px!important}}

.category-tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;width:min(760px,100%)!important}.bracelet-type-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:22px 28px 0}.bracelet-type-tab{height:38px;padding:0 18px;border-radius:999px;border:1px solid rgba(128,160,196,.16);background:#0d1a2d;color:#9eb0c4;font-weight:900;cursor:pointer;transition:.2s ease}.bracelet-type-tab:hover{color:#fff;border-color:rgba(45,136,255,.38);background:#12233a}.bracelet-type-tab.active{color:#fff;background:linear-gradient(90deg,#2e8cff,#17bfd1);border-color:transparent}.type-price-panel{display:none}.type-price-panel.active{display:block;animation:softRise .28s ease both}.modern-price-table{min-width:760px!important}.modern-price-table th,.modern-price-table td{text-align:center!important}.modern-price-table thead th:first-child,.modern-price-table tbody th{text-align:left!important}.modern-price-table td{position:relative}.modern-price-table .currency-prefix{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:1;color:#8ea1b6;font-weight:800}.modern-price-table .price-input{padding-left:34px!important;text-align:right!important;padding-right:16px!important}.promo-status{margin-left:auto;height:30px;padding:0 13px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:900}.promo-status.on{background:rgba(32,208,138,.14);color:#20d08a;border:1px solid rgba(32,208,138,.25)}.promo-status.off{background:rgba(255,181,69,.10);color:#ffbe55;border:1px solid rgba(255,181,69,.22)}

/* ===== AJUSTE FINAL: TOPBAR LIMPIA, NOTIFICACIONES Y MODAL DE VENTA ===== */
.app-topbar{
  height:64px!important;
  padding:0 28px!important;
  background:#071323!important;
  border-bottom:1px solid rgba(125,158,190,.14)!important;
}
.topbar-left{display:flex;align-items:center;gap:12px!important;}
.top-search{display:none!important;}
.top-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:12px!important;}
.top-actions .top-icon:not(.notification-trigger){display:none!important;}
.notification-trigger{position:relative!important;width:44px!important;height:44px!important;border-radius:999px!important;background:#0d1a2d!important;border:1px solid rgba(132,166,204,.18)!important;color:#d9e7f8!important;}
.notification-trigger:hover{background:#12243b!important;border-color:rgba(22,213,244,.36)!important;transform:translateY(-1px);}
.notification-trigger svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.notification-dot{position:absolute;right:10px;top:9px;width:9px;height:9px;border-radius:999px;background:#19d7f2;box-shadow:0 0 0 3px #0d1a2d,0 0 16px rgba(25,215,242,.75);}
.notification-count{position:absolute;right:-7px;top:-7px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#ff5b67,#ff9b3d);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;line-height:1;box-shadow:0 8px 18px rgba(0,0,0,.3);}
.notifications{position:relative;}
.notification-panel{position:absolute;top:54px;right:0;width:min(390px,calc(100vw - 32px));max-height:480px;overflow:hidden;border:1px solid rgba(132,166,204,.22);border-radius:20px;background:linear-gradient(180deg,#102039,#081729);box-shadow:0 28px 90px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transition:.18s ease;z-index:80;}
.notification-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(132,166,204,.14);}
.notification-head strong{display:block;font-size:16px;color:#f3f8ff;}
.notification-head small{display:block;margin-top:3px;color:#8ea1b7;font-size:12px;}
.notification-head button{border:0;background:rgba(22,213,244,.10);color:#b9f1ff;border:1px solid rgba(22,213,244,.28);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:850;cursor:pointer;}
.notification-list{max-height:390px;overflow:auto;padding:8px;}
.notification-list::-webkit-scrollbar{width:8px}.notification-list::-webkit-scrollbar-thumb{background:rgba(25,153,185,.55);border-radius:999px}.notification-list::-webkit-scrollbar-track{background:rgba(6,15,27,.65)}
.notification-item{display:grid;grid-template-columns:12px 1fr;gap:12px;padding:13px 12px;border-radius:15px;color:#dbe8f8;transition:.16s ease;border:1px solid transparent;}
.notification-item:hover{background:rgba(39,136,255,.10);border-color:rgba(39,136,255,.18);transform:translateX(2px);}
.notification-item.is-read{opacity:.52;}
.notification-item.is-read .notification-mark{background:#64748b!important;box-shadow:none!important;}
.notification-mark{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#18d5f4;box-shadow:0 0 14px rgba(24,213,244,.65);}
.notification-mark.success{background:#21d68e;box-shadow:0 0 14px rgba(33,214,142,.6)}
.notification-mark.warning{background:#f7c739;box-shadow:0 0 14px rgba(247,199,57,.55)}
.notification-mark.danger{background:#ff5269;box-shadow:0 0 14px rgba(255,82,105,.55)}
.notification-item strong{display:block;font-size:13px;color:#f3f8ff;margin-bottom:4px;}
.notification-item small{display:block;font-size:12px;line-height:1.35;color:#99adbf;}
.notification-empty{padding:22px;text-align:center;color:#91a5ba;}
.notifications.all-read .notification-dot,.notifications.all-read .notification-count{display:none!important;}

#saleModal{width:min(940px,calc(100vw - 54px))!important;max-width:min(940px,calc(100vw - 54px))!important;max-height:calc(100vh - 34px)!important;overflow:hidden!important;border-radius:18px!important;}
#saleModal .sale-modal-wide,#saleModal .sale-modal-polished{width:100%!important;max-width:none!important;box-sizing:border-box!important;}
#saleModal .modal-body{padding:0!important;overflow:hidden!important;border-radius:18px!important;border-color:rgba(58,126,176,.45)!important;}
.sale-modal-polished .sale-modal-head{padding:24px 28px 18px!important;margin:0!important;border-bottom:1px solid rgba(132,166,204,.14);}
.sale-modal-polished .sale-modal-head h3{font-size:27px!important;line-height:1.1!important;margin:6px 0 8px!important;}
.sale-modal-polished .sale-modal-head p{margin:0!important;color:#94a8bd!important;font-size:14px!important;}
.sale-modal-scrollarea{max-height:calc(100vh - 205px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:22px 28px!important;scrollbar-gutter:stable!important;}
.sale-modal-scrollarea::-webkit-scrollbar{width:8px!important;height:8px!important;}
.sale-modal-scrollarea::-webkit-scrollbar-track{background:rgba(7,18,31,.55)!important;border-radius:999px!important;}
.sale-modal-scrollarea::-webkit-scrollbar-thumb{background:rgba(22,151,184,.62)!important;border-radius:999px!important;border:2px solid rgba(7,18,31,.62)!important;}
.sale-section{padding:0!important;background:transparent!important;border:0!important;margin:0 0 18px!important;}
.client-section{padding-bottom:18px!important;border-bottom:1px solid rgba(132,166,204,.12)!important;}
.refined-sale-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
.sale-modal-polished input,.sale-modal-polished select{height:46px!important;min-width:0!important;}
.tax-field{align-self:end!important;}
.pretty-toggle{height:46px!important;padding:0 13px!important;gap:10px!important;border-radius:13px!important;}
.toggle-ui{width:40px!important;height:22px!important;flex:0 0 40px!important;}
.toggle-ui::after{width:16px!important;height:16px!important;}
.pretty-toggle input:checked + .toggle-ui::after{transform:translateX(18px)!important;}
.pretty-toggle span:last-child{font-size:12px!important;font-weight:850!important;}
.promo-state-banner{margin:4px 0 16px!important;}
.sale-lines-panel{padding:18px!important;overflow:hidden!important;}
.sale-line{grid-template-columns:minmax(180px,1fr) minmax(130px,.7fr) minmax(150px,.8fr) 42px!important;}
.refined-summary-box{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;}
.refined-summary-box>div{min-width:0!important;}
.sale-modal-actions{padding:14px 28px 20px!important;}
@media(max-width:980px){
  #saleModal{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;}
  .refined-sale-grid{grid-template-columns:1fr!important;}
  .sale-line{grid-template-columns:1fr!important;}
  .refined-summary-box{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Ajustes finales: roles, tablas multicolor y lectura de precios */
.readonly-pill{align-self:center;padding:10px 16px;border:1px solid rgba(80,160,210,.25);border-radius:999px;background:rgba(12,35,58,.68);color:#a9bdd3;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.multi-lines-panel{margin-top:16px;border:1px solid rgba(128,160,196,.14);border-radius:18px;background:rgba(7,20,35,.48);padding:16px 18px}
.price-input[disabled]{opacity:.9;cursor:not-allowed;color:#dbeafe!important;background:rgba(11,25,43,.7)!important}
.role-note{font-size:13px;color:#94a8bd;margin-top:8px}.table-wrap table td small{color:#8fa3ba}

/* ===== PixelBrazzaletes GoDaddy branding fix ===== */
.brand-logo,
.login-card .brand-logo{
    overflow:hidden!important;
    background:linear-gradient(135deg,#0fd2ef,#2b86ff)!important;
    display:grid!important;
    place-items:center!important;
}
.brand-logo img{
    width:72%!important;
    height:72%!important;
    object-fit:contain!important;
    display:block!important;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.brand-mark.brand-logo::before,
.brand-mark.brand-logo::after{
    display:none!important;
    content:none!important;
}
.brand-copy strong{
    max-width:170px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.05!important;
}
.login-card .brand-logo{
    width:58px!important;
    height:58px!important;
    border-radius:18px!important;
    margin:0 auto!important;
}
.login-card h1{letter-spacing:-.04em!important;}

/* === Login Pixel Pro Brazaletes: diseño premium y animaciones suaves === */
.login-page{
    min-height:100vh!important;
    display:grid!important;
    place-items:center!important;
    padding:32px!important;
    overflow:hidden!important;
    background:
        radial-gradient(circle at 18% 22%, rgba(44,132,255,.18), transparent 26rem),
        radial-gradient(circle at 82% 12%, rgba(22,213,244,.18), transparent 22rem),
        radial-gradient(circle at 50% 100%, rgba(23,126,222,.14), transparent 30rem),
        linear-gradient(145deg,#04101d 0%,#071827 46%,#050d19 100%)!important;
    position:relative!important;
}
.login-page::before{
    content:""!important;
    position:absolute!important;
    inset:-30%!important;
    background:
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px)!important;
    background-size:54px 54px!important;
    mask-image:radial-gradient(circle at center,rgba(0,0,0,.55),transparent 68%)!important;
    animation:loginGrid 18s linear infinite!important;
    pointer-events:none!important;
}
.login-hero-card{
    position:relative!important;
    width:min(500px,100%)!important;
    animation:loginEnter .75s cubic-bezier(.22,1,.36,1) both!important;
}
.login-orb{
    position:absolute!important;
    width:150px!important;
    height:150px!important;
    border-radius:50%!important;
    filter:blur(20px)!important;
    opacity:.45!important;
    pointer-events:none!important;
    animation:orbFloat 6s ease-in-out infinite!important;
}
.login-orb.orb-one{background:#16d5f4!important;top:-46px!important;left:-54px!important;}
.login-orb.orb-two{background:#2b86ff!important;right:-44px!important;bottom:-54px!important;animation-delay:-2s!important;}
.login-card{
    width:100%!important;
    padding:34px 34px 30px!important;
    border-radius:28px!important;
    background:
        linear-gradient(180deg,rgba(18,34,56,.93),rgba(9,22,38,.96))!important;
    border:1px solid rgba(94,155,214,.30)!important;
    box-shadow:0 34px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(18px)!important;
    overflow:hidden!important;
    position:relative!important;
}
.login-card::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(120deg,rgba(22,213,244,.13),transparent 35%,rgba(43,134,255,.10))!important;
    opacity:.72!important;
    pointer-events:none!important;
}
.login-card > *{position:relative!important;z-index:1!important;}
.login-logo-wrap{display:flex!important;justify-content:center!important;margin-bottom:14px!important;}
.login-logo{
    width:86px!important;
    height:86px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:28px!important;
    background:linear-gradient(135deg,#14d3f2,#2a86ff)!important;
    box-shadow:0 18px 42px rgba(32,142,230,.28)!important;
    animation:logoPulse 2.8s ease-in-out infinite!important;
}
.login-logo img{max-width:62px!important;max-height:62px!important;object-fit:contain!important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))!important;}
.login-kicker{
    display:block!important;
    text-align:center!important;
    color:#19d5ef!important;
    font-size:11px!important;
    letter-spacing:.22em!important;
    font-weight:850!important;
    text-transform:uppercase!important;
    margin:4px 0 10px!important;
}
.login-card h1{
    margin:0 0 10px!important;
    text-align:center!important;
    font-size:clamp(32px,4vw,42px)!important;
    line-height:1.02!important;
    font-weight:850!important;
    letter-spacing:-.05em!important;
    color:#f4f9ff!important;
    text-shadow:0 12px 32px rgba(0,0,0,.26)!important;
}
.login-card p{
    margin:0 auto 26px!important;
    max-width:390px!important;
    text-align:center!important;
    color:#9cb0c8!important;
    font-size:14px!important;
    line-height:1.55!important;
}
.login-card .field{gap:8px!important;margin-bottom:14px!important;}
.login-card label{color:#a9bad0!important;font-size:11px!important;letter-spacing:.095em!important;font-weight:850!important;}
.login-card input{
    min-height:50px!important;
    border-radius:14px!important;
    background:rgba(5,17,31,.74)!important;
    border:1px solid rgba(96,152,206,.24)!important;
    color:#ecf6ff!important;
    padding:0 16px!important;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease!important;
}
.login-card input:focus{
    border-color:#1ed2ee!important;
    box-shadow:0 0 0 4px rgba(30,210,238,.10)!important;
    transform:translateY(-1px)!important;
}
.login-btn{
    width:100%!important;
    min-height:52px!important;
    margin-top:6px!important;
    border-radius:999px!important;
    font-size:15px!important;
    font-weight:850!important;
    background:linear-gradient(135deg,#2d8cff,#20c7d9)!important;
    box-shadow:0 18px 34px rgba(34,151,224,.24)!important;
}
.login-btn:hover{transform:translateY(-2px)!important;box-shadow:0 22px 42px rgba(34,151,224,.32)!important;}
.login-note{
    margin:16px 0 0!important;
    color:#7f95ad!important;
    font-size:12px!important;
}
.login-flash{margin:0 0 16px!important;border-radius:14px!important;text-align:center!important;}
@keyframes loginEnter{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes loginGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(54px,54px,0)}}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.06)}}
@keyframes logoPulse{0%,100%{transform:translateY(0);box-shadow:0 18px 42px rgba(32,142,230,.28)}50%{transform:translateY(-3px);box-shadow:0 24px 52px rgba(32,142,230,.38)}}
@media(max-width:560px){.login-card{padding:28px 22px 24px!important;border-radius:24px!important}.login-logo{width:74px!important;height:74px!important}.login-logo img{max-width:54px!important;max-height:54px!important}}

/* Ajustes finales: filtros, detalles y tarjetas clickeables */
.inventory-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.inventory-toolbar .search-input{max-width:360px}.filter-select{height:44px;border:1px solid rgba(79,150,210,.28);background:#07182a;color:#eaf3ff;border-radius:12px;padding:0 14px;min-width:180px}.metric-action{appearance:none;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.metric-action:hover{transform:translateY(-2px);border-color:rgba(24,200,232,.45);background:linear-gradient(145deg,rgba(18,41,65,.96),rgba(9,27,45,.96))}.detail-modal{max-width:860px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}.detail-grid>div{border:1px solid rgba(86,139,190,.22);background:rgba(6,20,36,.5);border-radius:14px;padding:14px}.detail-grid span{display:block;color:#9fb0c7;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:800;margin-bottom:6px}.detail-grid strong{color:#f3f8ff}.detail-grid.totals .amount{color:#20e0a0}.table-wrap.mini{max-height:320px}.detail-note{margin-top:14px;border:1px solid rgba(86,139,190,.22);background:rgba(6,20,36,.45);border-radius:14px;padding:14px}.detail-note p{margin:.35rem 0 0;color:#aab9cc}.toolbar .btn.secondary{white-space:nowrap}


/* Ajustes finales: ventas, tablas y dropdowns */
.sales-table-modern th,
.sales-table-modern td { white-space: nowrap; vertical-align: middle; }
.sales-table-modern td:nth-child(4),
.sales-table-modern td:nth-child(6) { white-space: normal; min-width: 150px; }
.client-options.open { display: block; }
.purchase-modal .field input[readonly] { color: var(--green); font-weight: 800; }


/* Ajustes finales Pixel Pro Brazaletes: filtros, tablas compactas y gráficos */
.inventory-filter-bar{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:14px;border:1px solid rgba(49,143,205,.22);border-radius:18px;background:linear-gradient(180deg,rgba(10,28,47,.72),rgba(8,22,38,.88));}
.filter-pill-group{display:grid;gap:6px;min-width:220px;flex:1;}
.filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:#8ea4ba;}
.pill-select{height:44px!important;border-radius:14px!important;background:#08192c!important;border:1px solid rgba(84,139,184,.28)!important;color:#eaf4ff!important;padding:0 42px 0 16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.pill-select:focus{border-color:#20c8e5!important;box-shadow:0 0 0 3px rgba(32,200,229,.12)!important;outline:none;}
.inventory-clear-btn{height:44px!important;align-self:end;white-space:nowrap;}
.compact-panel{padding:18px!important;overflow:hidden;}
.compact-table-wrap{max-height:calc(100vh - 420px);overflow:auto;border-radius:16px!important;}
.compact-data-table{min-width:980px!important;font-size:13px;}
.compact-data-table th{font-size:11px!important;letter-spacing:.09em!important;padding:13px 14px!important;white-space:nowrap;}
.compact-data-table td{padding:13px 14px!important;vertical-align:middle;}
.compact-data-table .product-summary{font-weight:800;color:#eef6ff;min-width:190px;max-width:260px;}
.compact-data-table .product-summary small{display:block;margin-top:4px;color:#90a3b9;font-size:12px;font-weight:600;line-height:1.25;}
.compact-colors{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.action-row{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.inline-form{display:inline;margin:0;}
.btn.tiny{height:32px!important;padding:0 10px!important;border-radius:12px!important;font-size:11px!important;line-height:1!important;}
.btn.tiny.danger{background:rgba(255,80,101,.12)!important;border:1px solid rgba(255,80,101,.32)!important;color:#ff8b99!important;}
.btn.tiny.ghost{background:rgba(130,157,190,.08)!important;border:1px solid rgba(130,157,190,.18)!important;color:#c6d6e8!important;}
.text-soft{color:#a9bbcf;}
/* Colores solicitados para líneas: ventas verde, compras rojo, utilidad amarillo */
.line-chart .line.blue{stroke:#22d184!important;}
.line-chart .line.cyan{stroke:#ff5168!important;}
.line-chart .line.green{stroke:#f3c336!important;}
.line-chart .area.blue{fill:rgba(34,209,132,.12)!important;}
.line-chart .area.sales{fill:rgba(255,81,104,.10)!important;}
.line-chart .area.green{fill:rgba(243,195,54,.10)!important;}
.mini-tabs span:nth-child(1){color:#22d184!important}.mini-tabs span:nth-child(2){color:#ff5168!important}.mini-tabs span:nth-child(3){color:#f3c336!important}
.lovable-donut-layout,.bt-donut-wrap{display:grid!important;place-items:center!important;}
.lovable-donut{width:230px!important;height:230px!important;border:1px solid rgba(238,246,255,.12);box-shadow:0 18px 55px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04)!important;}
.lovable-donut::after{inset:68px!important;background:radial-gradient(circle,#0e1d31 0%,#111d30 72%)!important;border:1px solid rgba(255,255,255,.08)!important;}
.donut-panel .lovable-legend{margin-top:4px;max-width:370px;}
@media(max-width:1100px){.compact-data-table{min-width:880px!important}.action-row{gap:5px}.btn.tiny{padding:0 8px!important}.inventory-filter-bar{display:grid;grid-template-columns:1fr 1fr auto}.filter-pill-group{min-width:0}}
@media(max-width:700px){.inventory-filter-bar{grid-template-columns:1fr}.compact-table-wrap{max-height:520px}.compact-data-table{min-width:760px!important}}


/* Final polish: inventory filters, compact tables, drawer lock, chart colors */
body.drawer-open{overflow:hidden!important;}
.inventory-summary{margin-bottom:26px!important;}
.inventory-filter-bar{
    margin:0 0 26px!important;
    padding:18px!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(16,32,53,.95),rgba(10,25,43,.98))!important;
    border:1px solid rgba(45,136,255,.20)!important;
    display:grid!important;
    grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto!important;
    gap:16px!important;
    align-items:end!important;
}
.filter-pill-group{display:grid!important;gap:8px!important;min-width:0!important;}
.filter-label{font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#9fb1c7!important;font-weight:900!important;}
.filter-select.pill-select{
    height:48px!important;
    width:100%!important;
    border-radius:15px!important;
    background:#081a2d!important;
    border:1px solid rgba(76,128,184,.32)!important;
    color:#eaf4ff!important;
    padding:0 16px!important;
    font-weight:800!important;
    outline:none!important;
}
.filter-select.pill-select:focus{border-color:#24c8ef!important;box-shadow:0 0 0 3px rgba(36,200,239,.12)!important;}
.inventory-clear-btn{height:48px!important;align-self:end!important;white-space:nowrap!important;}
.data-panel{overflow:hidden!important;}
.compact-table-wrap{max-height:430px!important;overflow:auto!important;}
.compact-data-table{table-layout:fixed!important;min-width:0!important;width:100%!important;}
.compact-data-table th,.compact-data-table td{padding:14px 16px!important;vertical-align:middle!important;}
.compact-data-table th:nth-child(4),.compact-data-table td:nth-child(4){width:22%!important;}
.compact-data-table th:last-child,.compact-data-table td:last-child{width:190px!important;}
.compact-colors{white-space:normal!important;line-height:1.35!important;}
.action-row.compact-actions,.compact-actions{display:flex!important;gap:8px!important;flex-wrap:nowrap!important;align-items:center!important;}
.btn.tiny{height:34px!important;padding:0 12px!important;border-radius:13px!important;font-size:12px!important;}
.inline-form{display:inline-flex!important;margin:0!important;}
.client-drawer{z-index:120!important;background:rgba(0,0,0,.78)!important;backdrop-filter:blur(6px)!important;}
.drawer-panel{width:min(560px,100vw)!important;max-width:100vw!important;}
.client-drawer.open .drawer-panel{box-shadow:-35px 0 90px rgba(0,0,0,.56)!important;}
.line-chart .line.sales{stroke:#22cf7f!important;stroke-width:2.8!important;}
.line-chart .line.purchases{stroke:#ff5b70!important;stroke-width:2.8!important;}
.line-chart .line.profit{stroke:#f2c84b!important;stroke-width:2.8!important;}
.lovable-donut-layout{min-height:345px!important;gap:18px!important;justify-content:center!important;}
.lovable-donut{
    width:210px!important;
    height:210px!important;
    margin:0 auto!important;
    border:0!important;
    box-shadow:0 24px 70px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08)!important;
    filter:none!important;
}
.lovable-donut::after{inset:62px!important;background:#111d30!important;border:1px solid rgba(255,255,255,.10)!important;}
.donut-panel .lovable-legend{max-width:370px!important;margin:0 auto!important;}
@media(max-width:980px){.inventory-filter-bar{grid-template-columns:1fr!important}.inventory-clear-btn{width:100%!important}.compact-data-table{min-width:860px!important}.compact-table-wrap{overflow-x:auto!important}}


/* === Pixel Pro Brazaletes: pulido estable final === */
.modal:not([open]){display:none!important;}
body.drawer-open{overflow:hidden!important;}

/* Inventario: filtros separados, limpios y sin amontonamiento */
.inventory-filter-bar{
  margin:28px 0 28px!important;
  padding:20px!important;
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto!important;
  gap:18px!important;
  align-items:end!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(17,34,56,.92),rgba(10,25,42,.96))!important;
  border:1px solid rgba(60,135,194,.28)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.12)!important;
}
.filter-select.pill-select{
  height:50px!important;
  border-radius:16px!important;
  padding:0 18px!important;
  background:linear-gradient(180deg,#0b1a2c,#081727)!important;
  border:1px solid rgba(105,151,194,.30)!important;
  color:#f1f7ff!important;
  font-weight:800!important;
}
.inventory-clear-btn{height:50px!important;border-radius:16px!important;padding:0 22px!important;}
.inventory-filter-bar + .table-wrap{margin-top:0!important;}
.inventory-filter-bar .filter-label{margin-bottom:2px!important;}

/* Tablas compactas: sin scroll horizontal ni datos fuera de lugar */
.no-x-scroll{overflow-x:hidden!important;}
.compact-table-wrap{max-height:430px!important;overflow-y:auto!important;overflow-x:hidden!important;}
.compact-data-table{width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:collapse!important;}
.compact-data-table th,.compact-data-table td{padding:13px 14px!important;white-space:normal!important;word-break:normal!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.compact-data-table th{font-size:11px!important;}
.compact-data-table td{font-size:13px!important;}
.compact-data-table .product-summary{min-width:0!important;max-width:none!important;line-height:1.25!important;}
.compact-data-table .product-summary strong{display:block!important;color:#edf6ff!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.compact-data-table .product-summary small{display:block!important;color:#8fa3ba!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.action-row.compact-actions,.action-row{display:flex!important;gap:7px!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;}
.btn.tiny{height:34px!important;min-width:44px!important;padding:0 10px!important;border-radius:12px!important;font-size:12px!important;}
.purchases-table th:nth-child(1),.purchases-table td:nth-child(1){width:95px!important;}
.purchases-table th:nth-child(2),.purchases-table td:nth-child(2){width:165px!important;}
.purchases-table th:nth-child(3),.purchases-table td:nth-child(3){width:auto!important;}
.purchases-table th:nth-child(4),.purchases-table td:nth-child(4){width:82px!important;}
.purchases-table th:nth-child(5),.purchases-table td:nth-child(5){width:110px!important;}
.purchases-table th:nth-child(6),.purchases-table td:nth-child(6){width:205px!important;}
.sales-compact-table th:nth-child(1),.sales-compact-table td:nth-child(1){width:95px!important;}
.sales-compact-table th:nth-child(2),.sales-compact-table td:nth-child(2){width:160px!important;}
.sales-compact-table th:nth-child(3),.sales-compact-table td:nth-child(3){width:120px!important;}
.sales-compact-table th:nth-child(4),.sales-compact-table td:nth-child(4){width:auto!important;}
.sales-compact-table th:nth-child(5),.sales-compact-table td:nth-child(5){width:72px!important;}
.sales-compact-table th:nth-child(6),.sales-compact-table td:nth-child(6){width:110px!important;}
.sales-compact-table th:nth-child(7),.sales-compact-table td:nth-child(7){width:130px!important;}
.sales-compact-table th:nth-child(8),.sales-compact-table td:nth-child(8){width:205px!important;}

/* Drawer de clientes sin recortes y con historial agrupado por venta */
.client-drawer{position:fixed!important;inset:0!important;z-index:5000!important;background:rgba(0,0,0,.76)!important;backdrop-filter:blur(8px)!important;}
.drawer-panel{position:absolute!important;right:0!important;top:0!important;bottom:0!important;width:min(560px,100vw)!important;height:100vh!important;max-height:100vh!important;overflow-y:auto!important;background:linear-gradient(180deg,#0d1a2d,#091524)!important;box-shadow:-34px 0 90px rgba(0,0,0,.6)!important;}
.purchase-item small{display:block;margin-top:5px;color:#90a4ba;font-size:13px;}
.purchase-item{align-items:flex-start!important;}

/* Donut más limpio, centrado y sin distorsión */
.lovable-donut-layout{display:grid!important;place-items:center!important;gap:20px!important;}
.lovable-donut{
  width:210px!important;height:210px!important;border-radius:50%!important;position:relative!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.22))!important;
  transform:none!important;
}
.lovable-donut::after{
  content:""!important;position:absolute!important;inset:58px!important;border-radius:50%!important;
  background:#101d31!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
.lovable-donut:hover{transform:scale(1.015)!important;}
.lovable-legend{width:100%!important;max-width:330px!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 20px!important;}
.lovable-legend div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.lovable-legend span{min-width:0!important;}

@media(max-width:980px){
  .inventory-filter-bar{grid-template-columns:1fr!important;}
  .compact-data-table{min-width:0!important;}
  .compact-table-wrap{overflow-x:hidden!important;}
  .purchases-table th:nth-child(6),.purchases-table td:nth-child(6),
  .sales-compact-table th:nth-child(8),.sales-compact-table td:nth-child(8){width:170px!important;}
}

/* Ajustes finales Pixel Pro Brazaletes */
.compact-filter-bar.purchase-filter-bar{
  margin:22px 0 18px;
  padding:14px 16px;
  border:1px solid rgba(45,140,255,.22);
  background:linear-gradient(135deg,rgba(16,34,56,.92),rgba(10,27,44,.78));
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.compact-filter-bar.purchase-filter-bar span{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#9bb1c9;font-weight:800;margin-right:8px}
.filter-pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(120,160,200,.2);background:rgba(12,27,45,.75);color:#c8d7e8;text-decoration:none;font-weight:700;font-size:13px;transition:.22s ease}
.filter-pill:hover,.filter-pill.active{border-color:#27c9ff;background:linear-gradient(135deg,#2d8cff,#19c2d8);color:white;box-shadow:0 10px 26px rgba(33,168,255,.22);transform:translateY(-1px)}
.no-x-scroll{overflow-x:hidden!important}.compact-data-table{table-layout:fixed;width:100%}.compact-data-table th,.compact-data-table td{white-space:normal;overflow-wrap:anywhere}.compact-data-table .product-summary small{display:block;color:#9fb0c4;margin-top:4px;line-height:1.35}.compact-actions,.action-row{gap:8px;flex-wrap:nowrap}.btn.tiny{min-width:52px;padding:10px 12px}.purchases-table th:nth-child(1){width:11%}.purchases-table th:nth-child(2){width:16%}.purchases-table th:nth-child(3){width:34%}.purchases-table th:nth-child(4){width:9%}.purchases-table th:nth-child(5){width:12%}.purchases-table th:nth-child(6){width:18%}.sales-compact-table th:nth-child(1){width:11%}.sales-compact-table th:nth-child(2){width:15%}.sales-compact-table th:nth-child(3){width:11%}.sales-compact-table th:nth-child(4){width:25%}.sales-compact-table th:nth-child(5){width:8%}.sales-compact-table th:nth-child(6){width:10%}.sales-compact-table th:nth-child(7){width:10%}.sales-compact-table th:nth-child(8){width:20%}.sale-edit-modal .sale-lines{gap:10px}.sale-edit-modal .sale-line{grid-template-columns:1.2fr .7fr 1fr}.modal .table-wrap.mini{overflow-x:hidden}.modal .table-wrap.mini table{table-layout:fixed;width:100%}
@media(max-width:900px){.compact-data-table{table-layout:auto}.no-x-scroll{overflow-x:auto!important}.compact-filter-bar.purchase-filter-bar{align-items:flex-start}.filter-pill{flex:1 1 120px}.sale-edit-modal .sale-line{grid-template-columns:1fr}}

/* Correccion definitiva: modales, tablas responsivas y colores financieros */
body.modal-open{overflow:hidden!important;}
.modal{
  max-height:calc(100vh - 24px)!important;
  overflow:hidden!important;
  margin:auto!important;
}
.modal-body{
  max-height:calc(100vh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#saleModal .modal-body{overflow:hidden!important;}
.line-chart .line.sales{stroke:#22d184!important;}
.line-chart .line.purchases{stroke:#2d8cff!important;}
.line-chart .line.profit{stroke:#f3c336!important;}
.line-chart .area.sales{fill:rgba(34,209,132,.12)!important;}
.line-chart .area.purchases{fill:rgba(45,140,255,.12)!important;}
.line-chart .area.profit{fill:rgba(243,195,54,.11)!important;}
.mini-tabs span:nth-child(1){color:#22d184!important;}
.mini-tabs span:nth-child(2){color:#2d8cff!important;}
.mini-tabs span:nth-child(3){color:#f3c336!important;}
.reports-metrics .report-card:nth-child(2) .metric-icon{color:#8ec5ff!important;background:rgba(45,140,255,.16)!important;}
.reports-metrics .report-card:nth-child(3) .metric-icon{color:#f3c336!important;background:rgba(243,195,54,.16)!important;}
.no-x-scroll,.compact-table-wrap{overflow-x:hidden!important;}
@media(max-width:900px){
  .compact-data-table{table-layout:fixed!important;min-width:0!important;width:100%!important;}
  .no-x-scroll,.compact-table-wrap{overflow-x:hidden!important;}
  .compact-data-table th,.compact-data-table td{padding:11px 9px!important;font-size:12px!important;}
  .purchases-table th:nth-child(2),.purchases-table td:nth-child(2){display:none!important;}
  .purchases-table th:nth-child(1),.purchases-table td:nth-child(1){width:18%!important;}
  .purchases-table th:nth-child(3),.purchases-table td:nth-child(3){width:34%!important;}
  .purchases-table th:nth-child(4),.purchases-table td:nth-child(4){width:13%!important;}
  .purchases-table th:nth-child(5),.purchases-table td:nth-child(5){width:17%!important;}
  .purchases-table th:nth-child(6),.purchases-table td:nth-child(6){width:18%!important;}
  .sales-compact-table th:nth-child(3),.sales-compact-table td:nth-child(3),
  .sales-compact-table th:nth-child(7),.sales-compact-table td:nth-child(7){display:none!important;}
  .sales-compact-table th:nth-child(1),.sales-compact-table td:nth-child(1){width:16%!important;}
  .sales-compact-table th:nth-child(2),.sales-compact-table td:nth-child(2){width:20%!important;}
  .sales-compact-table th:nth-child(4),.sales-compact-table td:nth-child(4){width:28%!important;}
  .sales-compact-table th:nth-child(5),.sales-compact-table td:nth-child(5){width:10%!important;}
  .sales-compact-table th:nth-child(6),.sales-compact-table td:nth-child(6){width:13%!important;}
  .sales-compact-table th:nth-child(8),.sales-compact-table td:nth-child(8){width:13%!important;}
  .action-row,.compact-actions{flex-wrap:wrap!important;gap:5px!important;}
  .btn.tiny{min-width:0!important;padding:0 8px!important;font-size:11px!important;}
}
@media(max-width:620px){
  .modal{width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px)!important;}
  .modal-body{max-height:calc(100vh - 16px)!important;padding:18px!important;}
  #saleModal .modal-body{padding:0!important;}
  .compact-data-table th,.compact-data-table td{font-size:11px!important;padding:10px 7px!important;}
}