/* MES TEC · base común de la web (portada, aviso legal y privacidad).
   Archivo (SIL Open Font License, ver /fuentes/ARCHIVO-OFL.txt), servida desde esta web:
   sin depender de Google ni enviarle la IP de quien visita la página. */
@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/fuentes/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(/fuentes/archivo-latin-wdth-normal.woff2) format("woff2")}
:root{
  --noche:#0a2540;      /* azul noche de MES TEC: texto y bloques oscuros */
  --azul:#0b6bcb;       /* azul MES: enlaces y botón principal */
  --azul-hover:#0957a6; /* azul MES al pasar el ratón */
  --hoja:#ffffff;       /* la hoja de cálculo */
  --rejilla:#d5dee6;    /* líneas de la cuadrícula */
  --gris:#4f6f8c;       /* texto secundario (4.9:1 sobre blanco) */
  --fondo:#eef4fa;      /* fondo de la página */
  --marca:#f5c518;      /* subrayador: solo para las X de los partes */
  --barra:#f7fafc;      /* barra de título del Excel */
  --celda:#f2f6f9;      /* cabeceras de columna del Excel */
  --pista:#e7eef4;      /* fondo de las barras de horas */
  --seleccion:#cfe6f7;  /* texto seleccionado (el mismo azul claro del borde del logo) */
  --claro:#e6eef6;      /* texto sobre el bloque azul noche */
  --claro-suave:#b9cde0;/* texto secundario sobre el bloque azul noche (7.6:1) */
  /* Los mismos que el MES: quien entra en la web ve ya la herramienta que va a usar */
  --cielo:#4aa3e8;      /* arriba del degradado del logo */
  --hielo:#d6eaf9;      /* fondos suaves de iconos y pasos */
  --borde:#d8e6f2;      /* borde de los paneles blancos */
  --verde:#0e9f6e;      /* marcas de «todo bien» */
  --sombra:0 1px 2px rgba(10,37,64,.06),0 8px 24px rgba(10,37,64,.07);
  --sombra-alta:0 2px 6px rgba(10,37,64,.06),0 30px 70px -30px rgba(10,37,64,.45);
  --ancho:1180px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--noche);font-family:Archivo,system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6;font-variation-settings:"wdth" 100}
a{color:var(--azul);text-underline-offset:.15em}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
::selection{background:var(--seleccion);color:var(--noche)}

/* Cabecera y logo (los archivos del logo están en /marca/) */
.cabecera{padding:20px 0}
.marca-logo{display:inline-block;flex:none;line-height:0}
.marca-logo img{height:40px;width:auto;display:block}
@media (max-width:560px){.marca-logo img{height:34px}}