/* ============================================================
   cabecera-pie.css — El aspecto de la cabecera y el pie compartidos
   ControlHorario.digital

   Va con includes/cabecera.php e includes/pie.php, y se carga EL ÚLTIMO en
   cada página, después de sistema.css, app.css o panel.css.

   Por qué existe: el marcado ya era idéntico en todas las páginas, pero no
   se veía igual. Las páginas legales arrastran hojas propias con reglas muy
   anchas —"nav a { monoespaciada, mayúsculas }"— que alcanzaban también los
   tres <nav> del pie. El marcado compartido no sirve de nada si cada página
   lo repinta a su manera, así que aquí se fija el aspecto y se acota bajo
   .cabecera y .pie-sitio para ganar sin recurrir a !important.

   La referencia es la portada. Si hay que cambiar la cabecera o el pie, se
   cambia el marcado en includes/ y el aspecto AQUÍ.
   ============================================================ */

/* ---- Cabecera ---- */
.cabecera .nav-escritorio a {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: 2px;
  text-decoration: none;
  /* Sin relleno: app.css se lo ponia y en las paginas legales la barra no
     cabia, asi que "COMO FUNCIONA" y "PROBAR GRATIS" se partian en dos
     lineas. El unico con relleno es el boton. */
  padding: 0;
  white-space: nowrap;
}
.cabecera .nav-escritorio a.btn-brand {
  color: #fff;
  font-family: var(--font-mono);
  padding: .55rem 1rem;
}

/* ---- Pie ---- */
.pie-sitio {
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
  padding-block: 2.5rem;
}

/* Los enlaces del pie son texto corriente, no microcopy de navegación.
   Esta es exactamente la regla que las hojas de las páginas legales
   pisaban, y el motivo de que el pie se viera distinto según la página. */
.pie-sitio nav a,
.pie-sitio .md\:col-span-2 a {
  font-family: var(--font-body);
  font-size: .875rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  border-radius: 0;
  padding: 0;
  background: none;
  /* Subrayados en reposo, como en la portada: en un pie de enlaces densos
     es lo que hace evidente que son enlaces. */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pie-sitio nav a:hover,
.pie-sitio .md\:col-span-2 a:hover {
  background: none;
  color: var(--ink);
  text-decoration: underline;
}

.pie-sitio .footer-h {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pie-sitio img { width: 24px; height: 24px; }