:root{
  --fondo:#0b0a09; --panel:#16130f; --panel2:#1e1913; --borde:#2c251c;
  --texto:#f4efe8; --suave:#a89a86; --tenue:#6f6350;
  /* naranja de marca */
  --acento:#ff7a1a; --acento-claro:#ff9d3c; --acento-hondo:#e85d00;
  --grad:linear-gradient(135deg,#ff9d3c 0%,#ff6a00 55%,#e85d00 100%);
  --grad-suave:linear-gradient(135deg,rgba(255,138,43,.16),rgba(232,93,0,.05));
  --glow:0 0 0 1px rgba(255,122,26,.35),0 6px 22px rgba(255,106,0,.28);
  --glow-fuerte:0 0 26px rgba(255,106,0,.55);
  --ok:#33c775; --ruta:#f5b301; --mal:#f2555f; --neutro:#8a7c68;
  --cancel:#a07bff; --novedad:#ff8a3d;
  --sombra:0 10px 34px rgba(0,0,0,.55);
  --sombra-alta:0 16px 44px rgba(0,0,0,.6);
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fondo);color:var(--texto);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex;overflow:hidden;
  /* resplandor naranja sutil de fondo */
  background-image:
    radial-gradient(1100px 520px at -5% -10%, rgba(255,106,0,.10), transparent 60%),
    radial-gradient(900px 500px at 105% 0%, rgba(255,138,43,.06), transparent 55%);
  background-attachment:fixed;
}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,select,textarea{font:inherit;color:var(--texto);background:var(--panel2);
  border:1px solid var(--borde);border-radius:8px;padding:7px 9px;outline:none;transition:.16s}
input:focus,select:focus,textarea:focus{
  border-color:var(--acento);box-shadow:0 0 0 3px rgba(255,122,26,.16)}
select option{background:var(--panel2)}
a{color:var(--acento-claro)}
::selection{background:rgba(255,122,26,.32);color:#fff}

/* ---------- barra lateral ---------- */
#lateral{width:212px;flex:none;
  background:linear-gradient(180deg,#181410 0%,#120f0b 100%);
  border-right:1px solid var(--borde);
  display:flex;flex-direction:column;padding:16px 10px;gap:3px;position:relative}
#lateral::after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(255,122,26,.35),transparent)}
.marca-logo{padding:8px 9px 18px}
.marca-logo img{display:block;width:100%;max-width:174px;height:auto;
  filter:drop-shadow(0 0 14px rgba(255,122,26,.28))}
.marca-logo span{display:block;margin-top:7px;padding-left:2px;font-size:9.5px;
  color:var(--tenue);letter-spacing:1.7px;text-transform:uppercase;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--suave);font-size:13.5px;text-align:left;width:100%;position:relative;
  transition:.18s cubic-bezier(.4,0,.2,1)}
.nav-item:hover{background:rgba(255,122,26,.08);color:var(--texto);transform:translateX(2px)}
.nav-item.activo{background:var(--grad);color:#fff;font-weight:600;
  box-shadow:var(--glow-fuerte)}
.nav-item.activo .ic{opacity:1}
.nav-item .ic{width:17px;text-align:center;font-size:14px;opacity:.85;transition:.18s}
.nav-sep{font-size:10px;color:var(--tenue);text-transform:uppercase;letter-spacing:.9px;
  padding:16px 11px 6px;font-weight:700}
#pie-lateral{margin-top:auto;font-size:11px;color:var(--tenue);padding:10px 11px;border-top:1px solid var(--borde)}

/* ---------- zona principal ---------- */
#principal{flex:1;display:flex;flex-direction:column;overflow:hidden}
#barra-sup{display:flex;align-items:center;gap:10px;padding:13px 22px;
  border-bottom:1px solid var(--borde);flex:none;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(30,25,19,.9),rgba(22,19,15,.75));
  backdrop-filter:blur(10px);position:relative;z-index:5}
#barra-sup h1{font-size:17px;font-weight:700;margin-right:auto;letter-spacing:-.2px}
#barra-sup h1 small{display:block;font-size:11.5px;color:var(--tenue);font-weight:400;letter-spacing:0}
#lienzo{flex:1;overflow-y:auto;padding:20px 22px 60px}
.vista{display:none}
.vista.activa{display:block;animation:sube .28s cubic-bezier(.2,.7,.2,1)}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1}}

/* ---------- controles ---------- */
.btn{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;
  padding:7px 13px;font-size:13px;transition:.18s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn:hover{border-color:var(--acento);background:rgba(255,122,26,.10);
  color:#fff;transform:translateY(-1px)}
.btn.principal{background:var(--grad);border:none;color:#fff;font-weight:600;
  box-shadow:0 4px 16px rgba(255,106,0,.32)}
.btn.principal:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--glow-fuerte)}
.btn.peligro:hover{border-color:var(--mal);color:var(--mal);background:rgba(242,85,95,.10)}
.btn.mini{padding:4px 9px;font-size:11.5px;border-radius:7px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 12px;border-radius:99px;border:1px solid var(--borde);background:var(--panel2);
  font-size:12.5px;color:var(--suave);transition:.18s}
.chip:hover{color:var(--texto);border-color:var(--acento);background:rgba(255,122,26,.08)}
.chip.activo{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 3px 12px rgba(255,106,0,.3)}

/* ---------- tarjetas ---------- */
.rejilla{display:grid;gap:13px}
.r4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.r2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:15px 17px;
  transition:.2s cubic-bezier(.4,0,.2,1)}
.tarjeta:hover{border-color:rgba(255,122,26,.28);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.tarjeta h3{font-size:12px;color:var(--suave);font-weight:600;text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kpi .etq{font-size:11.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.7px;
  font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-1px;margin:7px 0 2px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12px;color:var(--tenue)}
.kpi .sub b{color:var(--suave);font-weight:600}
.bueno{color:var(--ok)}.malo{color:var(--mal)}.aviso{color:var(--ruta)}.info{color:var(--acento-claro)}
.barra-fina{height:5px;background:var(--panel2);border-radius:9px;overflow:hidden;margin-top:11px}
.barra-fina>i{display:block;height:100%;border-radius:9px;transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ---------- jerarquía de secciones ---------- */
.titulo-seccion{font-size:15.5px;font-weight:700;letter-spacing:-.2px;
  margin:28px 0 13px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.titulo-seccion small{font-size:12.5px;color:var(--tenue);font-weight:400;letter-spacing:0}
.titulo-seccion::before{content:'';width:4px;height:17px;background:var(--grad);
  border-radius:2px;flex:none;align-self:center;box-shadow:0 0 10px rgba(255,106,0,.6)}

/* tarjeta destacada: las cuatro cifras que resumen el negocio */
.hero{background:linear-gradient(160deg,#1a150f 0%,#161009 100%);
  border:1px solid var(--borde);border-radius:16px;padding:17px 19px;position:relative;overflow:hidden;
  transition:.2s cubic-bezier(.4,0,.2,1)}
.hero::before{content:'';position:absolute;top:-40%;right:-20%;width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,106,0,.18),transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.hero.ok::after{background:linear-gradient(90deg,#33c775,#12a55a)}
.hero.mal::after{background:linear-gradient(90deg,#f2555f,#c9303b)}
.hero.avi::after{background:linear-gradient(90deg,#f5b301,#d99200)}
.hero:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:rgba(255,122,26,.3)}
.hero .etq{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600;position:relative}
.hero .val{font-size:31px;font-weight:800;letter-spacing:-1.2px;margin:9px 0 3px;line-height:1.1;position:relative}
.hero .sub{font-size:12.5px;color:var(--tenue);line-height:1.55;position:relative}
.hero .sub b{color:var(--suave);font-weight:600}

/* tira de conteos: los números operativos de un vistazo */
.tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  background:linear-gradient(180deg,#181410,#141009);border:1px solid var(--borde);
  border-radius:14px;overflow:hidden}
.tira > div{padding:13px 16px;border-right:1px solid var(--borde);text-align:center;transition:.16s}
.tira > div:hover{background:rgba(255,122,26,.06)}
.tira > div:last-child{border-right:none}
.tira .n{font-size:21px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;gap:7px}
.tira .n i{width:8px;height:8px;border-radius:50%;flex:none}
.tira .t{font-size:11px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;margin-top:5px}
.tira .p{font-size:11px;color:var(--tenue);margin-top:2px}

/* tarjeta de estado: cifra + cuántas órdenes + barra de participación */
.estado-card{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:15px 17px;border-left:3px solid var(--neutro);transition:.2s cubic-bezier(.4,0,.2,1)}
.estado-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.estado-card .cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.estado-card .nom{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600}
.estado-card .pill{font-size:11px;color:var(--tenue);background:var(--panel2);
  border-radius:99px;padding:3px 9px;white-space:nowrap}
.estado-card .val{font-size:23px;font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.estado-card .pie{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-top:10px;font-size:12px;color:var(--tenue)}

/* promedios: cifra compacta con su explicación */
.prom{background:var(--panel);border:1px solid var(--borde);border-radius:14px;padding:14px 16px;
  transition:.2s cubic-bezier(.4,0,.2,1)}
.prom:hover{transform:translateY(-2px);border-color:rgba(255,122,26,.24)}
.prom .nom{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;margin-bottom:7px}
.prom .val{font-size:22px;font-weight:700;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.prom .exp{font-size:11.5px;color:var(--tenue);margin-top:5px;line-height:1.5}

/* ---------- tablas ---------- */
.marco-tabla{background:var(--panel);border:1px solid var(--borde);border-radius:14px;overflow:hidden}
.desliza{overflow-x:auto;max-height:65vh;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:12.8px}
thead th{position:sticky;top:0;background:linear-gradient(180deg,#231c14,#1c1610);text-align:left;padding:10px 12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);
  border-bottom:1px solid var(--borde);white-space:nowrap;z-index:2;cursor:pointer;user-select:none}
thead th:hover{color:var(--acento-claro)}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(44,37,28,.6);white-space:nowrap}
tbody tr{transition:.12s}
tbody tr:hover{background:rgba(255,122,26,.06)}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.2px}
.vacio{padding:46px;text-align:center;color:var(--tenue)}
.vacio .grande{font-size:38px;margin-bottom:12px;opacity:.45}

/* ---------- etiquetas de estado ---------- */
.et{display:inline-block;padding:2.5px 9px;border-radius:99px;font-size:11px;font-weight:650;
  letter-spacing:.2px;border:1px solid transparent;white-space:nowrap}
.et-entregado{background:rgba(47,191,113,.14);color:var(--ok);border-color:rgba(47,191,113,.3)}
.et-ruta{background:rgba(240,169,44,.14);color:var(--ruta);border-color:rgba(240,169,44,.3)}
.et-proceso{background:rgba(57,135,229,.16);color:#6bb0f5;border-color:rgba(57,135,229,.35)}
.et-novedad{background:rgba(232,116,59,.16);color:var(--novedad);border-color:rgba(232,116,59,.35)}
.et-devuelto{background:rgba(239,77,90,.14);color:var(--mal);border-color:rgba(239,77,90,.3)}
.et-cancelado{background:rgba(138,92,246,.14);color:var(--cancel);border-color:rgba(138,92,246,.3)}
.et-um{background:rgba(144,133,233,.16);color:#a79cf0;border-color:rgba(144,133,233,.38)}
.et-otro{background:rgba(124,134,160,.14);color:var(--neutro);border-color:rgba(124,134,160,.3)}

/* ---------- importador ---------- */
#soltar,.zona-soltar{border:2px dashed var(--borde);border-radius:16px;padding:44px;text-align:center;
  transition:.2s cubic-bezier(.4,0,.2,1);background:var(--panel);cursor:pointer}
#soltar:hover,#soltar.encima,.zona-soltar:hover,.zona-soltar.encima{
  border-color:var(--acento);background:rgba(255,122,26,.07);box-shadow:inset 0 0 40px rgba(255,106,0,.06)}
#soltar .icono,.zona-soltar .icono{font-size:42px;margin-bottom:12px;opacity:.7;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#soltar h2,.zona-soltar h2{font-size:17px;margin-bottom:6px;font-weight:600}
#soltar p,.zona-soltar p{color:var(--suave);font-size:13px}
.zona-soltar{padding:32px}

/* tarjeta de cuenta publicitaria */
.cuenta{background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:14px 16px;border-top:3px solid var(--acento);transition:.2s cubic-bezier(.4,0,.2,1)}
.cuenta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.cuenta.meta{border-top-color:#3987e5} .cuenta.tiktok{border-top-color:#e56aa0}
.cuenta.google{border-top-color:#e0a800} .cuenta.otra{border-top-color:#8a7c68}
.cuenta .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cuenta .nom{font-size:14px;font-weight:650;letter-spacing:-.1px;line-height:1.35}
.cuenta .plat{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  font-weight:700;color:var(--tenue)}
.cuenta .cifra{font-size:19px;font-weight:700;margin:9px 0 2px;font-variant-numeric:tabular-nums}
.cuenta .det{font-size:11.5px;color:var(--tenue);line-height:1.6}
.cuenta select{font-size:11.5px;padding:3px 6px;max-width:135px}
.registro{font-family:var(--mono);font-size:12px;background:#0a0806;border:1px solid var(--borde);
  border-radius:10px;padding:13px;max-height:270px;overflow-y:auto;white-space:pre-wrap;line-height:1.65}

/* ---------- varios ---------- */
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entre{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mt{margin-top:18px}.mt-s{margin-top:11px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.aviso-caja{background:rgba(240,169,44,.08);border:1px solid rgba(240,169,44,.28);
  border-radius:10px;padding:12px 15px;font-size:13px;color:#f3c777}
.lista-rank{display:flex;flex-direction:column;gap:9px}
.rank-fila{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.rank-fila .nom{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-fila .cifra{font-family:var(--mono);font-size:12.5px;color:var(--suave)}
.rank-fila .pista{grid-column:1/-1;height:6px;background:var(--panel2);border-radius:9px;overflow:hidden}
.rank-fila .pista>i{display:block;height:100%;background:var(--grad);border-radius:9px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.modal-fondo{position:fixed;inset:0;background:rgba(6,4,2,.7);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px;backdrop-filter:blur(6px);animation:aparece .18s}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(160deg,#1b150f,#151009);border:1px solid var(--borde);
  border-radius:16px;padding:22px;width:min(560px,100%);max-height:86vh;overflow-y:auto;
  box-shadow:var(--sombra-alta);animation:sube .25s cubic-bezier(.2,.7,.2,1)}
.modal h2{font-size:17px;margin-bottom:16px}
.aviso-flotante{position:fixed;bottom:22px;right:22px;z-index:80;
  background:linear-gradient(160deg,#1e1811,#17110b);
  border:1px solid var(--borde);border-left:3px solid var(--ok);border-radius:12px;
  padding:12px 17px;box-shadow:var(--sombra-alta);font-size:13px;
  animation:entra-aviso .3s cubic-bezier(.2,.7,.2,1)}
@keyframes entra-aviso{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
svg text{font-family:"Segoe UI",system-ui,sans-serif}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3a3020;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff8a2b,#e85d00);background:#5a4a2e}
::-webkit-scrollbar-track{background:transparent}

/* glow suave para el punto/indicador de marca y detalles */
@keyframes pulso{0%,100%{opacity:.55}50%{opacity:1}}

/* ================= acceso y cuenta (versión web) ================= */
body.sin-sesion #lateral, body.sin-sesion #principal{display:none}
#cargando-nube{position:fixed;inset:0;display:grid;place-items:center;color:var(--suave);font-size:14px;padding:24px;text-align:center}
body:not(.sin-sesion) #cargando-nube{display:none}
#acceso{position:fixed;inset:0;display:grid;place-items:center;padding:24px 16px;overflow:auto;
  background:radial-gradient(900px 500px at 50% -10%,rgba(255,122,26,.16),transparent 70%),var(--fondo)}
#acceso[hidden],#cargando-nube[hidden]{display:none}
.acceso-caja{width:100%;max-width:380px;display:grid;gap:14px;background:var(--panel);border:1px solid var(--borde);
  border-radius:16px;padding:28px 26px}
.acceso-logo{width:190px;max-width:100%;justify-self:center;margin-bottom:4px}
.acceso-titulo{text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--tenue);font-weight:600;margin-top:-8px}
.acceso-sub{text-align:center;font-size:13px;color:var(--suave);margin:0 0 4px}
.campo-acceso{display:grid;gap:6px;font-size:11.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.campo-acceso input{height:42px;font-size:14.5px;text-transform:none;letter-spacing:0;font-weight:400}
#acceso-btn{height:44px;font-size:14.5px;justify-content:center}
.acceso-error{background:rgba(242,85,95,.12);border:1px solid rgba(242,85,95,.4);color:#ffb3b8;border-radius:9px;padding:9px 11px;font-size:13px}
.acceso-error[hidden]{display:none}
.acceso-pie{font-size:12px;color:var(--tenue);text-align:center;margin:2px 0 0;line-height:1.5}

#usuario-caja{margin-top:10px;padding-top:10px;border-top:1px solid var(--borde);display:grid;gap:2px}
#usuario-nombre{color:var(--texto);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usuario-correo{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#usuario-correo:empty{display:none}
#estado-nube{font-size:11px;margin-top:3px}
#estado-nube::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tenue);margin-right:6px;vertical-align:1px}
#estado-nube[data-tipo="ok"]::before{background:var(--ok)}
#estado-nube[data-tipo="pendiente"]::before{background:var(--ruta)}
#estado-nube[data-tipo="mal"]{color:var(--mal)}
#estado-nube[data-tipo="mal"]::before{background:var(--mal)}
.usuario-acciones{display:flex;gap:12px;margin-top:7px}
.usuario-acciones button{background:none;border:0;padding:0;color:var(--suave);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.usuario-acciones button:hover{color:var(--acento-claro)}
.nav-sep[hidden],.nav-item[hidden]{display:none}
.lista-ayuda{margin:0;padding-left:18px;display:grid;gap:9px;font-size:13px;color:var(--suave);line-height:1.5}
.lista-ayuda b{color:var(--texto)}
.etiqueta-admin{font-size:10.5px;padding:1px 7px;border-radius:99px;background:rgba(255,122,26,.15);color:var(--acento-claro);margin-left:6px}
#est-lista{overflow-x:auto}
#est-lista td{vertical-align:middle}

/* ================= secciones de análisis (reportes, logística, novedades, tags, calculadora) ================= */
.r3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.r5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ayuda-chica{font-size:12.5px;color:var(--tenue);margin:0;line-height:1.5}
.etq-mini{font-size:10.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.rx-fila{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--borde);font-size:13px;color:var(--suave)}
.rx-fila:last-child{border-bottom:0}
.rx-fila b{color:var(--texto);font-variant-numeric:tabular-nums;text-align:right}
.rx-fila small{color:var(--tenue);font-weight:400;margin-left:6px}
input[type=range]{accent-color:var(--acento);padding:0;border:0;background:none;box-shadow:none}
.campo label b{color:var(--acento-claro);margin-left:6px}

.alerta{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;margin-top:3px}
.al-alta{background:rgba(242,85,95,.16);color:#ff8c94}
.al-media{background:rgba(245,179,1,.16);color:#ffcf5a}
.al-baja{background:rgba(138,124,104,.18);color:var(--suave)}
.causales{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.causal{background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:9px 11px;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;cursor:pointer;color:var(--suave);transition:.16s}
.causal:hover{border-color:var(--acento)}
.causal.activo{border-color:var(--acento);background:rgba(255,122,26,.10)}
.causal .nom{font-size:12px}
.causal b{font-size:16px;color:var(--texto);font-variant-numeric:tabular-nums}
.causal .niveles{grid-column:1/-1;display:flex;gap:5px}
.causal .niveles i{font-style:normal;font-size:10.5px;font-weight:700;padding:0 6px;border-radius:99px}

.tag-card{display:grid;gap:8px;align-content:start}
.tag-estado{font-size:14px;font-weight:700;color:var(--texto);margin-top:2px}
.tag-pct{font-size:13px;font-weight:700}
.tag-num{font-size:26px;font-weight:700;color:var(--texto)}
.tag-num small{font-size:12px;color:var(--tenue);font-weight:400}
.tag-lista{border-top:1px solid var(--borde);padding-top:7px}
.tag-tit{font-size:10.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.7px;font-weight:600;margin-bottom:4px}
.tag-fila{display:grid;grid-template-columns:1fr auto 46px;gap:8px;font-size:12px;color:var(--suave);padding:2px 0}
.tag-fila span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-fila b{color:var(--texto);font-variant-numeric:tabular-nums}
.tag-fila i{font-style:normal;color:var(--tenue);text-align:right;font-variant-numeric:tabular-nums}

.entrada-u{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--borde);border-radius:8px;padding-left:9px}
.entrada-u span{color:var(--tenue);font-size:12.5px;min-width:12px}
.entrada-u input{border:0;background:transparent;flex:1;min-width:0;box-shadow:none!important}
.entrada-u:focus-within{border-color:var(--acento)}
.calc-grupo{padding:10px 0;border-bottom:1px solid var(--borde)}
.calc-grupo:last-child{border-bottom:0}
.calc-grupo h4{font-size:11px;color:var(--acento-claro);text-transform:uppercase;letter-spacing:.8px;margin:0 0 8px}
.calc-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.calc-dato{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;padding:9px 11px}
.calc-val{font-size:17px;font-weight:700;color:var(--texto);margin-top:3px;font-variant-numeric:tabular-nums}
.calc-pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.calc-pipe div{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;padding:8px;text-align:center}
.calc-pipe b{display:block;font-size:17px;color:var(--texto)}
.calc-pipe span{font-size:10.5px;color:var(--tenue)}

/* PDF del reporte: el navegador imprime solo la vista abierta */
@media print{
  #lateral,#barra-sup .chips,#barra-sup input,#barra-sup select,.btn,#cargando-nube,#acceso{display:none!important}
  body,#principal,#lienzo{overflow:visible!important;height:auto!important;background:#fff!important;color:#111!important}
  .tarjeta,.hero,.prom,.estado-card{break-inside:avoid;background:#fff!important;color:#111!important;border-color:#ccc!important}
  .vista:not(.activa){display:none!important}
}