/* Paleta, tipografía y elementos base. Azul oficial de APEC para riel y
   texto, azul de Punto de Enfoque como acento; todo contraste cumple 4.5:1. */
:root {
  --azul-apec:    #021838;
  --fondo:        #F4F6FA;
  --tarjeta:      #FFFFFF;
  --tinta:        #021838;
  --gris:         #5A6782;
  --gris-claro:   #8794A8;
  --linea:        #DCE1EB;
  --acento:       #136DAB;
  --acento-fuerte:#0F5586;
  /* Ámbar y no naranja: junto al rojo de peligro, un naranja se confunde con él.
     Es lo más claro que aún se lee como texto sobre blanco y sobre su tinte. */
  --atencion:     #946200;
  --correcto:     #2E7D46;
  --peligro:      #B3261E;
  /* Los fondos y bordes claros de un aviso o una insignia, de su mismo tono. */
  --peligro-tinte:  #FBEAE9;
  --peligro-borde:  #E7BDB9;
  --atencion-tinte: #FDF6DC;
  --atencion-borde: #EBD48F;
  --correcto-tinte: #E8F3EC;
  /* Solo para la marca de un ambiente que no es producción: si otra cosa lo
     usara, la marca dejaría de distinguirse. */
  --ambiente:     #5B2A86;

  /* Tintes del acento: el suave pinta al pasar el puntero, el otro marca
     lo elegido y el borde contornea los botones secundarios. */
  --acento-tenue: #F2F7FC;
  --acento-tinte: #E1EDF7;
  --acento-borde: rgb(19 109 171 / 0.45);

  /* Un color por tipo de evento: el fuerte para el texto y la orilla, el
     tinte para el fondo. El centinela es el rojo de peligro a propósito. */
  --tipo-cuasifalla:              #1D5FBF;
  --tipo-cuasifalla-tinte:        #E6EFFB;
  --tipo-adverso:                 #946200;
  --tipo-adverso-tinte:           #FDF6DC;
  --tipo-centinela:               #B3261E;
  --tipo-centinela-tinte:         #FDECEA;
  --tipo-ece:                     #5A3FA3;
  --tipo-ece-tinte:               #EFE9FB;
  --tipo-infraestructura:         #16735C;
  --tipo-infraestructura-tinte:   #E7F6F1;
  /* Para pintar barras y líneas: más claros que los de texto, validados para
     distinguirse entre sí con daltonismo. El ámbar no llega a 3:1 sobre
     blanco, así que toda gráfica lleva su cifra escrita y su tabla. */
  --grafica-cuasifalla:           #1D5FBF;
  --grafica-adverso:              #D49A00;
  --grafica-centinela:            #B3261E;
  --grafica-ece:                  #6A45C2;
  --grafica-infraestructura:      #138A6C;
  /* Las series que no son tipos de evento. La primera es el azul de acento de
     APEC; el azul oscuro de la marca no sirve para datos, se confunde con el
     texto. La segunda es el naranja de una paleta categórica validada; los
     dos pares que conviven (acento con naranja, acento con el rojo de
     centinela) pasan las pruebas de daltonismo. */
  --grafica-parte-1:              var(--acento);
  --grafica-parte-2:              #EB6834;

  /* Geometría, tipografía y tiempos de toda la aplicación. Cinco tamaños
     de letra; ningún componente inventa uno. */
  --radio-casilla: 4px;
  --radio-control: 6px;
  --radio-tarjeta: 12px;
  --texto-menor: 12px;
  --texto-base: 14px;
  --texto-titulo: 18px;
  /* Una cifra que va dentro de algo dibujado: al tamaño de pantalla, un
     «100.0» se sale del anillo del medidor. */
  --texto-dato: 24px;
  --texto-pantalla: 32px;
  --campo-y: 7px;
  --campo-x: 10.5px;
  /* Un control ciñe su renglón: con la interlínea del cuerpo mediría 37 px y
     estiraría cada celda que lo contiene. Con ésta mide 33. */
  --interlinea-control: 1.2;
  --icono: 14px;
  /* El diámetro de lo redondo que va dentro de una celda: el botón del embudo,
     las iniciales. Es más alto que el renglón de texto, así que es lo que decide
     cuánto mide una fila de tabla. */
  --circulo-en-celda: 28px;
  --transicion: .2s;
  --sombra-campo: 0 1px 2px 0 rgb(18 18 23 / .05);
  --sombra-panel: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --sombra-ventana: 0 20px 25px -5px rgb(2 24 56 / .14), 0 8px 10px -6px rgb(2 24 56 / .12);
  --ancho-riel: 260px;
  --ancho-riel-contraido: 72px;
  --alto-barra: 64px;
  /* El logo de APEC mide lo mismo en el riel y en la barra pública. */
  --alto-de-la-marca: 28px;
  /* Lo que mide la marca de ambiente; en producción no hay marca. */
  --alto-marca: 0px;
}

/* Servida desde el propio sitio: sin dependencia de una red externa y sin
   mandar la dirección de quien la abre a un tercero. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../tipografias/inter.woff2") format("woff2");
}

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

/* El carril de la barra de desplazamiento se aparta siempre: si no, al cambiar
   a una pantalla más alta aparece la barra, el ancho útil se encoge y todo lo
   alineado a la derecha da un brinco. El carril pinta el fondo del body: es el
   blanco del contenido para que no se vea como una raya. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Toda barra de desplazamiento es delgada y del color de la interfaz: la del
   sistema, gruesa y gris oscuro, se ve ajena a la aplicación. La de la página
   va un tono más oscura porque corre sobre el fondo. */
* { scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
html { scrollbar-color: var(--gris-claro) transparent; }

body {
  margin: 0;
  background: var(--tarjeta);
  color: var(--tinta);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--texto-base);
  line-height: 1.5;
}

a { color: var(--acento); }
:focus-visible { outline: 1px solid var(--acento); outline-offset: 2px; }
a:hover { text-decoration: underline; }

h1 { font-size: var(--texto-pantalla); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
/* Al cambiar de pantalla el foco pasa al título para los lectores de pantalla;
   no es algo que la persona haya elegido, así que no lleva anillo. */
h1:focus { outline: none; }
h2 { font-size: var(--texto-titulo); font-weight: 600; margin: 0 0 0.5rem; }