/* ============================================================
   AGUA CIRCULAR — page-header.css
   Patrón canónico de cabecera de página: encabezado IDÉNTICO
   en todas las pestañas del sitio.
   ------------------------------------------------------------
   Estructura semántica:

     <body>
       <?php include 'includes/header.php'; ?>     ← MENÚ (idéntico)
       <main>
         <header class="ac-page-header">           ← TÍTULO + SUBTÍTULO
           <div class="ac-page-header-inner">
             <a class="ac-page-back" href="…">← Volver</a>
             <span class="ac-page-eyebrow">…</span>
             <h1 class="ac-page-title">…</h1>
             <p  class="ac-page-subtitle">…</p>
             <div class="ac-page-actions">…</div>
           </div>
         </header>
         <section class="ac-page-body">…contenido…</section>
       </main>

   El partial `includes/page-header.php` rellena este markup.

   También se incluyen alias para que clases legacy
   (.jumbotron, .cp-titulo, .de-titulo, .as-titulo, .tc-titulo,
    .ew-titulo, .cm-page-header, .header-title, .encabezado)
   adopten el mismo aspecto sin tocar cada página.
   ============================================================ */

/* ── Cabecera canónica ──────────────────────────────────────── */
.ac-page-header {
  background: transparent;
  border-bottom: 1px solid hsl(var(--border));
  padding: var(--space-6) var(--space-4);
  position: relative;
}

.ac-page-header-inner {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Variante destacada — gradiente de marca (dashboard / landing) */
.ac-page-header.ac-page-header-hero {
  background: linear-gradient(
    135deg,
    hsl(var(--brand-deep)) 0%,
    hsl(var(--primary-active)) 100%
  );
  color: #fff;
  border-bottom: none;
}

.ac-page-header.ac-page-header-hero .ac-page-title,
.ac-page-header.ac-page-header-hero .ac-page-subtitle,
.ac-page-header.ac-page-header-hero .ac-page-eyebrow,
.ac-page-header.ac-page-header-hero .ac-page-back {
  color: #fff;
}

.ac-page-header.ac-page-header-hero .ac-page-subtitle,
.ac-page-header.ac-page-header-hero .ac-page-eyebrow,
.ac-page-header.ac-page-header-hero .ac-page-back {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Componentes ────────────────────────────────────────────── */
.ac-page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
  width: max-content;
  cursor: pointer;
}

.ac-page-back:hover,
.ac-page-back:focus-visible {
  color: hsl(var(--primary));
  text-decoration: none;
}

.ac-page-back svg,
.ac-page-back i[data-lucide] {
  width: 16px;
  height: 16px;
}

.ac-page-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;                                 /* 13 px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--foreground));
  margin: 0 0 var(--space-1);
}

/* H1 canónico — TODOS los títulos de página tienen este estilo. */
.ac-page-title {
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);   /* 22→30 px */
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: hsl(0 0% 10%);
  margin: 0;
  text-wrap: balance;
}

.ac-page-subtitle {
  font-size: var(--text-sm);                             /* 14 px */
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
  max-width: 70ch;
  margin: var(--space-1) 0 0;
  text-wrap: pretty;
}

/* Acciones a la derecha (CTAs primarios/secundarios). */
.ac-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* En desktop: acciones flotando a la derecha del título. */
@media (min-width: 768px) {
  .ac-page-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "back back"
      "eyebrow eyebrow"
      "title actions"
      "subtitle subtitle";
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    align-items: end;
  }
  .ac-page-back     { grid-area: back; }
  .ac-page-eyebrow  { grid-area: eyebrow; }
  .ac-page-title    { grid-area: title; }
  .ac-page-actions  { grid-area: actions; margin-top: 0; }
  .ac-page-subtitle { grid-area: subtitle; }
}

@media (min-width: 1024px) {
  .ac-page-header {
    padding: var(--space-6) var(--space-8);
  }
}

/* ── Cuerpo de la página ────────────────────────────────────── */
.ac-page-body {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
}

@media (min-width: 1024px) {
  .ac-page-body {
    padding: var(--space-10) var(--space-8);
  }
}

/* ── Print: oculta back link y CTAs ─────────────────────────── */
@media print {
  .ac-page-back,
  .ac-page-actions {
    display: none !important;
  }
  .ac-page-header {
    border-bottom: 1px solid #ccc;
    padding: var(--space-4) 0;
  }
}

/* ============================================================
   ALIAS LEGACY — todas las cabeceras antiguas adoptan este look
   sin tener que reescribir cada página.
   ============================================================ */

/* Bootstrap 3 jumbotron como cabecera de página */
html body .jumbotron,
html body .jumbotronEDT,
html body .jumbotronACT {
  background-image: none;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: var(--space-8) var(--space-4);
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  html body .jumbotron,
  html body .jumbotronEDT,
  html body .jumbotronACT {
    padding: var(--space-10) var(--space-8);
  }
}

html body .jumbotron > .container,
html body .jumbotronEDT > .container,
html body .jumbotronACT > .container,
html body .jumbotron > .container-fluid,
html body .jumbotronEDT > .container-fluid {
  width: 100%;
  max-width: var(--container-2xl);
  padding-left: 0;
  padding-right: 0;
}

html body .jumbotron h1,
html body .jumbotronEDT h1,
html body .jumbotronACT h1,
html body .encabezado,
html body .cm-page-header h1,
html body h1.cp-titulo,
html body h2.cp-titulo,
html body h1.de-titulo,
html body h2.de-titulo,
html body h1.as-titulo,
html body h2.as-titulo,
html body h1.tc-titulo,
html body h2.tc-titulo,
html body h1.ew-titulo,
html body h2.ew-titulo,
html body h1.header-title,
html body h2.header-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  color: hsl(0 0% 10%) !important;
  margin: 0 !important;
  text-wrap: balance;
}

html body .cm-page-subtitle,
html body .cp-subtitulo,
html body .de-subtitulo,
html body .as-subtitulo,
html body .tc-subtitulo,
html body .ew-subtitulo,
html body .header-subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) !important;
  line-height: 1.6 !important;
  color: hsl(var(--foreground)) !important;
  max-width: 70ch;
  margin: var(--space-1) 0 0 !important;
  font-weight: 400 !important;
  text-transform: none;
  letter-spacing: 0;
}

/* Iconos legacy en títulos: ocultos para que el H1 quede limpio.
   Si quieres conservar uno, márcalo con .ac-page-icon. */
html body .cp-titulo > i:not(.ac-page-icon),
html body .de-titulo > i:not(.ac-page-icon),
html body .as-titulo > i:not(.ac-page-icon),
html body .tc-titulo > i:not(.ac-page-icon),
html body .ew-titulo > i:not(.ac-page-icon) {
  color: hsl(var(--foreground)) !important;
  font-size: 0.85em;
  margin-right: var(--space-2);
}

/* Buscador PNU header — mantiene espacios pero unifica tamaños */
html body .pnu-page-container > .header,
html body .pnu-page-container .pnu-header {
  background: transparent;
  border-bottom: 1px solid hsl(var(--border));
}

/* ── Hero brand — variantes legacy ──────────────────────────── */
html body .ac-page-hero,
html body section.ac-page-hero,
html body header.ac-page-hero {
  background: linear-gradient(
    135deg,
    hsl(var(--brand-deep)) 0%,
    hsl(var(--primary-active)) 100%
  );
  color: #fff;
  padding: var(--space-12) var(--space-4);
  border-bottom: none;
}

@media (min-width: 1024px) {
  html body .ac-page-hero {
    padding: var(--space-16) var(--space-8);
  }
}

html body .ac-page-hero h1 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 0 0 var(--space-2) !important;
}

html body .ac-page-hero .ac-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
}