/* Tokens de marca SUPEIM. Cambiar un valor aqui se propaga a toda la app. */
:root {
  /* Marca (extraido del logo real) */
  --supeim-naranja: #ed8934;
  --supeim-naranja-suave: #fbeadb;
  --supeim-negro: #1a1a1a;

  /* Semantico: entrada = verde, salida = rojo, en toda la app sin excepcion */
  --color-entrada: #2e7d32;
  --color-entrada-suave: #e8f3e8;
  --color-salida: #c62828;
  --color-salida-suave: #fbe9e9;

  /* Superficies */
  --superficie-fondo: #fafafa;
  --superficie-tarjeta: #ffffff;
  --borde: #e5e5e5;
  --borde-fuerte: #cfcfcf;

  /* Texto */
  --texto-principal: var(--supeim-negro);
  --texto-secundario: #6b6b6b;
  --texto-tenue: #9a9a9a;

  /* Tipografia: Manrope para titulos (personalidad), Inter para cuerpo,
     JetBrains Mono para codigos/cantidades (precision, legibilidad de digitos) */
  --fuente-titulos: "Manrope", sans-serif;
  --fuente-cuerpo: "Inter", sans-serif;
  --fuente-mono: "JetBrains Mono", monospace;

  --radio: 10px;
  --transicion: 150ms ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--superficie-fondo);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  margin: 0;
}

/* Firma visual del sistema: cuando un dato cambia por el WebSocket,
   se ilumina un instante en naranja suave y se apaga -- asi el "tiempo
   real" se ve, no solo se anuncia. Aplicar la clase .en-vivo al
   elemento cuando llega el evento y quitarla al terminar la transicion. */
.en-vivo {
  animation: destello-en-vivo 900ms ease;
}

@keyframes destello-en-vivo {
  0% { background-color: var(--supeim-naranja-suave); }
  100% { background-color: transparent; }
}

.tarjeta {
  background: var(--superficie-tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: transform var(--transicion), border-color var(--transicion);
}

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--borde-fuerte);
}