/* Sistema de venta de celulares - estilos compartidos
   Paleta nueva (2026-08-22): fondo casi negro con dejo verdoso y UN solo
   acento, el verde lima. Sobre lima SIEMPRE va texto negro: el lima es
   claro y el blanco encima no se lee. */
:root{
  --fondo:#07090A;
  --alto:#0E1412;          /* tarjetas y paneles (el "panel" del diseño) */
  --alto2:#151D19;         /* tarjetas sobre tarjetas, chips */
  --linea:#1E2A24;
  --linea2:#2C3B32;
  --texto:#F2F5F3;
  --tenue:#8A968F;
  --acento:#A8E831;        /* EL acento: botones, precio, marca, activos */
  --acento-tenue:rgba(168,232,49,.14);
  --sobre-lima:#0B1206;    /* el negro que va arriba del lima */
  --ok:#A8E831;
  --fuego:#FF8A3D;         /* SOLO para "Ultimas unidades" y avisos de poco stock */
  --alerta:#FF8A3D;
  --malo:#FF6B6B;
  --display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --cuerpo:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --r:14px;                /* tarjetas 14, pastillas 999, paneles grandes 20 */
  --r-grande:20px;
  /* la luz del escenario (halo + aro del pedestal). El JS la pisa con el color
     del equipo que se esta mostrando; arranca en el lima de la marca */
  --luz-equipo:#A8E831;
}

/* registrarla como <color> hace que el cambio de tono se FUNDA suave al tocar
   otro color, en vez de saltar; los navegadores sin @property la ven igual,
   solo que el cambio es instantaneo */
@property --luz-equipo{syntax:"<color>";inherits:true;initial-value:#A8E831}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--cuerpo);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acento)}
[hidden]{display:none !important}

/* ---------- estructura ---------- */
.env{max-width:1180px;margin:0 auto;padding:clamp(1rem,2.5vw,1.6rem)}
.barra{
  position:sticky;top:0;z-index:20;background:rgba(7,9,10,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);
}
.barra .env{display:flex;align-items:center;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
.marca{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.marca span{color:var(--acento)}
.barra .sep{margin-left:auto}
.quien{color:var(--tenue);font-size:.84rem}

h1{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4vw,2.2rem);
  letter-spacing:-.02em;margin:0}
h1 b{font-weight:700;color:var(--acento)}
h2{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 .2rem;
  letter-spacing:-.01em}
h2 b{color:var(--acento)}
.sub{color:var(--tenue);margin:.25rem 0 0}

/* ---------- tarjetas y cifras ---------- */
.tarjeta{background:var(--alto);border:1px solid var(--linea);border-radius:var(--r);padding:1.1rem 1.2rem}
.cifras{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cifra{background:var(--alto);padding:1rem 1.15rem}
.cifra dt{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);margin:0 0 .3rem}
.cifra dd{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.cifra dd small{font-family:var(--cuerpo);font-size:.8rem;color:var(--tenue);margin-left:.15rem}

/* ---------- controles ---------- */
.btn{
  font-family:var(--cuerpo);font-size:.86rem;font-weight:600;color:var(--texto);
  background:var(--alto);border:1px solid var(--linea2);border-radius:999px;
  padding:.55rem 1.1rem;cursor:pointer;transition:border-color .16s,color .16s,background .16s;
}
.btn:hover:not(:disabled){border-color:var(--acento)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primario{background:var(--acento);border-color:var(--acento);color:var(--sobre-lima);
  font-weight:700}
.btn.primario:hover:not(:disabled){filter:brightness(1.08)}
.btn.chico{padding:.3rem .7rem;font-size:.8rem}
.btn.icono{width:32px;height:32px;padding:0;display:inline-grid;place-items:center;
  border-radius:8px;font-size:1rem;line-height:1}
.btn:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px}

label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 .35rem;font-weight:700}
input,select{
  width:100%;font-family:var(--cuerpo);font-size:.95rem;color:var(--texto);
  background:var(--alto2);border:1px solid var(--linea);border-radius:10px;
  padding:.65rem .8rem;
}
input::placeholder{color:#5E6A62}
.campo{margin-bottom:1rem}
.fila{display:flex;gap:.7rem;flex-wrap:wrap}
.fila > *{flex:1 1 140px}

/* ---------- tabla ---------- */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--alto)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--linea);white-space:nowrap}
th{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tenue);
  font-weight:700;background:var(--alto2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--alto2)}
td.num{font-variant-numeric:tabular-nums;text-align:right}
.equipo{display:flex;align-items:center;gap:.7rem}
.equipo img{width:34px;height:46px;object-fit:contain;border-radius:5px;background:var(--alto2)}
.equipo b{font-weight:700}
.equipo small{display:block;color:var(--tenue);font-size:.78rem;white-space:nowrap}

.pastilla{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .55rem;
  border-radius:999px;border:1px solid var(--linea2);color:var(--tenue)}
.pastilla.ok{color:var(--ok);border-color:rgba(168,232,49,.35);background:rgba(168,232,49,.08)}
.pastilla.poco{color:var(--alerta);border-color:rgba(255,138,61,.35);background:rgba(255,138,61,.08)}
.pastilla.cero{color:var(--malo);border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
.punto{display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);vertical-align:-1px;margin-right:.35rem}

/* ---------- avisos ---------- */
.aviso{border-left:2px solid var(--acento);background:var(--acento-tenue);
  padding:.8rem 1rem;border-radius:0 10px 10px 0;margin:1rem 0;font-size:.9rem}
.aviso.malo{border-color:var(--malo);background:rgba(255,107,107,.09)}
.aviso.ojo{border-color:var(--alerta);background:rgba(255,138,61,.09)}

.vacio{text-align:center;padding:3rem 1rem;color:var(--tenue)}
.vacio b{display:block;color:var(--texto);font-family:var(--display);font-size:1.1rem;
  font-weight:600;margin-bottom:.4rem}

/* ---------- ventana ---------- */
.velo{position:fixed;inset:0;background:rgba(4,6,5,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:1rem;z-index:50}
.ventana{background:var(--alto);border:1px solid var(--linea2);border-radius:var(--r-grande);
  width:min(560px,100%);max-height:88vh;overflow-y:auto;padding:1.4rem 1.5rem}
.ventana h2{margin-bottom:1rem}

.cargando{display:inline-block;width:16px;height:16px;border:2px solid var(--linea);
  border-top-color:var(--acento);border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}