/* Base — paleta corporativa y reset.
   Los hex de marca salen del logo de EEMB, como en el resto del portafolio, y
   cada par lleva su contraste medido. Este tablero se proyecta en sala: no hay
   tipografia autoalojada todavia, asi que la pila del sistema es la que manda. */

:root {
  --amarillo:        #f1cf1b;
  --ambar-grafico:   #b58900;   /* el oro de los graficos, 3.21:1 sobre blanco (minimo 3:1) */
  --amarillo-tenue:  #fdf6da;
  --sobre-amarillo:  #4a3b00;   /* 7.14:1 sobre amarillo */

  --rojo-marca:      #ee2835;   /* graficos y texto grande, 4.21:1 */
  --rojo:            #e02330;   /* superficies con texto blanco, 4.72:1 */
  --rojo-texto:      #c81e2a;   /* texto pequeño: 5.11:1 sobre gris-100 (el --rojo da 4.22), 5.71:1 sobre blanco */
  --rojo-tenue:      #fdeaec;

  --verde:           #127438;   /* 5.86:1 sobre blanco */
  --verde-tenue:     #e6f4ea;

  /* Los graficos usan solo colores corporativos (pedido el 23/09/2026, en lugar
     del marino, el verde azulado y el ciruela de contrapunto del 17/09): el rojo
     de marca para la medida principal (km ejecutado, varados), el oro que sale
     del amarillo del logo para los indicadores (Ejec/Prog, DPV), y los grises
     de abajo para lo de referencia. Un color por entidad en COLOR y COLOR_VARADO
     de etiquetas.js. Separacion medida en OKLab con las matrices de Machado el
     23/09/2026, en los pares que conviven en un grafico: el peor es rojo contra
     --gris-400 en deuteranopia, dE 10.2, que ademas se separan por claridad. El
     rojo y el oro nunca van juntos: en deuteranopia quedan a dE 3.9. */

  /* Mapa de calor: una sola escala secuencial en el tono del rojo de
     marca (OKLCH h 24,8), de claro a oscuro = de menos a mas perdida. Misma
     claridad por escalon que la escala naranja anterior; calculada en OKLab el
     17/09/2026. Contraste sobre blanco (la superficie) y del texto que lleva la
     celda (calor.js: blanco desde el 5). Los dos primeros escalones quedan bajo
     3:1 a proposito, como el cero de una escala: el valor va escrito en la celda
     o en el tooltip. */
  --calor-1: #fee7e4;   /* 1.18:1 · texto tinta 15.46:1 */
  --calor-2: #fec0bb;   /* 1.56:1 · texto tinta 11.72:1 */
  --calor-3: #ff968e;   /* 2.10:1 · texto tinta  8.71:1 */
  --calor-4: #eb6a64;   /* 3.10:1 · texto tinta  5.90:1 */
  --calor-5: #ba4c48;   /* 4.98:1 · texto blanco 4.98:1 */
  --calor-6: #873431;   /* 8.18:1 · texto blanco 8.18:1 */

  /* Tipo de dia en ingresos (25/09/2026): la misma gama del rojo, de oscuro a
     claro, y el festivo en gris para que no se lea como un escalon mas. Todos
     pasan el 3:1 de elemento grafico sobre blanco; el nombre va en la leyenda y
     en el eje, no solo en el color. */
  --dia-habil:   var(--calor-6);    /* 8.18:1 */
  --dia-sabado:  var(--calor-5);    /* 4.98:1 */
  --dia-domingo: var(--calor-4);    /* 3.10:1 */
  --dia-festivo: var(--gris-700);   /* 10.9:1 */

  --blanco:   #ffffff;
  --tinta:    #16141a;          /* 16.9:1 sobre blanco */
  --gris-50:  #faf9f7;
  --gris-100: #f4f2ef;
  --gris-200: #e6e3de;
  --gris-300: #cfcbc4;          /* 1.6:1: solo lo atenuado («Otros», lo no elegido), nunca un dato */
  --gris-400: #8f8a83;          /* 3.43:1: el gris de los datos (eliminado, continúa recorrido) */
  --gris-500: #6f6b66;          /* 4.73:1 sobre blanco: rotulos */
  --gris-700: #403c38;

  --fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(22, 20, 26, .06), 0 2px 8px rgba(22, 20, 26, .05);
  --sombra-alta: 0 8px 24px rgba(22, 20, 26, .14);   /* lo que flota encima: paneles de filtro */

  /* Escritorio y sala de juntas: 44px basta. No es una app de campo. */
  --tactil: 44px;
}

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

/* El hueco de la barra de scroll, reservado siempre: un grafico se mide antes de
   existir, la pagina crecia al pintarlo, aparecia la barra y su viewBox quedaba
   15 px mas ancho que su hueco, con la letra escalada (medido el 16/09/2026). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  min-height: 100dvh;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--gris-100);
  -webkit-font-smoothing: antialiased;
}

input, button, select { font: inherit; color: inherit; min-height: var(--tactil); }
button { cursor: pointer; border: none; background: none; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }

.cifra, .kpi-valor, td, th { font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }