/* 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;
  --atencion:     #B5541B;
  --correcto:     #2E7D46;
  --peligro:      #B3261E;
  /* 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);

  /* 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;
  /* 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; }

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; }