/* Performance Evaluator — tokens y estilos base
   Identidad Heligrafics. Dos colores: el azul marino y el rojo del logotipo.
   El rojo NO se usa fuera del logotipo. No hay verde en ninguna parte.

   Este fichero solo tiene variables y estilos de elemento.
   Los componentes (.pe-*) viven en componentes.css. */

:root {
  /* ---- color ---- */
  --pe-azul:        #14213D;  /* rótulos, barra superior, botón principal, enlaces, foco, estado pendiente */
  --pe-azul-oscuro: #0C1527;  /* hover de enlace */
  --pe-texto:       #2E3440;  /* cuerpo de lectura */
  --pe-texto-medio: #4A5468;  /* descriptores, texto secundario */
  --pe-texto-tenue: #5F687F;  /* etiquetas y ayudas — 5:1 sobre blanco */
  --pe-fondo:       #F1F3F6;  /* fondo de página */
  --pe-hoja:        #FFFFFF;  /* superficie de contenido */
  --pe-filete:      #E2E6EC;  /* separadores de fila */
  --pe-filete-alto: #C6CDD9;  /* bordes de campo, cabeceras de tabla */
  --pe-seleccion:   #EAEEF4;  /* fila de nivel elegida */
  --pe-rojo-logo:   #D12023;  /* SOLO dentro del logotipo */

  /* escala del resultado: un mismo color a tres claridades, sin matiz */
  --pe-resultado-1: #E7EAF0;  /* Satisfactorio */
  --pe-resultado-2: #D2D8E3;  /* A reforzar */
  --pe-resultado-3: #B8C1D1;  /* Insuficiente */

  /* ---- tipografía ---- */
  /* Oswald: rótulos, cabeceras, etiquetas en versalita, números de nivel.
     Nunca en texto de más de una línea. */
  --pe-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  /* Lato: todo lo que se lee de verdad. */
  --pe-texto-ff: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- espacio (base 4) ---- */
  --pe-e1: 4px;  --pe-e2: 8px;  --pe-e3: 12px; --pe-e4: 16px;
  --pe-e5: 24px; --pe-e6: 32px; --pe-e7: 48px; --pe-e8: 64px;

  --pe-radio: 3px;
  --pe-medida: 66ch;   /* medida de lectura del documento */
}

/* ---- reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- base ---- */
body {
  margin: 0;
  background: var(--pe-fondo);
  color: var(--pe-texto);
  font-family: var(--pe-texto-ff);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--pe-display);
  font-weight: 500;
  color: var(--pe-azul);
  margin: 0;
}
h1 { font-size: 31px; line-height: 1.22; }
h2 { font-size: 25px; line-height: 1.25; }
h3 { font-size: 21px; line-height: 1.3; }

p { margin: 0 0 var(--pe-e4); }
p:last-child { margin-bottom: 0; }

a { color: var(--pe-azul); text-underline-offset: 3px; }
a:hover { color: var(--pe-azul-oscuro); }

input, textarea, select, button { font: inherit; color: inherit; }

/* Un único tratamiento de foco en toda la aplicación: contorno azul SEPARADO
   del elemento. El estado «pendiente» usa un borde azul PEGADO. Se distinguen
   por la forma, no por el color — no hay color de alarma en el sistema. */
:focus-visible { outline: 2px solid var(--pe-azul); outline-offset: 3px; }

/* Sin sombras en ninguna parte: la jerarquía la hacen el filete y el espacio. */