/* ==========================================================================
   TIMEKO. Sistema de diseño.
   Paleta tomada de la identidad que ya existe: petróleo, verde azulado,
   papel claro. Los estados se resuelven con ocre y óxido, cálidos y apagados,
   para que convivan con el petróleo en lugar de pelearse con él.
   ========================================================================== */

:root {
  /* --- Marca --------------------------------------------------------- */
  --petroleo-900: #081d22;
  --petroleo-800: #0c272e;
  --petroleo-700: #11343d;
  --pizarra-600: #16404a;
  --pizarra-500: #1d525e;

  --verde-700: #0a6353;
  --verde-600: #0e7c66;
  --verde-500: #139079;
  --menta-400: #2fa98c;
  --menta-100: #d9efe8;
  --menta-50: #eef7f4;

  /* --- Estados ------------------------------------------------------- */
  --ocre-700: #8f5600;
  --ocre-600: #b86e00;
  --ocre-100: #f7ead2;
  --oxido-700: #8c2e27;
  --oxido-600: #b03a32;
  --oxido-100: #f6e2e0;

  /* --- Neutros ------------------------------------------------------- */
  --papel: #f4f6f5;
  --blanco: #ffffff;
  --gris-50: #f7f9f8;
  --gris-100: #eceeed;
  --gris-200: #dfe3e2;
  --gris-300: #c5cbca;
  --gris-400: #9aa3a2;
  --gris-500: #6e7877;
  --gris-600: #4d5756;
  --gris-700: #333c3b;

  /* --- Texto --------------------------------------------------------- */
  --texto: #10262b;
  --texto-suave: #4d5756;
  --texto-tenue: #6e7877;
  --texto-inverso: #e8efed;

  /* --- Tipografía ---------------------------------------------------- */
  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-lema: 'Source Serif 4', Georgia, serif;

  /* Escala modular 1.2 sobre 16 px, redondeada a medios píxeles. */
  --t-xs: 0.75rem;    /* 12 */
  --t-sm: 0.8125rem;  /* 13 */
  --t-base: 0.9375rem;/* 15 */
  --t-md: 1.0625rem;  /* 17 */
  --t-lg: 1.3125rem;  /* 21 */
  --t-xl: 1.625rem;   /* 26 */
  --t-2xl: 2rem;      /* 32 */
  --t-3xl: 2.625rem;  /* 42 */

  /* --- Espacio ------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* --- Radios. Distintos por tipo de objeto, no uno para todo. -------- */
  --r-control: 6px;   /* botones, campos */
  --r-panel: 10px;    /* tarjetas y tablas */
  --r-burbuja: 14px;  /* burbujas de conversación */
  --r-telefono: 38px; /* carcasa del teléfono */

  /* --- Elevación. Reservada para lo que de verdad flota. -------------- */
  --sombra-flotante: 0 18px 40px -12px rgba(8, 29, 34, 0.35);
  --sombra-menu: 0 6px 20px -6px rgba(8, 29, 34, 0.22);

  --riel: 232px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--e-4); max-width: 68ch; }

a { color: var(--verde-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--verde-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.lema {
  font-family: var(--fuente-lema);
  font-style: italic;
  font-weight: 400;
  color: var(--pizarra-500);
  letter-spacing: 0;
}

/* Cifras que deben alinearse en columna. */
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------------------
   Superficies
   -------------------------------------------------------------------------- */

.panel {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-panel);
}

.panel__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--gris-100);
}

.panel__titulo { font-size: var(--t-md); font-weight: 600; }
.panel__nota { font-size: var(--t-sm); color: var(--texto-tenue); }
.panel__cuerpo { padding: var(--e-5); }

/* --------------------------------------------------------------------------
   Lecturas numéricas. Sin degradados ni tarjetas idénticas: el número manda
   y la etiqueta se queda chica debajo.
   -------------------------------------------------------------------------- */

.lecturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.lectura {
  padding: var(--e-4) var(--e-5);
  border-left: 1px solid var(--gris-100);
}
.lectura:first-child { border-left: 0; }

.lectura__valor {
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.lectura__unidad { font-size: var(--t-md); font-weight: 500; color: var(--texto-tenue); }
.lectura__etiqueta { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texto-tenue); }

.lectura--alerta .lectura__valor { color: var(--oxido-600); }
.lectura--aviso .lectura__valor { color: var(--ocre-600); }
.lectura--bien .lectura__valor { color: var(--verde-600); }

/* --------------------------------------------------------------------------
   Distintivos de estado
   -------------------------------------------------------------------------- */

.distintivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 500;
  white-space: nowrap;
}
.distintivo::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.distintivo--bien { background: var(--menta-100); color: var(--verde-700); }
.distintivo--aviso { background: var(--ocre-100); color: var(--ocre-700); }
.distintivo--alerta { background: var(--oxido-100); color: var(--oxido-700); }
.distintivo--neutro { background: var(--gris-100); color: var(--gris-600); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--verde-600);
  color: var(--blanco);
  font: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.boton:hover { background: var(--verde-700); }

.boton--sobrio {
  background: var(--blanco);
  border-color: var(--gris-300);
  color: var(--texto);
}
.boton--sobrio:hover { background: var(--gris-50); border-color: var(--gris-400); }

.boton--tenue {
  background: transparent;
  color: var(--texto-suave);
  padding-inline: 10px;
}
.boton--tenue:hover { background: var(--gris-100); }

/* --------------------------------------------------------------------------
   Tablas. Filas altas y legibles, sin cebra: la separación la hace el aire.
   -------------------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); }

.tabla th {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-tenue);
  border-bottom: 1px solid var(--gris-200);
  white-space: nowrap;
}

.tabla td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--gris-100);
  vertical-align: middle;
}

.tabla tbody tr:hover { background: var(--gris-50); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.persona { display: flex; align-items: center; gap: var(--e-3); }
.persona__inicial {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--menta-50);
  color: var(--verde-700);
  font-size: var(--t-sm);
  font-weight: 600;
}
.persona__nombre { font-weight: 500; }
.persona__meta { font-size: var(--t-xs); color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   La línea del día. Pieza distintiva del producto.

   El eje no es el reloj del día sino los minutos respecto a la hora de entrada
   del turno. Con el reloj completo las llegadas se amontonan en una sola marca
   y no se ve nada; con este encuadre se lee el racimo justo antes de la hora y
   la cola de rezagados, que es la información que importa.
   -------------------------------------------------------------------------- */

.jornada { --etiqueta: 178px; }

.jornada__eje {
  position: relative;
  height: 17px;
  margin-left: var(--etiqueta);
}

.jornada__marca {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.jornada__turno { display: flex; align-items: center; height: 52px; }

.jornada__nombre {
  width: var(--etiqueta);
  flex: none;
  padding-right: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.3;
}
.jornada__nombre b { font-weight: 600; }
.jornada__nombre span { color: var(--texto-tenue); }

.jornada__pista {
  position: relative;
  height: 32px;
  flex: 1;
  background: var(--menta-50);
  border-radius: 4px;
}

/* Zona posterior a la tolerancia: todo lo que cae aquí es retardo. */
.jornada__tarde {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: var(--ocre-100);
  border-radius: 0 4px 4px 0;
}

.jornada__corte {
  position: absolute;
  top: -5px; bottom: -5px;
  width: 2px;
  background: var(--petroleo-800);
}

.jornada__tolerancia {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px dashed var(--ocre-600);
  opacity: 0.55;
}

.jornada__punto {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--verde-600);
  opacity: 0.55;
}
.jornada__punto--tarde { background: var(--ocre-600); opacity: 0.8; }
.jornada__punto--tope { border-radius: 2px; width: 7px; }

/* --------------------------------------------------------------------------
   Umbral de jornada. Una barra por departamento y una sola línea vertical en
   las 46 horas que entran en vigor en 2027.
   -------------------------------------------------------------------------- */

.umbral { display: grid; gap: var(--e-3); }

.umbral__fila { display: grid; grid-template-columns: 128px 1fr 58px; align-items: center; gap: var(--e-4); }
.umbral__etiqueta { font-size: var(--t-sm); color: var(--texto-suave); }

.umbral__pista {
  position: relative;
  height: 22px;
  background: var(--gris-100);
  border-radius: 3px;
}

.umbral__barra {
  display: block;
  height: 100%;
  background: var(--verde-600);
  border-radius: 3px 0 0 3px;
}
.umbral__barra--excede { background: var(--oxido-600); }

.umbral__linea {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--petroleo-800);
}

.umbral__valor { font-size: var(--t-sm); font-weight: 600; text-align: right; }
.umbral__valor--excede { color: var(--oxido-600); }

/* --------------------------------------------------------------------------
   Teléfono
   -------------------------------------------------------------------------- */

.telefono {
  width: 300px;
  border-radius: var(--r-telefono);
  background: var(--petroleo-900);
  padding: 10px;
  box-shadow: var(--sombra-flotante);
}

.telefono__pantalla {
  border-radius: 28px;
  overflow: hidden;
  background: #e9e3db;
  display: flex;
  flex-direction: column;
  height: 540px;
}

.telefono__barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 12px var(--e-4);
  background: var(--petroleo-800);
  color: var(--texto-inverso);
}

.telefono__hilo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.burbuja {
  max-width: 80%;
  padding: 8px 11px;
  border-radius: var(--r-burbuja);
  font-size: var(--t-sm);
  line-height: 1.45;
  background: var(--blanco);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.burbuja--propia {
  align-self: flex-end;
  background: var(--menta-100);
  border-bottom-left-radius: var(--r-burbuja);
  border-bottom-right-radius: 4px;
}
.burbuja__hora {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--texto-tenue);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Utilidades mínimas
   -------------------------------------------------------------------------- */

.pila { display: grid; gap: var(--e-5); }
.fila { display: flex; align-items: center; gap: var(--e-3); }
.entre { justify-content: space-between; }
.crece { flex: 1; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}