/* ── EL SISTEMA FOLIO · tokens de la rama Opositores ─────────────────────
   Espejo de ESTILO-CUADERNO. Kids escribe en cuaderno cuadriculado; el
   opositor escribe en el folio de examen. Mismo principio: un papel real
   como lienzo, en CSS puro, sin imágenes ni peticiones.
   Las mismas dos familias que en Kids: TINTA lleva texto encima; RELLENO
   son fondos y bordes, nunca color de letra. En papel se apaga con COLOR,
   no con opacity.
   Versión rebajada (23/8): folio, margen rojo, pauta y tampón SÍ;
   «Dirección», «Expediente» y la franja bandera NO, a la espera de Javier. */
:root{
  /* papel y trazo */
  --papel:#F7F2E7;            /* crema administrativo */
  --hoja:#FFFDF7;             /* las tarjetas-expediente, un punto más claras */
  --pauta:rgba(107,99,87,.13);/* el rayado horizontal, paso 34 px */
  --paso:34px;
  --margen:rgba(163,39,45,.38);/* la línea de margen roja, la firma del lienzo */
  --linea:#D9CFBA;            /* bordes de tarjeta y tabla */
  --banda:#EFE8D6;            /* cabeceras de tabla, fondos de apoyo */

  /* tinta */
  --tinta:#26221C;            /* texto principal, titulares */
  --tinta-2:#5F584C;          /* texto secundario, rótulos */
  --rojo:#A3272D;             /* rojo BOE: epígrafes, botón, tampón */
  --rojo-osc:#7C1D22;         /* hover y texto sobre fondos claros de aviso */
  --ocre:#B98A1F;             /* detalle, nunca texto pequeño */

  /* semánticos: solo significan cosas */
  --ok:#2F6B3A;  --fondo-ok:#E8F1E6;
  --aviso:#8A6B12; --fondo-aviso:#FDF3D7; --borde-aviso:#C79A2A;

  /* forma: esquinas rectas, sombra dura mínima */
  --radio:2px;
  --borde:1px solid var(--linea);
  --sombra:2px 2px 0 rgba(38,34,28,.08);

  /* tipografía: serif para lo legal y los titulares, sans del sistema en
     versalitas con tracking para rótulos, números tabulares */
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* el folio: papel con pauta, y el margen rojo a la izquierda del contenido */
.folio{position:relative;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--paso) - 1px),var(--pauta) calc(var(--paso) - 1px) var(--paso)),var(--papel)}
.folio::before{content:"";position:absolute;top:0;bottom:0;left:18px;border-left:2px solid var(--margen)}
@media(min-width:720px){.folio::before{left:34px}}

/* rótulo de versalitas */
.rotulo{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);font-weight:700}

/* epígrafe como convocatoria: banda roja, numeración visible */
.epigrafe{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#FDFCF7;
  background:var(--rojo);padding:8px 14px;margin:0;font-weight:700}
.epigrafe small{color:#E9C7C9;font-weight:400;margin-right:10px}  /* apagado con color, no con alfa */

/* tarjeta-expediente: tapa la pauta */
.expediente{background:var(--hoja);border:var(--borde);border-top:none;padding:18px 18px 20px;box-shadow:var(--sombra)}

/* botones: rectos */
.btn-folio{display:inline-block;font:700 15px/1 var(--sans);padding:14px 24px;background:var(--rojo);color:#FDFCF7;
  text-decoration:none;border-radius:var(--radio);letter-spacing:.04em}
.btn-folio:hover{background:var(--rojo-osc)}
.btn-folio.sec{background:transparent;color:var(--rojo);border:2px solid var(--rojo);padding:12px 22px}
.btn-folio:active{transform:scale(.97)}

/* tampón: logrado = girado −8° */
.tampon{display:inline-block;transform:rotate(-8deg)}