/*
 * Söhne — tipografía oficial de NNGG (Klim Type Foundry).
 * Se sirve desde el propio dominio: sin peticiones a terceros y sin depender
 * de internet una vez cargada, que en la TV importa.
 *
 * Disponibles Leicht (300), Buch (400) y Kräftig (500). No hay Halbfett, así
 * que 500 es el peso más fuerte: por eso no se piden 700 ni 800 en ningún
 * sitio, y font-synthesis: none evita que el navegador se invente un negrita
 * emborronando el trazo.
 */
@font-face {
  font-family: "Sohne";
  src: url("/assets/fonts/sohne-leicht.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sohne";
  src: url("/assets/fonts/sohne-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sohne";
  src: url("/assets/fonts/sohne-kraftig.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Azul oficial PP y NNGG (manual y SVG oficiales). Todo el resto de la
     gama se deriva de el: mismo tono (217 deg) y misma saturacion, variando
     solo la luminosidad. */
  --blue: #1e4a90;
  --blue-rgb: 30, 74, 144;        /* --blue, para rgba() con transparencia */
  --blue-bright: #2459ad;
  --blue-soft: #6f92c9;   /* tinte claro: foco y seleccion */
  --blue-pale: #c5d7f3;   /* texto azulado sobre paneles oscuros */
  --blue-deep: #153364;
  --blue-night: #0c1c37;
  --blue-night-rgb: 12, 28, 55;   /* --blue-night, para rgba() */
  --ink: #112951;
  --white: #ffffff;
  --muted: #a2b5d2;
  --muted-soft: #889dbf;
  --paper: #f6f8fb;
  --paper-2: #e7edf5;
  --panel: #0f1929;
  --panel-2: #172640;
  --border: rgba(255, 255, 255, 0.13);
  --danger: #e44e56;
  --success: #37c27b;
  --warning: #e5ad39;
  /* Bandera de Espana (escena Elecciones). No son azules: no salen de la gama. */
  --flag-red: #aa151b;
  --flag-yellow: #f1bf00;
  --font: "Sohne", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
/* hidden oculta siempre: si no, cualquier clase con display (flex, grid...)
   le gana y el elemento "oculto" se ve. Ya paso con el logo de reserva del
   cartel y con el aviso de "Operador". */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-synthesis: none; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}