/* Cabecera común de AgioTech Smart Ops (pieza C). Requiere /comun/tokens.css, que además trae las
   piezas compartidas con las páginas: .ag-organo-icono, .ag-contador, .ag-avatar, .ag-rol y .ag-cerrar.
   Todas las clases empiezan por .ag-cabecera para no chocar con Academia, O6 ni O7.
   Espacios solo de la escala 4, 8, 12, 16, 24, 32, 40 px. Ningún texto por debajo de 12 px.
   Lo visible es el estilo base: las animaciones solo adornan (si el navegador las pausa, todo se ve igual).
   Es autónoma: NO necesita comun/base.css, porque también se carga dentro de Riesgo operativo y Rutas
   inteligentes. Por eso conserva su esqueleto, su estado y su texto solo para lectores.
   Margen lateral: --ag-margen de tokens.css (16 / 24 / 40 px con cortes en 768 y 1024), el mismo de .ag-pagina.
   Ancho: .ag-cabecera--completo (por defecto) va de borde a borde; .ag-cabecera--contenido alinea su
   interior con .ag-pagina (1200 px centrados). Las páginas del acceso la montan en
   <div id="cabecera" class="ag-cabecera-hueco"> (base.css), que reserva el alto y queda fijo arriba. */

.ag-cabecera {
  position: sticky; top: 0; z-index: 300;
  height: var(--ag-cabecera-alto);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--ag-margen, 40px);
  background: var(--ag-superficie);
  border-bottom: 1px solid var(--ag-borde);
  font-family: var(--ag-fuente);
  font-size: 14px; line-height: 1.4; letter-spacing: normal; text-align: left;
  color: var(--ag-texto);
  box-sizing: border-box;
}
/* Reinicio con especificidad de UNA clase (0,1,0): gana a los selectores de etiqueta de O6/O7
   y pierde ante las clases propias de abajo, que van después. */
/* Interior alineado con .ag-pagina: en pantallas anchas el relleno crece hasta dejar 1200 px. */
.ag-cabecera--contenido {
  padding-left: max(var(--ag-margen, 40px), calc((100% - var(--ag-ancho-contenido, 1200px)) / 2));
  padding-right: max(var(--ag-margen, 40px), calc((100% - var(--ag-ancho-contenido, 1200px)) / 2));
}
.ag-cabecera *, .ag-cabecera *::before, .ag-cabecera *::after { box-sizing: border-box; }
.ag-cabecera :where(h2, h3, p, ul, li:not(.ag-rol), hr) { margin: 0; padding: 0; font-size: inherit; }
.ag-cabecera :where(ul) { list-style: none; }
/* Las piezas compartidas (tokens.css) van antes que esta hoja: el reinicio no las toca. */
.ag-cabecera :where(button:not(.ag-cerrar)) { font: inherit; color: inherit; margin: 0; text-transform: none; letter-spacing: inherit; }
.ag-cabecera :where(a) { color: inherit; text-decoration: none; }
.ag-cabecera [hidden] { display: none !important; }
.ag-cabecera__solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.ag-cabecera .ag-icono {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- izquierda: marca, miga y navegación */
.ag-cabecera__izquierda { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.ag-cabecera__marca { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; border-radius: var(--ag-r-s); }
/* Mismo recorte que .ag-isotipo--ficha de base.css (lado 40 px, símbolo al 68 %, centrado). */
.ag-cabecera__isotipo {
  --ag-isotipo-lado: 40px; --ag-isotipo-escala: .68;
  width: var(--ag-isotipo-lado); height: var(--ag-isotipo-lado); flex: 0 0 var(--ag-isotipo-lado); overflow: hidden;
  background: #383e4c; border-radius: 12px; box-shadow: var(--ag-sombra-marca);
}
.ag-cabecera__isotipo img {
  display: block; width: auto; max-width: none;
  height: calc(var(--ag-isotipo-lado) * 1.3286 * var(--ag-isotipo-escala));
  margin-top: calc(var(--ag-isotipo-lado) * (1 - var(--ag-isotipo-escala)) / 2 - var(--ag-isotipo-lado) * .1143 * var(--ag-isotipo-escala));
  margin-left: calc(var(--ag-isotipo-lado) * (1 - var(--ag-isotipo-escala)) / 2);
}
.ag-cabecera__nombre-marca { font-size: 15px; font-weight: 800; white-space: nowrap; }
.ag-cabecera__miga { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; color: var(--ag-texto-suave); font-weight: 600; }
.ag-cabecera__miga-separador { color: var(--ag-borde); font-weight: 400; font-size: 20px; line-height: 1; }
.ag-cabecera__miga-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-cabecera__nav { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; margin-left: 4px; }
.ag-cabecera__navegar {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--ag-borde); border-radius: var(--ag-r-pill);
  background: var(--ag-superficie); color: var(--ag-texto); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.ag-cabecera__navegar:hover { background: var(--ag-superficie-fuerte); }
.ag-cabecera__navegar .ag-icono { width: 18px; height: 18px; color: var(--ag-marca); }
.ag-cabecera__navegar-texto { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ag-cabecera__volver { max-width: 280px; flex: 0 1 auto; }
.ag-cabecera__inicio { flex: 0 0 auto; }

/* ---------- derecha: botones */
.ag-cabecera__derecha { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ag-cabecera__grupo { position: relative; display: flex; }

.ag-cabecera__boton-icono {
  position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ag-borde); border-radius: 12px;
  background: var(--ag-superficie); color: var(--ag-texto); cursor: pointer;
}
.ag-cabecera__boton-icono:hover, .ag-cabecera__boton-icono[aria-expanded="true"] { background: var(--ag-superficie-fuerte); }
.ag-cabecera__apps .ag-icono { stroke-width: 3.2; }
/* Contador de la campana: .ag-contador ag-contador--aro (tokens.css); aquí solo su sitio. */
.ag-cabecera__contador { position: absolute; top: -8px; right: -8px; }

.ag-cabecera__persona {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; height: 44px;
  padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: var(--ag-r-pill);
  background: transparent; cursor: pointer; text-align: left;
}
.ag-cabecera__persona:hover, .ag-cabecera__persona[aria-expanded="true"] { background: var(--ag-superficie-fuerte); border-color: var(--ag-borde); }
.ag-cabecera__textos { display: grid; min-width: 0; line-height: 1.25; }
.ag-cabecera__textos strong { font-size: 13px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cabecera__textos small { font-size: 12px; color: var(--ag-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cabecera__chevron.ag-icono { width: 16px; height: 16px; color: var(--ag-texto-suave); }
.ag-cabecera__persona[aria-expanded="true"] .ag-cabecera__chevron { transform: rotate(180deg); }

.ag-cabecera__marca:focus-visible, .ag-cabecera__navegar:focus-visible, .ag-cabecera__boton-icono:focus-visible,
.ag-cabecera__persona:focus-visible, .ag-cabecera__panel a:focus-visible, .ag-cabecera__panel button:focus-visible { outline: none; box-shadow: var(--ag-foco); }
.ag-cabecera__panel-titulo:focus { outline: none; }
.ag-cabecera__panel-titulo:focus-visible { outline: none; box-shadow: var(--ag-foco); border-radius: 4px; }

/* ---------- paneles: estilo base visible; una sola zona desplazable (el cuerpo) */
.ag-cabecera__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
  width: 380px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--ag-cabecera-alto) - 24px);
  max-height: calc(100dvh - var(--ag-cabecera-alto) - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ag-superficie); color: var(--ag-texto);
  border: 1px solid var(--ag-borde); border-radius: var(--ag-r-m);
  box-shadow: var(--ag-sombra-alta);
  animation: ag-cabecera-aparece 180ms ease-out;
}
.ag-cabecera__panel--persona { width: 320px; }
/* Solo desplaza: si la animación se pausa, el panel ya se ve entero (sin opacidad). */
@keyframes ag-cabecera-aparece { from { transform: translateY(-4px); } to { transform: none; } }

.ag-cabecera__panel-cabeza {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--ag-borde-suave);
}
.ag-cabecera__panel-cabeza--persona { justify-content: flex-start; padding: 16px 12px 16px 16px; }
.ag-cabecera__panel-cabeza--persona .ag-cabecera__panel-acciones { margin-left: auto; align-self: flex-start; }
.ag-cabecera__panel-titulo { font-size: 16px; font-weight: 800; line-height: 1.3; min-width: 0; }
.ag-cabecera__panel-acciones { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ag-cabecera__panel-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.ag-cabecera__panel-pie { flex: 0 0 auto; padding: 8px; border-top: 1px solid var(--ag-borde-suave); }
.ag-cabecera__nota { padding: 4px 8px; font-size: 12px; color: var(--ag-texto-suave); }

.ag-cabecera__boton-texto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 4px 12px;
  border: 1px solid var(--ag-borde); border-radius: var(--ag-r-pill); background: var(--ag-superficie);
  color: var(--ag-marca); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ag-cabecera__boton-texto .ag-icono { width: 16px; height: 16px; }
.ag-cabecera__boton-texto:hover:not(:disabled) { background: var(--ag-marca-suave); }
.ag-cabecera__boton-texto:disabled { color: var(--ag-texto-suave); cursor: default; }
.ag-cabecera__boton-texto--suave { color: var(--ag-texto); }

/* esqueleto (se pinta tras 150 ms sin respuesta; el hueco ya está reservado) */
.ag-cabecera__hueco { min-height: 160px; }
.ag-cabecera__esqueleto { display: grid; gap: 8px; padding: 8px; }
.ag-cabecera__esqueleto-fila { display: flex; align-items: center; gap: 12px; height: 44px; }
.ag-cabecera__esqueleto-cifra, .ag-cabecera__esqueleto-linea {
  display: block; border-radius: var(--ag-r-pill);
  background: linear-gradient(90deg, var(--ag-superficie-fuerte) 0%, var(--ag-borde-suave) 50%, var(--ag-superficie-fuerte) 100%);
  background-size: 200% 100%;
  animation: ag-cabecera-brillo 1.4s ease-in-out infinite;
}
.ag-cabecera__esqueleto-cifra { width: 32px; height: 28px; flex: 0 0 32px; }
.ag-cabecera__esqueleto-linea { height: 12px; flex: 1 1 auto; max-width: 240px; }
.ag-cabecera__esqueleto-fila:nth-child(2) .ag-cabecera__esqueleto-linea { max-width: 180px; }
@keyframes ag-cabecera-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* estados (vacío, tardando, sin aplicaciones) */
.ag-cabecera__estado { display: grid; justify-items: center; gap: 4px; padding: 24px 16px; text-align: center; }
.ag-cabecera__estado-icono.ag-icono { width: 32px; height: 32px; color: var(--ag-texto-suave); margin-bottom: 8px; }
.ag-cabecera__estado--listo .ag-cabecera__estado-icono { color: var(--ag-verde); }
.ag-cabecera__estado--aviso .ag-cabecera__estado-icono { color: var(--ag-ambar); }
.ag-cabecera__estado-titulo { font-size: 15px; font-weight: 800; }
.ag-cabecera__estado-texto { font-size: 13px; color: var(--ag-texto-suave); max-width: 300px; }
.ag-cabecera__estado-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.ag-cabecera__estado--compacto { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: 8px 12px; padding: 12px; margin-bottom: 8px; border-radius: var(--ag-r-s); background: var(--ag-ambar-suave); text-align: left; }
.ag-cabecera__estado--compacto .ag-cabecera__estado-icono { width: 20px; height: 20px; margin: 0; }
.ag-cabecera__estado--compacto .ag-cabecera__estado-titulo { font-size: 13px; }
.ag-cabecera__estado--compacto .ag-cabecera__estado-texto { grid-column: 2 / -1; }
.ag-cabecera__estado--compacto .ag-cabecera__estado-acciones { margin: 0; grid-column: 3; grid-row: 1; }

/* avisos */
.ag-cabecera__avisos-grupo + .ag-cabecera__avisos-grupo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ag-borde-suave); }
.ag-cabecera__avisos-organo { padding: 8px 8px 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ag-texto-suave); }
.ag-cabecera__aviso { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: var(--ag-r-s); font-size: 14px; }
a.ag-cabecera__aviso:hover { background: var(--ag-superficie-fuerte); }
.ag-cabecera__aviso-cifra {
  min-width: 32px; height: 28px; padding: 0 8px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--ag-r-pill); background: var(--ag-marca-suave); color: var(--ag-marca); font-size: 13px; font-weight: 800;
}
.ag-cabecera__aviso-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.ag-cabecera__aviso-titulo { font-weight: 650; overflow-wrap: anywhere; }
.ag-cabecera__aviso-destino { font-size: 12px; color: var(--ag-texto-suave); }
.ag-cabecera__aviso-detalle { font-size: 13px; color: var(--ag-texto-suave); }
.ag-cabecera__aviso-flecha.ag-icono { width: 16px; height: 16px; color: var(--ag-texto-suave); }
.ag-cabecera__aviso-icono.ag-icono { align-self: flex-start; margin: 4px; }
.ag-cabecera__aviso--nota { color: var(--ag-texto-suave); }
.ag-cabecera__aviso--error { flex-wrap: wrap; background: var(--ag-ambar-suave); color: var(--ag-texto); }
.ag-cabecera__aviso--error .ag-cabecera__aviso-icono { color: var(--ag-ambar); }
.ag-cabecera__aviso--error strong { font-weight: 750; }
.ag-cabecera__aviso-accion { margin-left: 40px; }

/* conmutador de aplicaciones */
.ag-cabecera__apps-lista { display: grid; gap: 4px; }
.ag-cabecera__app { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: var(--ag-r-s); font-weight: 700; }
.ag-cabecera__app:hover { background: var(--ag-superficie-fuerte); }
.ag-cabecera__app[aria-current="page"] { background: var(--ag-marca-suave); }
/* El icono es .ag-organo-icono ag-organo-icono--medio con el color del órgano (tokens.css). */
.ag-cabecera__app-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cabecera__app-extra { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ag-cabecera__app-aqui { font-size: 12px; font-weight: 700; color: var(--ag-marca); }

/* persona */
.ag-cabecera__ficha-textos { min-width: 0; display: grid; gap: 4px; }
/* En el panel el nombre y el rol completos saltan de línea: en pantallas táctiles no hay título emergente. */
.ag-cabecera__ficha-textos .ag-cabecera__panel-titulo { overflow-wrap: anywhere; }
.ag-cabecera__ficha-rol { font-size: 13px; color: var(--ag-texto-suave); overflow-wrap: anywhere; }
.ag-cabecera__bloque { padding: 8px 8px 12px; }
.ag-cabecera__bloque-titulo { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ag-texto-suave); margin-bottom: 8px; }
.ag-cabecera__roles { display: flex; flex-wrap: wrap; gap: 8px; }   /* cada rol es una .ag-rol */
.ag-cabecera__separador { border: 0; border-top: 1px solid var(--ag-borde); margin: 4px 0; }

.ag-cabecera__opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: var(--ag-r-s); background: transparent;
  font-size: 14px; font-weight: 650; text-align: left; cursor: pointer;
}
.ag-cabecera__opcion:hover:not(:disabled) { background: var(--ag-superficie-fuerte); }
.ag-cabecera__opcion-icono { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; }
.ag-cabecera__opcion--salir { color: var(--ag-rojo); }
.ag-cabecera__opcion--salir:disabled { color: var(--ag-texto-suave); cursor: progress; }
.ag-cabecera__girando { animation: ag-cabecera-gira 1s linear infinite; }
@keyframes ag-cabecera-gira { to { transform: rotate(360deg); } }

.ag-cabecera__temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--ag-r-s); background: var(--ag-superficie-fuerte); }
.ag-cabecera__tema {
  display: grid; justify-items: center; gap: 4px; min-height: 52px; padding: 4px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-size: 12px; font-weight: 700; color: var(--ag-texto-suave); cursor: pointer;
}
.ag-cabecera__tema:hover { color: var(--ag-texto); }
.ag-cabecera__tema[aria-pressed="true"] { background: var(--ag-superficie); color: var(--ag-texto); border-color: var(--ag-borde); box-shadow: var(--ag-sombra); }
.ag-cabecera__error { display: grid; gap: 8px; justify-items: start; margin: 4px 8px 8px; padding: 12px; border-radius: var(--ag-r-s); background: var(--ag-rojo-suave); color: var(--ag-texto); font-size: 13px; }

/* ---------- anchos */
@media (max-width: 1200px) {
  .ag-cabecera--con-navegacion .ag-cabecera__miga { display: none; }
}
@media (max-width: 1023px) {
  .ag-cabecera--con-navegacion .ag-cabecera__nombre-marca { display: none; }
  .ag-cabecera__persona { max-width: 200px; }
  .ag-cabecera__miga { display: none; }
}
/* Móvil: los paneles son una hoja a todo el ancho bajo la cabecera. */
@media (max-width: 767px) {
  .ag-cabecera { gap: 8px; }
  .ag-cabecera__izquierda { gap: 8px; }
  .ag-cabecera__nav { margin-left: 0; }
  .ag-cabecera__navegar { width: 44px; height: 44px; padding: 0; justify-content: center; flex: 0 0 44px; }
  .ag-cabecera__navegar-texto { display: none; }
  .ag-cabecera__textos, .ag-cabecera__chevron.ag-icono { display: none; }
  .ag-cabecera__persona { padding: 4px; }
  .ag-cabecera__grupo { position: static; }
  .ag-cabecera__panel {
    position: fixed; top: var(--ag-cabecera-alto); left: 0; right: 0; width: auto; max-width: none;
    max-height: calc(100vh - var(--ag-cabecera-alto)); max-height: calc(100dvh - var(--ag-cabecera-alto));
    border-radius: 0 0 var(--ag-r-m) var(--ag-r-m); border-left: 0; border-right: 0;
  }
}
@media (max-width: 480px) {
  .ag-cabecera__nombre-marca { display: none; }
}
@media (max-width: 374px) {
  .ag-cabecera, .ag-cabecera--contenido { gap: 4px; }
  .ag-cabecera__izquierda, .ag-cabecera__nav, .ag-cabecera__derecha { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-cabecera__panel, .ag-cabecera__girando, .ag-cabecera__esqueleto-cifra, .ag-cabecera__esqueleto-linea { animation: none; }
}
@media (forced-colors: active) {
  .ag-cabecera__aviso-cifra { border: 1px solid CanvasText; }
}

/* ---------- variante «accesos»: solo aplicaciones y avisos, dentro de la barra o del riel de un órgano.
   No trae barra propia (ni alto, ni fondo, ni borde): el órgano decide dónde va y, si quiere, cambia los
   colores redefiniendo las variables --ag-* en el contenedor donde la monta. */
.ag-cabecera--accesos {
  position: relative; top: auto; z-index: 5;
  display: inline-flex; height: auto; padding: 0; gap: 0;
  background: transparent; border: 0;
}
.ag-cabecera--accesos.ag-cabecera--columna .ag-cabecera__derecha { flex-direction: column; }
/* Panel a la derecha del botón y creciendo hacia arriba: para botones al pie de un riel lateral. */
.ag-cabecera--accesos.ag-cabecera--panel-lado .ag-cabecera__panel {
  top: auto; bottom: 0; right: auto; left: calc(100% + 12px);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
}
.ag-cabecera--accesos.ag-cabecera--panel-abajo .ag-cabecera__panel {
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
}
@media (max-width: 767px) {
  .ag-cabecera--accesos .ag-cabecera__panel,
  .ag-cabecera--accesos.ag-cabecera--panel-lado .ag-cabecera__panel {
    position: fixed; top: 8px; bottom: auto; left: 8px; right: 8px; width: auto; max-width: none;
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    border: 1px solid var(--ag-borde); border-radius: var(--ag-r-m);
  }
}