/* Los estilos que estaban en <style> dentro de las plantillas.

   La Content-Security-Policy de la app (seguridad_web.py) no deja estilos en
   linea, asi que viven aca. Es CSS a mano, no @apply: este archivo no pasa por
   Tailwind (src/input.css si). Cada bloque dice de que pantalla es. */

/* ---- dashboard.html ---- */
/* Salud del inventario: "60% de los productos contados tuvieron diferencias"
   no entraba en una linea a 360px y la pagina se corria 16px de costado. */
#salud-inventario-lista [class*="badge-"] { white-space: normal; }
@media (min-width: 768px) {
  #seccion-kpis[data-sin-comercial] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #seccion-rotacion[data-sin-comercial] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- segunda pasada ---- */
.dash-punto { position: relative; display: inline-block; height: 10px; width: 10px; flex-shrink: 0; border-radius: 9999px; background: #cbd5e1; }
.dash-punto-ok { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .16); }
.dash-punto-ambar { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.dash-punto-rojo { background: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .16); }
@media (prefers-reduced-motion: no-preference) {
  /* Tres latidos y quieto. Es un anillo que crece y se desvanece: transform
     y opacidad, que los hace la placa de video. Antes se animaba la sombra,
     y eso repintaba en el procesador en cada cuadro durante 7 segundos. */
  .dash-punto-ambar::after, .dash-punto-rojo::after {
    content: ""; position: absolute; inset: 0; border-radius: 9999px; opacity: 0;
    animation: latido 2.4s ease-out 3;
  }
  .dash-punto-ambar::after { background: rgba(245, 158, 11, .5); }
  .dash-punto-rojo::after { background: rgba(225, 29, 72, .45); }
}
@keyframes latido { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

.atencion-tarjeta {
  display: flex; align-items: center; gap: 14px;
  border-radius: 14px; border: 1px solid; padding: 16px;
  transition: transform .2s var(--curva-resorte), box-shadow .2s ease;
}
a.atencion-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(11, 67, 64, .45); }
a.atencion-tarjeta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(23, 160, 142, .25); }
.atencion-icono { display: flex; height: 40px; width: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 12px; }
.atencion-numero { display: block; font-size: 24px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.atencion-texto { display: block; font-size: 14px; line-height: 20px; }
.atencion-flecha { margin-left: auto; flex-shrink: 0; transition: transform .2s ease; }
a.atencion-tarjeta:hover .atencion-flecha { transform: translateX(3px); }
.atencion-amber { border-color: #fcd34d; background: #fffbeb; }
.atencion-amber .atencion-icono { background: #fef3c7; color: #b45309; }
.atencion-amber .atencion-numero, .atencion-amber .atencion-flecha { color: #92400e; }
.atencion-amber .atencion-texto { color: #78350f; }
.atencion-rose { border-color: #fda4af; background: #fff1f2; }
.atencion-rose .atencion-icono { background: #ffe4e6; color: #be123c; }
.atencion-rose .atencion-numero, .atencion-rose .atencion-flecha { color: #9f1239; }
.atencion-rose .atencion-texto { color: #881337; }
.atencion-sky { border-color: #7dd3fc; background: #f0f9ff; }
.atencion-sky .atencion-icono { background: #e0f2fe; color: #0369a1; }
.atencion-sky .atencion-numero, .atencion-sky .atencion-flecha { color: #075985; }
.atencion-sky .atencion-texto { color: #0c4a6e; }
.atencion-calma { border-color: #e2e8f0; background: #ffffff; }
.atencion-calma .atencion-icono { background: #f1f5f9; color: #64748b; }
.atencion-calma .atencion-numero { color: #475569; }
.atencion-calma .atencion-texto { color: #475569; }

/* El mapa de calor entra de a una fila (16), no de a una celda (112): cada
   celda animada por separado era lo mas caro de la pantalla para el
   procesador (unos 80ms al cargar en una Mac; 6 veces eso en una PC vieja). */
@media (prefers-reduced-motion: no-preference) {
  .fila-calor { animation: celdaCalor .45s ease-out both; animation-delay: calc(var(--d, 0ms) + 250ms); }
}
@keyframes celdaCalor { from { opacity: 0; transform: translateY(4px); } }

/* mapa de calor: dia de la semana por hora (antes style= en el HTML que arma
   dashboard.js). El color de cada celda y la demora de cada fila los pone
   Brainstock.medidas desde data-fondo y data-demora. */
.mapa-calor-grilla { display: flex; flex-direction: column; gap: 2px; min-width: 420px; }
.mapa-calor-fila { display: grid; grid-template-columns: 32px 1fr; gap: 2px; }
.mapa-calor-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.celda-calor { height: 16px; border-radius: 3px; background: #e2e8f0; }
.mapa-calor-muestra { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.mapa-calor-muestra-0 { background: #e2e8f0; }
.mapa-calor-muestra-1 { background: rgba(13, 128, 116, 0.35); }
.mapa-calor-muestra-2 { background: rgba(13, 128, 116, 0.6); }
.mapa-calor-muestra-3 { background: rgba(13, 128, 116, 0.9); }

/* ---- venta.html: al imprimir la venta recien registrada, sale solo el ticket ---- */
@media print {
  body:has(#ticket-venta) * { visibility: hidden; }
  #ticket-venta, #ticket-venta * { visibility: visible; }
  #ticket-venta { position: absolute; top: 0; left: 0; width: 100%; border: none; }
  .ticket-no-imprimir { display: none; }
}

/* ---- venta.html en un celular: el nombre del producto arriba, con todo el
   ancho, y la cantidad y el boton de quitar abajo a la derecha. A 360px los
   controles dejaban 62px para el nombre ("Diclofe...") y la ubicacion en
   dos renglones. ---- */
@media (max-width: 479px) {
  #carrito-lista .row-item { flex-wrap: wrap; row-gap: 4px; }
  #carrito-lista .row-item > .min-w-0 { flex-basis: 100%; }
  #carrito-lista .row-item > .shrink-0 { margin-left: auto; }
}

/* ---- conteo.html: el conteo ciego esconde la cantidad del sistema ---- */
body.conteo-ciego .js-cantidad-sistema { display: none !important; }


/* ---- dispositivos.html: los equipos llegan de a uno (antes style="--i: n") ---- */
.equipo:nth-child(1) { --i: 0; }
.equipo:nth-child(2) { --i: 1; }
.equipo:nth-child(3) { --i: 2; }
.equipo:nth-child(4) { --i: 3; }
.equipo:nth-child(5) { --i: 4; }
.equipo:nth-child(6) { --i: 5; }
.equipo:nth-child(7) { --i: 6; }
.equipo:nth-child(8) { --i: 7; }
.equipo:nth-child(9) { --i: 8; }
.equipo:nth-child(10) { --i: 9; }
.equipo:nth-child(11) { --i: 10; }
.equipo:nth-child(12) { --i: 11; }
.equipo:nth-child(13) { --i: 12; }
.equipo:nth-child(14) { --i: 13; }
.equipo:nth-child(15) { --i: 14; }
.equipo:nth-child(16) { --i: 15; }
.equipo:nth-child(17) { --i: 16; }
.equipo:nth-child(18) { --i: 17; }
.equipo:nth-child(19) { --i: 18; }
.equipo:nth-child(20) { --i: 19; }
.equipo:nth-child(21) { --i: 20; }
.equipo:nth-child(22) { --i: 21; }
.equipo:nth-child(23) { --i: 22; }
.equipo:nth-child(24) { --i: 23; }
.equipo:nth-child(n+25) { --i: 24; }