/* Componentes reutilizables. Las pantallas los usan tal cual; no redefinen estos estilos. */

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-pad{padding:20px 22px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:18px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.card-h h2 i,.card-h h2 svg{color:var(--blue)}
.card-h .sub{font-size:13px;color:var(--muted);display:block;font-weight:400;margin-top:2px}
.card-h .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
.link{color:var(--blue);font-weight:600;font-size:14px;background:none;border:0;padding:0}
.link:hover{text-decoration:underline}

.grid{display:grid;gap:var(--gap);min-width:0}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.g-main-b{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:1560px){.g-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){.g-main,.g-main-b,.g-2{grid-template-columns:minmax(0,1fr)}.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-6,.g-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn svg,.btn i{width:18px;height:18px}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-soft{background:var(--blue-50);border-color:transparent;color:var(--blue)}
.btn-soft:hover{background:var(--blue-100)}
.btn-green{background:var(--green-50);border-color:transparent;color:var(--green)}
.btn-green:hover{background:color-mix(in srgb,var(--green) 18%,var(--card))}
.btn-sm{height:34px;padding:0 12px;font-size:13px}
.btn-icon{width:34px;padding:0}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- controles ---------- */
.select{position:relative;display:inline-flex;align-items:center;height:40px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);padding:0 36px 0 12px;font-weight:500;font-size:14px;gap:8px}
.select select{appearance:none;border:0;background:none;outline:none;padding:0;height:38px;font-weight:500;cursor:pointer;color:inherit}
.select::after{content:"";position:absolute;right:13px;top:16px;width:7px;height:7px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.select.sm{height:34px;font-size:13px}.select.sm select{height:32px}.select.sm::after{top:13px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;height:38px;padding:0 16px;font-weight:600;font-size:14px;color:var(--fg-2);display:inline-flex;align-items:center;gap:8px}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.field{display:flex;align-items:center;gap:8px;height:40px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);padding:0 12px;min-width:200px}
.field input{border:0;outline:none;background:none;flex:1;min-width:0}
.field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.field svg{color:var(--muted);flex:none;width:18px;height:18px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);margin:0}

/* ---------- pastillas ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--soft);color:var(--fg-2);white-space:nowrap}
.pill.blue{background:var(--blue-50);color:var(--blue)}
.pill.green{background:var(--green-50);color:var(--green)}
.pill.orange{background:var(--orange-50);color:var(--orange-600)}
.pill.red{background:var(--red-50);color:var(--red)}
.pill.purple{background:var(--purple-50);color:var(--purple)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.lg{height:28px;padding:0 12px;font-size:13px}
.live{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;background:var(--green-50);color:var(--green);font-size:13px;font-weight:600}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-500)}
.live.off{background:var(--orange-50);color:var(--orange-600)}.live.off::before{background:var(--orange)}
.count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:var(--soft);font-size:12px;font-weight:700;color:var(--fg-2)}
.count.red{background:var(--red-50);color:var(--red)}

/* delta */
.delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}.delta.flat{color:var(--muted)}
.delta svg{width:14px;height:14px;stroke-width:2.6}
.t-green{color:var(--green)}.t-red{color:var(--red)}.t-orange{color:var(--orange-600)}.t-blue{color:var(--blue)}.t-purple{color:var(--purple)}.t-muted{color:var(--muted)}

/* ---------- icono en cuadro de color ---------- */
.ico-sq{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.ico-sq svg{width:24px;height:24px}
.ico-sq.blue{background:#3b82f6}.ico-sq.green{background:#22b573}.ico-sq.orange{background:#f59e0b}.ico-sq.red{background:#ef5350}.ico-sq.purple{background:#8b5cf6}.ico-sq.teal{background:#14b8a6}
.ico-sq.soft-blue{background:var(--blue-50);color:var(--blue)}.ico-sq.soft-green{background:var(--green-50);color:var(--green)}.ico-sq.soft-orange{background:var(--orange-50);color:var(--orange-600)}.ico-sq.soft-red{background:var(--red-50);color:var(--red)}.ico-sq.soft-purple{background:var(--purple-50);color:var(--purple)}
.ico-ci{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.ico-ci.red{background:var(--red-50);color:var(--red)}.ico-ci.orange{background:var(--orange-50);color:var(--orange-600)}.ico-ci.blue{background:var(--blue-50);color:var(--blue)}.ico-ci.green{background:var(--green-50);color:var(--green)}.ico-ci.purple{background:var(--purple-50);color:var(--purple)}

/* ---------- tarjeta de indicador (KPI) ---------- */
.kpi{position:relative;overflow:hidden;padding:16px 16px 0;display:flex;flex-direction:column;gap:2px;min-height:146px}
.kpi.pad-b{padding-bottom:16px}
.kpi-top{display:flex;gap:14px;align-items:flex-start}
.kpi-l{font-size:15px;font-weight:500;color:var(--fg-2);line-height:1.2;margin-top:2px}
.kpi-v{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.kpi-s{font-size:13px;color:var(--muted);line-height:1.3}
.kpi .spark{margin:6px -16px 0;height:50px;display:block}
.kpi.click{cursor:pointer}
.kpi.click:hover{border-color:var(--line-strong)}

/* ---------- tablas ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:10px 12px;white-space:nowrap;background:var(--soft);border-bottom:1px solid var(--line)}
.tbl th:first-child{border-radius:8px 0 0 8px}.tbl th:last-child{border-radius:0 8px 8px 0}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort:hover{color:var(--fg)}
.tbl th .arr{display:inline-block;margin-left:4px;font-size:10px;opacity:.5}
.tbl th.on .arr{opacity:1;color:var(--blue)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--soft)}
.tbl tbody tr.sel td{background:var(--orange-50)}
.tbl .r{text-align:right}.tbl .c{text-align:center}
.tbl .sub{display:block;font-size:12px;color:var(--muted)}
.cli{display:flex;align-items:center;gap:12px}
.cli .ini{width:34px;height:34px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--fg-2);flex:none}
.cli b{font-weight:600;display:block;line-height:1.2}
.cli span{font-size:12px;color:var(--muted)}
.wait{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-weight:600;font-size:13px}
.wait.red{background:var(--red-50);color:var(--red)}.wait.orange{background:var(--orange-50);color:var(--orange-600)}.wait.blue{background:var(--blue-50);color:var(--blue)}.wait.plain{background:none;padding:0}
.sev{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:99px;font-weight:600;font-size:13px}
.sev .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.sev.critica{background:var(--red-50);color:var(--red)}.sev.alta{background:var(--orange-50);color:var(--orange-600)}.sev.media{background:var(--blue-50);color:var(--blue)}
.carrier{font-weight:800;letter-spacing:-.02em;font-style:italic;display:inline-block;line-height:1}
.carrier.coordinadora{color:#0a3d91}.carrier.envia{color:#e1251b;text-transform:lowercase;font-size:1.1em}.carrier.inter{color:#f26b21;text-transform:uppercase;font-size:.95em}.carrier.otro{color:var(--fg-2);font-style:normal}

/* ---------- estados vacios, carga ---------- */
.empty{display:grid;place-items:center;text-align:center;gap:8px;padding:40px 16px;color:var(--muted)}
.empty .ico-ci{width:52px;height:52px}
.empty b{color:var(--fg);font-size:15px}
.skel{position:relative;overflow:hidden;background:var(--soft);border-radius:8px;min-height:18px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 70%,transparent),transparent);animation:sh 1.2s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.err{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid color-mix(in srgb,var(--red) 30%,transparent);background:var(--red-50);border-radius:12px;color:var(--fg)}
.err svg{color:var(--red);flex:none}

/* ---------- menus, panel lateral, aviso ---------- */
.pop{position:absolute;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);min-width:220px;padding:6px}
.pop button,.pop a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;border-radius:8px;text-align:left;color:var(--fg);font-size:14px}
.pop button:hover,.pop a:hover{background:var(--soft)}
.drawer-bg{position:fixed;inset:0;background:rgba(10,16,30,.35);z-index:80;opacity:0;transition:opacity .18s}
.drawer-bg.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--card);z-index:81;box-shadow:var(--shadow-pop);transform:translateX(102%);transition:transform .2s;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer-h h2{font-size:18px;font-weight:700}
.drawer-h button{margin-left:auto}
.drawer-b{padding:20px 22px;overflow-y:auto;flex:1}
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111a2e;color:#fff;padding:11px 18px;border-radius:99px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .22s;z-index:100;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.results{max-height:420px;overflow-y:auto}
.res-g{padding:8px 12px 2px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--fg-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.legend i.dash{width:16px;height:0;border-top:2px dashed var(--faint);border-radius:0;background:none;vertical-align:3px}
.chart-box{position:relative}
.timeline{display:flex;flex-direction:column;gap:14px;position:relative}
.timeline .ev{display:grid;grid-template-columns:14px 1fr;gap:12px;position:relative}
.timeline .ev::before{content:"";position:absolute;left:6px;top:16px;bottom:-18px;width:2px;background:var(--line)}
.timeline .ev:last-child::before{display:none}
.timeline .ev i{width:14px;height:14px;border-radius:50%;background:var(--blue-100);border:2px solid var(--blue);margin-top:3px}
.timeline .ev.now i{background:var(--blue)}
.timeline .ev b{font-weight:600;display:block;line-height:1.25}.timeline .ev span{font-size:12px;color:var(--muted)}

/* ---------- lista desplegable propia (reemplaza al <select> del sistema) ---------- */
select.dd-nativo{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;overflow:hidden}
.select.dd-caja{padding:0;position:relative}
.select.dd-caja::after{display:none}
.dd{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 12px 0 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);font-weight:500;font-size:14px;color:var(--fg);cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;min-width:0}
.select.dd-caja .dd{border:0;background:none;height:38px;width:100%}
.select.dd-caja > svg:first-child,.select.dd-caja > i:first-child{margin-left:12px;flex:none}
.select.dd-caja .dd{padding-left:8px}
.select.dd-caja:not(:has(> svg:first-child)) .dd{padding-left:14px}
.dd:hover{background:var(--soft)}
.select.dd-caja:hover{border-color:var(--blue)}
.dd[aria-expanded="true"]{color:var(--blue)}
.select.dd-caja:has(.dd[aria-expanded="true"]){border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.dd .dd-t{overflow:hidden;text-overflow:ellipsis}
.dd .dd-c{width:16px;height:16px;color:var(--muted);flex:none;transition:transform .15s}
.dd[aria-expanded="true"] .dd-c{transform:rotate(180deg)}
.select.sm .dd{height:32px;font-size:13px}
.dd-menu{position:absolute;z-index:90;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.dd-op{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:9px 12px;border:0;background:none;border-radius:8px;text-align:left;font-size:14px;color:var(--fg);cursor:pointer;user-select:none}
.dd-op:hover,.dd-op:focus-visible{background:var(--soft);outline:none}
.dd-op[aria-selected="true"]{background:var(--blue-50);color:var(--blue);font-weight:600}
.dd-op svg{width:16px;height:16px;color:var(--blue);flex:none}
.dd-op[disabled]{opacity:.45;cursor:default}

/* ---------- todo lo que se pulsa se comporta como botón (no selecciona texto) ---------- */
button,.btn,[role="button"],[role="tab"],[role="link"],a.btn,.seg button,.tiendas button,.nav a,.kpi.click,tr.click,.wi,.go,.dd,.date-btn,.bell,.user.click,.sync,
[data-ir],[data-pg],[data-pag],[data-to],[data-tab],[data-p],[data-a],[data-m],[data-i],[data-k],[data-cat],[data-q]{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button:not([disabled]),[role="button"],[role="tab"],[role="link"],tr.click,.kpi.click,[data-ir],[data-pg],[data-pag],[data-to],[data-tab],[data-cat]{cursor:pointer}
.btn:active:not([disabled]),.seg button:active,.dd:active,.go:active{transform:translateY(1px)}

/* ---------- selector de periodo (cabecera) ---------- */
.per{display:grid;grid-template-columns:190px minmax(0,1fr);gap:6px}
.per-l{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:6px}
.per-r{display:flex;flex-direction:column;gap:8px;padding:6px 8px}
.per-r b{font-size:13px}
.per-r .t-muted{font-size:12px}
.per-r .field{min-width:0;height:38px}
.per-2{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.per-sep{height:1px;background:var(--line);margin:4px 0}
@media (max-width:600px){.per{grid-template-columns:1fr}.per-l{border-right:0;border-bottom:1px solid var(--line);padding:0 0 6px}}
.pop .btn{display:inline-flex;justify-content:center;width:auto;border:1px solid var(--line-strong);background:var(--card);padding:0 12px}
.pop .btn:hover{background:var(--soft)}
.pop .btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.pop .btn-primary:hover{background:var(--blue-600)}