    /* 1. COLORES Y BASE: cambia estas variables para personalizar tu tienda */
    :root{--blue:#145cf4;--orange:#ff9000;--text:#182235;--muted:#7b8799;--bg:#f5f7fc;--white:#fff;--border:#e7ebf2;--green:#129d55;--red:#dc3646;--shadow:0 5px 20px rgba(29,45,75,.055)}
    *{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}
    /* 2. ENCABEZADO */
    .topbar{height:70px;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:0 24px;background:#fff;border-bottom:1px solid var(--border)}
    .brand{font-size:25px;font-weight:800;white-space:nowrap}.brand span{color:#f47d00}.logo{margin-right:8px}.menu-btn,.icon-btn{border:0;background:transparent;border-radius:10px;padding:10px;font-size:20px;color:#263147}.menu-btn:hover,.icon-btn:hover{background:#f0f4fa}.search{display:flex;align-items:center;gap:12px;background:#f6f8fc;border:1px solid #dae2ef;border-radius:24px;padding:11px 16px;flex:1;max-width:700px}.search input{border:0;outline:0;background:transparent;width:100%;min-width:0}.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.admin{padding-left:12px;border-left:1px solid var(--border);display:flex;align-items:center;gap:9px;white-space:nowrap}.avatar{background:#dbeaff;border-radius:50%;height:37px;width:37px;display:grid;place-items:center;font-weight:800;color:#1554b4}.admin small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
    /* 3. BARRA LATERAL */
    .sidebar{width:236px;position:fixed;top:70px;bottom:0;left:0;background:#fff;border-right:1px solid var(--border);padding:20px 13px;overflow-y:auto;transition:transform .25s;z-index:25}.nav-link{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;margin-bottom:4px;font-size:14px}.nav-link:hover{background:#eff4ff}.nav-link.active{background:var(--blue);color:#fff;font-weight:700}.nav-icon{width:21px;text-align:center;font-size:19px}.nav-label{flex:1}.pill{font-size:11px;background:var(--orange);color:#fff;padding:4px 7px;border-radius:20px}.side-note{background:#fff3e5;border-radius:15px;padding:16px;margin-top:26px;line-height:1.5}.side-note strong{display:block;margin-bottom:6px}.side-note p{font-size:12px;color:#7e6046}.side-note button{border:1px solid #fc8b20;color:#ca6200;background:transparent;border-radius:9px;padding:9px;width:100%}
    /* 4. ÁREA PRINCIPAL */
    main{margin-left:236px;padding:25px;min-width:0}.intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:23px}.eyebrow{font-size:13px;margin:0 0 5px}.intro h1{font-size:27px;letter-spacing:-.8px;margin:0 0 6px}.subtitle,.muted{color:var(--muted)}.subtitle{font-size:13px;margin:0}.select-date{background:white;border:1px solid #dbe2eb;padding:11px 13px;border-radius:9px;color:#344054}
    .kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);min-width:0}.kpi{padding:17px 14px;min-height:125px;background:linear-gradient(135deg,#fff 60%,var(--tint,#f1f6ff))}.kpi-top{display:flex;align-items:center;gap:9px;font-weight:700;font-size:12px}.kpi-icon{display:grid;place-items:center;border-radius:12px;background:var(--tint,#eef4ff);width:37px;height:37px;font-size:20px;flex-shrink:0}.kpi-value{font-size:22px;font-weight:800;margin:12px 0 7px;overflow-wrap:anywhere}.kpi-delta{font-size:11px;color:var(--green)}.kpi-delta.down{color:var(--red)}
    .layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:15px;margin-top:16px}.panel{padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.panel-head h2{font-size:16px;margin:0}.panel-head a{font-size:12px;font-weight:700;color:var(--blue)}.panel-head strong{font-size:16px}.chart-wrap{width:100%;overflow:hidden}.chart-wrap svg{width:100%;height:240px;display:block}.chart-months{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:0 8px 0 34px}.donut-area{display:flex;gap:24px;align-items:center;justify-content:space-around;min-height:240px}.donut{width:185px;height:185px;border-radius:50%;background:conic-gradient(#2779f7 0 33%,#ffab2e 33% 58%,#a56cf5 58% 75%,#20cb8c 75% 89%,#ff70a0 89% 100%);display:grid;place-items:center;flex-shrink:0}.donut-middle{background:white;border-radius:50%;width:125px;height:125px;display:flex;flex-direction:column;justify-content:center;align-items:center}.donut-middle strong{font-size:21px}.donut-middle small{color:var(--muted);margin-top:5px}.legend{display:grid;gap:13px;font-size:12px;width:100%;max-width:200px}.legend-row{display:flex;align-items:center;gap:7px}.legend-row strong{margin-left:auto}.dot{width:10px;height:10px;border-radius:50%;flex:none}
    .bottom-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.8fr);gap:15px;margin-top:16px}.table-scroll{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}.data-table th{background:#f7f8fb;color:#6b7788;text-align:left;font-size:11px}.data-table th,.data-table td{padding:11px 9px;border-bottom:1px solid #edf0f5}.data-table tr:last-child td{border-bottom:0}.product{display:flex;align-items:center;gap:9px;font-weight:600}.thumb{height:37px;width:37px;border-radius:10px;background:#eff4fb;display:grid;place-items:center;font-size:21px;flex:none}.status{border-radius:20px;padding:5px 8px;font-size:10px;font-weight:700;display:inline-block}.delivered{color:#148745;background:#dcf9e6}.processing{color:#166bd5;background:#e4f0ff}.pending{color:#bb6c00;background:#fff0d6}.shipped{color:#7744d8;background:#eee5ff}.alert-list{display:grid;gap:0}.alert-row{padding:10px 0;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);font-size:12px}.alert-row:last-child{border:0}.alert-row strong{margin-left:auto;white-space:nowrap;color:#df3343;background:#fff0f0;border-radius:20px;padding:5px 7px;font-size:10px}
    .category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.category-tile{display:flex;align-items:center;gap:12px;background:var(--tint);border-radius:12px;padding:14px;min-width:0}.category-tile .emoji{font-size:30px}.category-tile strong{font-size:13px;display:block}.category-tile small{font-size:11px;color:var(--green);display:block;margin-top:5px}.footer{margin-top:24px;font-size:12px;text-align:center;color:#97a0ae}.overlay{display:none}
    /* 5. RESPONSIVE */
    @media(max-width:1450px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid>.card:last-child{grid-column:1/-1}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:1000px){.sidebar{transform:translateX(-105%)}.sidebar.open{transform:translateX(0)}main{margin-left:0}.overlay.show{display:block;position:fixed;inset:70px 0 0;background:#15213577;z-index:20}.layout{grid-template-columns:1fr}.donut-area{justify-content:center}}
    @media(max-width:700px){.topbar{height:62px;padding:0 12px;gap:7px}.sidebar{top:62px}.overlay.show{inset:62px 0 0}.brand{font-size:20px}.search{position:absolute;top:62px;left:0;right:0;max-width:none;border-radius:0;background:#fff;padding:9px 17px}.topbar{margin-bottom:45px}.admin small,.admin>div:last-child{display:none}.admin{padding-left:5px}.top-actions{gap:0}.top-actions .icon-btn{padding:6px}.intro{align-items:flex-start;flex-direction:column}.intro h1{font-size:23px}main{padding:15px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:12px 10px;min-height:118px}.kpi-top{font-size:11px}.kpi-value{font-size:19px}.kpi-icon{width:30px;height:30px;font-size:17px}.bottom-grid,.category-grid{grid-template-columns:1fr}.bottom-grid>.card:last-child{grid-column:auto}.donut-area{flex-wrap:wrap}.panel{padding:14px}}
    @media(max-width:380px){.brand{font-size:18px}.kpis{grid-template-columns:1fr}.kpi{min-height:105px}}
 