/* ==========================================================================
   APOLO SERVICES — Capa Responsive
   Fase 3 · Anexo B · Panoramas DMKT · 28 de julio de 2026

   Implementa los patrones P-1 … P-10 de `Apolo_Anexo_B_Especificacion_Responsive.md`
   sobre Bootstrap 5.3.x.

   ORDEN DE CARGA (obligatorio):
     1. bootstrap.min.css
     2. apolo-tokens.css
     3. apolo-responsive.css   <- este archivo

   PRINCIPIO RECTOR: ninguna regla de este archivo debe producir efecto por
   encima de 992 px salvo donde la especificación lo indica explícitamente.
   El escritorio ya está aprobado por el cliente y no debe sufrir regresiones.
   Por eso casi todo aquí vive dentro de una consulta de medios con `max-width`.

   Breakpoints usados — son los NATIVOS de Bootstrap 5.3, sin personalizar:
     móvil     < 768px    (xs, sm)
     tablet    768–991px  (md)
     escritorio ≥ 992px   (lg, xl, xxl)
   ========================================================================== */


/* ==========================================================================
   0. SHELL — Header (O01), Sidebar (O02), Footer (O03)
   Anexo B §4
   ========================================================================== */

body {
  font-family: var(--apolo-font-family);
  font-size: var(--apolo-text-base);
  color: var(--apolo-text-color-primary);
  background: var(--apolo-surface-app-bg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.apolo-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--apolo-layout-header-height);
  z-index: var(--apolo-z-header);
  background: var(--apolo-surface-header);
  color: var(--apolo-text-color-on-primary);
  display: flex;
  align-items: center;
  gap: var(--apolo-space-3);
  padding-inline: var(--apolo-space-4);
}

.apolo-header__marca { display: flex; align-items: center; gap: var(--apolo-space-2); flex-shrink: 0; }
.apolo-header__logotipo { font-weight: var(--apolo-font-bold); letter-spacing: .5px; }

/* El buscador global vive centrado y limitado a 400px en escritorio. */
.apolo-header__buscador { flex: 1; max-width: 400px; margin-inline: auto; }

.apolo-header__acciones { display: flex; align-items: center; gap: var(--apolo-space-2); margin-left: auto; }

.apolo-header__btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--apolo-radius-md);
  background: rgba(255,255,255,.1);
  color: #fff;
  transition: var(--apolo-transition-color);
}
.apolo-header__btn:hover { background: rgba(255,255,255,.2); }

.apolo-header__separador { width: 1px; height: 24px; background: rgba(255,255,255,.3); }

.apolo-header__avatar { width: 32px; height: 32px; border-radius: var(--apolo-radius-full); object-fit: cover; }

/* El botón de hamburguesa y el de lupa NO existen en escritorio.
   OJO: la hamburguesa se muestra hasta 1199px, no solo por debajo de 768.
   Entre 768 y 1199 el sidebar está colapsado a 64px y `.offcanvas-md` ya es
   inerte, de modo que sin este control no habría forma de ver los rótulos. */
.apolo-header__menu,
.apolo-header__lupa { display: none; }

@media (max-width: 1199.98px) {
  .apolo-header__menu { display: inline-flex; }
}

/* Alternador de escritorio: el chevron del borde del sidebar. */
.apolo-sidebar__toggle {
  display: none;
  position: absolute; top: var(--apolo-space-2); right: var(--apolo-space-2);
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border: 0; border-radius: var(--apolo-radius-md);
  background: rgba(255,255,255,.1); color: #fff;
}
@media (min-width: 1200px) {
  .apolo-sidebar__toggle { display: inline-flex; }
  .apolo-sidebar.is-colapsado .apolo-sidebar__toggle { position: static; margin: var(--apolo-space-2) auto; }
  .apolo-sidebar.is-colapsado .apolo-sidebar__toggle i { transform: rotate(180deg); }
}

/* Buscador expandido a pantalla completa en móvil/tablet (§4.1).
   Se activa añadiendo `.is-abierto` al header. */
.apolo-header__buscador-movil {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--apolo-surface-header);
  align-items: center;
  gap: var(--apolo-space-2);
  padding-inline: var(--apolo-space-3);
  z-index: 1;
}
.apolo-header.is-abierto .apolo-header__buscador-movil { display: flex; }

/* ── Tablet: 768–991 ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* El buscador global se colapsa a un ícono de lupa. */
  .apolo-header__buscador { display: none; }
  .apolo-header__lupa { display: inline-flex; }
  /* El nombre de usuario ya está oculto por debajo de lg en el diseño aprobado. */
  .apolo-header__usuario-nombre { display: none; }
}

/* ── Móvil: < 768 ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .apolo-header { padding-inline: var(--apolo-space-2); gap: var(--apolo-space-1); }
  .apolo-header__menu { display: inline-flex; }
  /* Solo isotipo: se retira el logotipo textual. */
  .apolo-header__logotipo { display: none; }
  /* El engrane sale del header; ya está duplicado en el menú del avatar. */
  .apolo-header__config { display: none; }
}


/* ── Sidebar ────────────────────────────────────────────────────────────── */
/*
   Se apoya en `.offcanvas-md` de Bootstrap: cajón por debajo de 768px,
   bloque estático de 768px en adelante. Un solo árbol de navegación,
   sin marcado duplicado (Anexo B §7.2).
*/

.apolo-sidebar {
  background: var(--apolo-surface-sidebar);
  color: #fff;
  --bs-offcanvas-width: 280px;   /* ancho del cajón en móvil */
  --bs-offcanvas-bg: var(--apolo-surface-sidebar);
  --bs-offcanvas-color: #fff;
}

.apolo-sidebar__enlace {
  display: flex; align-items: center; gap: var(--apolo-space-3);
  min-height: 44px;
  padding: var(--apolo-space-2) var(--apolo-space-4);
  /* .92 y no .85: sobre el navy #194270, el valor anterior se queda por debajo
     del contraste 4.5:1 exigido para texto normal. */
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
  transition: var(--apolo-transition-color);
}
.apolo-sidebar__enlace:hover { background: var(--apolo-surface-sidebar-hover); color: #fff; }
.apolo-sidebar__enlace.is-activo {
  background: var(--apolo-surface-sidebar-active);
  border-left-color: var(--apolo-color-accent);
  color: #fff;
  font-weight: var(--apolo-font-semibold);
}
.apolo-sidebar__icono { flex-shrink: 0; width: 20px; text-align: center; font-size: 18px; }
.apolo-sidebar__badge { margin-left: auto; flex-shrink: 0; }
.apolo-sidebar__grupo {
  padding: var(--apolo-space-4) var(--apolo-space-4) var(--apolo-space-1);
  font-size: var(--apolo-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
}

/* Tablet y escritorio: bloque estático fijo bajo el header. */
@media (min-width: 768px) {
  .apolo-sidebar {
    position: fixed;
    top: var(--apolo-layout-header-height);
    bottom: 0; left: 0;
    z-index: var(--apolo-z-sidebar);
    overflow-y: auto;
    transition: var(--apolo-layout-sidebar-transition);
  }
}

/* Tablet 768–991: colapsado a 64px, fijo.
   Al abrirlo NO empuja el contenido: se superpone con velo (§4.2). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .apolo-sidebar { width: var(--apolo-layout-sidebar-width-collapsed); }
  .apolo-sidebar .apolo-sidebar__texto,
  .apolo-sidebar .apolo-sidebar__grupo { display: none; }
  .apolo-sidebar__enlace { justify-content: center; padding-inline: 0; }
  /* El conteo se conserva en el rail de 64px — no se degrada a un punto:
     perder la cifra es perder justamente la información que da el badge. */
  .apolo-sidebar__badge {
    position: absolute; top: 4px; right: 4px; margin: 0;
    font-size: 9px; line-height: 1; padding: 3px 4px;
  }
  .apolo-sidebar__enlace { position: relative; }

  /* Estado superpuesto: `.is-desplegado` sobre el sidebar. */
  .apolo-sidebar.is-desplegado { width: var(--apolo-layout-sidebar-width); box-shadow: var(--apolo-shadow-xl); }
  .apolo-sidebar.is-desplegado .apolo-sidebar__texto,
  .apolo-sidebar.is-desplegado .apolo-sidebar__grupo { display: block; }
  .apolo-sidebar.is-desplegado .apolo-sidebar__enlace { justify-content: flex-start; padding-inline: var(--apolo-space-4); }
  .apolo-sidebar.is-desplegado .apolo-sidebar__badge { position: static; margin-left: auto; font-size: var(--apolo-text-xs); }
}

/* Escritorio ≥1200: expandido a 260px por defecto. */
@media (min-width: 1200px) {
  .apolo-sidebar { width: var(--apolo-layout-sidebar-width); }
  .apolo-sidebar.is-colapsado { width: var(--apolo-layout-sidebar-width-collapsed); }
  .apolo-sidebar.is-colapsado .apolo-sidebar__texto,
  .apolo-sidebar.is-colapsado .apolo-sidebar__grupo { display: none; }
  .apolo-sidebar.is-colapsado .apolo-sidebar__enlace { justify-content: center; padding-inline: 0; }
}

/* Velo del sidebar superpuesto en tablet. */
.apolo-velo {
  position: fixed; inset: 0;
  background: var(--apolo-bg-overlay);
  z-index: calc(var(--apolo-z-sidebar) - 1);
  display: none;
}
.apolo-velo.is-visible { display: block; }
@media (max-width: 767.98px), (min-width: 1200px) { .apolo-velo { display: none !important; } }


/* ── Área de contenido ──────────────────────────────────────────────────── */

.apolo-contenido {
  padding-top: var(--apolo-layout-header-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.apolo-contenido__interior { flex: 1; padding: var(--apolo-space-6); }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .apolo-contenido { margin-left: var(--apolo-layout-sidebar-width-collapsed); }
}
@media (min-width: 1200px) {
  .apolo-contenido { margin-left: var(--apolo-layout-sidebar-width); transition: var(--apolo-layout-sidebar-transition); }
  .apolo-contenido.is-sidebar-colapsado { margin-left: var(--apolo-layout-sidebar-width-collapsed); }
}
@media (max-width: 767.98px) {
  .apolo-contenido__interior { padding: var(--apolo-space-4) var(--apolo-space-3); }
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.apolo-footer {
  background: var(--apolo-surface-footer);
  color: rgba(255,255,255,.7);
  font-size: var(--apolo-text-sm);
  padding: var(--apolo-space-4) var(--apolo-space-6);
  display: flex; align-items: center; gap: var(--apolo-space-4);
}
.apolo-footer__legales { margin-inline: auto; display: flex; gap: var(--apolo-space-2); flex-wrap: wrap; justify-content: center; }
.apolo-footer__redes { display: flex; gap: var(--apolo-space-2); }
.apolo-footer a { color: rgba(255,255,255,.7); text-decoration: none; transition: var(--apolo-transition-color); }
.apolo-footer a:hover { color: var(--apolo-color-primary); }

/* Móvil: tres filas apiladas y centradas, con lo accionable primero (§4.3). */
@media (max-width: 767.98px) {
  .apolo-footer { flex-direction: column; text-align: center; gap: var(--apolo-space-3); }
  .apolo-footer__redes  { order: 1; gap: var(--apolo-space-2); }
  .apolo-footer__legales { order: 2; margin-inline: 0; }
  .apolo-footer__copy   { order: 3; font-size: var(--apolo-text-xs); }
  .apolo-footer__redes a {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}


/* ==========================================================================
   P-1 · TABLA A LISTA DE TARJETAS (móvil)
   Anexo B §5 · P-1
   --------------------------------------------------------------------------
   USO — marcar la tabla con `.apolo-tabla-cards` y etiquetar cada celda con
   el atributo `data-zona`:

     <td data-zona="titulo">      identificador de la fila
     <td data-zona="estado">      badge (opcional)
     <td data-zona="contexto">    una columna de contexto
     <td data-zona="meta" data-rotulo="Fecha">   hasta TRES
     <td data-zona="acciones">    menú de tres puntos

   Las celdas SIN `data-zona` desaparecen en móvil por diseño: se consultan
   entrando al detalle. No se comprimen ni se abrevian.
   ========================================================================== */

@media (max-width: 767.98px) {
  .apolo-tabla-cards,
  .apolo-tabla-cards > tbody { display: block; width: 100%; }

  .apolo-tabla-cards > thead { display: none; }

  .apolo-tabla-cards > tbody > tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--apolo-space-1) var(--apolo-space-3);
    background: var(--apolo-surface-card);
    border: 1px solid var(--apolo-border-color-subtle);
    border-radius: var(--apolo-radius-lg);
    box-shadow: var(--apolo-shadow-sm);
    padding: 14px 16px;
    margin-bottom: var(--apolo-space-3);
  }

  .apolo-tabla-cards > tbody > tr > td {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;
  }

  /* Celda no mapeada: fuera de la tarjeta. */
  .apolo-tabla-cards > tbody > tr > td:not([data-zona]) { display: none; }

  .apolo-tabla-cards td[data-zona="titulo"] {
    grid-column: 1; grid-row: 1;
    font-size: var(--apolo-text-base);
    font-weight: var(--apolo-font-semibold);
    color: var(--apolo-text-color-primary);
    line-height: var(--apolo-leading-tight);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .apolo-tabla-cards td[data-zona="estado"] {
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: start;
  }

  .apolo-tabla-cards td[data-zona="contexto"] {
    grid-column: 1 / -1;
    font-size: var(--apolo-text-sm);
    color: var(--apolo-text-color-secondary);
    margin-bottom: var(--apolo-space-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Los metadatos fluyen en dos columnas por colocación automática. */
  .apolo-tabla-cards td[data-zona="meta"] {
    font-size: var(--apolo-text-sm);
    color: var(--apolo-text-color-primary);
  }
  .apolo-tabla-cards td[data-zona="meta"]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: var(--apolo-text-xs);
    font-weight: var(--apolo-font-medium);
    color: var(--apolo-text-color-tertiary);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .apolo-tabla-cards td[data-zona="acciones"] {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: var(--apolo-space-1);
  }

  /* La tarjeta completa es la acción primaria. */
  .apolo-tabla-cards > tbody > tr[data-destino] { cursor: pointer; }
  .apolo-tabla-cards > tbody > tr[data-destino]:active { background: var(--apolo-n50); }

  /* Casilla de selección múltiple: a la izquierda, fuera de la rejilla. */
  .apolo-tabla-cards td[data-zona="seleccion"] {
    display: block;
    grid-column: 1 / -1; grid-row: 1;
    justify-self: start;
    margin-bottom: var(--apolo-space-1);
  }

  /* Sin bordes de tabla heredados de Bootstrap. */
  .apolo-tabla-cards.table > :not(caption) > * > * { box-shadow: none; }
}


/* ==========================================================================
   P-2 · TABLA CON DESPLAZAMIENTO HORIZONTAL Y PRIMERA COLUMNA FIJA (tablet)
   Anexo B §5 · P-2
   USO — envolver en `.apolo-scroll-x` y marcar la tabla con `.apolo-tabla-fija`.
   ========================================================================== */

.apolo-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 768px) and (max-width: 991.98px) {
  .apolo-tabla-fija { min-width: 780px; }   /* fuerza el desplazamiento */

  /* Fondos explícitos: `background: inherit` no basta con filas alternas. */
  .apolo-tabla-fija > tbody > tr { background: var(--apolo-surface-card); }
  .apolo-tabla-fija > tbody > tr:nth-of-type(even) { background: var(--apolo-n50); }

  .apolo-tabla-fija > thead > tr > th:first-child,
  .apolo-tabla-fija > tbody > tr > td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: inherit;
    box-shadow: 2px 0 4px rgba(15,25,35,.06);
  }
  .apolo-tabla-fija > thead > tr > th:first-child { background: var(--apolo-n100); z-index: 3; }

  /* Cabecera fija en vertical dentro del contenedor. */
  .apolo-tabla-fija > thead > tr > th { position: sticky; top: 0; z-index: 1; background: var(--apolo-n100); }

  /* El desplazamiento debe ser descubrible: se deja ver el borde siguiente. */
  .apolo-scroll-x { padding-right: var(--apolo-space-6); }
}


/* ==========================================================================
   P-3 · ACCIONES DE FILA SIEMPRE VISIBLES (< 992)
   Anexo B §5 · P-3
   En escritorio las acciones se revelan al pasar el cursor; por debajo de
   992px el `hover` no existe como canal y deben ser permanentes.
   ========================================================================== */

.apolo-acciones-fila { opacity: 0; transition: opacity 150ms ease; }
tr:hover .apolo-acciones-fila,
tr:focus-within .apolo-acciones-fila { opacity: 1; }

@media (max-width: 991.98px) {
  .apolo-acciones-fila { opacity: 1 !important; }
}


/* ==========================================================================
   P-4 · PANEL DE FILTROS (< 992)
   Anexo B §5 · P-4
   El disparador y el panel; el buscador en tiempo real queda FUERA del panel
   y permanece siempre visible sobre la lista.
   ========================================================================== */

.apolo-filtros-disparador { display: none; }

@media (max-width: 991.98px) {
  .apolo-filtros-escritorio { display: none !important; }
  .apolo-filtros-disparador {
    display: flex; align-items: center; justify-content: center;
    gap: var(--apolo-space-2);
    width: 100%; min-height: 44px;
  }
}

/* Hoja inferior en móvil / cajón lateral en tablet. */
.apolo-filtros-panel .offcanvas-body { padding-bottom: 84px; }
.apolo-filtros-panel__pie {
  position: absolute; inset: auto 0 0 0;
  padding: var(--apolo-space-3) var(--apolo-space-4);
  background: var(--apolo-surface-card);
  border-top: 1px solid var(--apolo-border-color-subtle);
  display: flex; gap: var(--apolo-space-3); align-items: center;
}
@media (max-width: 767.98px) {
  .apolo-filtros-panel.offcanvas-bottom { max-height: 85vh; height: auto; border-radius: var(--apolo-radius-xl) var(--apolo-radius-xl) 0 0; }
}

/* Chips de filtro aplicado, visibles sin abrir el panel. */
.apolo-chips { display: flex; flex-wrap: wrap; gap: var(--apolo-space-2); }
.apolo-chip {
  display: inline-flex; align-items: center; gap: var(--apolo-space-1);
  padding: 4px 8px 4px 12px;
  background: var(--apolo-color-primary-light);
  color: var(--apolo-color-primary-dark);
  border: 0; border-radius: var(--apolo-radius-full);
  font-size: var(--apolo-text-sm);
}


/* ==========================================================================
   P-5 · TIRA DESPLAZABLE HORIZONTAL PARA TABS Y PILLS (< 992)
   Anexo B §5 · P-5
   USO — `.apolo-tira` en el contenedor envolvente, `.apolo-tira__pista` en el
   `.nav`. El degradado del borde derecho lo activa el JS (`is-desbordada`):
   es la única señal de que hay más tabs y sin ella el patrón falla en silencio.
   ========================================================================== */

.apolo-tira { position: relative; }

@media (max-width: 991.98px) {
  .apolo-tira__pista {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .apolo-tira__pista::-webkit-scrollbar { display: none; }

  .apolo-tira__pista > .nav-item,
  .apolo-tira__pista > .nav-link { flex: 0 0 auto; scroll-snap-align: start; }

  .apolo-tira__pista .nav-link {
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding-inline: var(--apolo-space-4);
  }

  .apolo-tira.is-desbordada::after {
    content: "";
    position: absolute; inset: 0 0 0 auto;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--apolo-surface-app-bg));
  }
}


/* ==========================================================================
   P-6 · FORMULARIOS DE DOS COLUMNAS A UNA COLUMNA
   Anexo B §5 · P-6
   El caso general se resuelve con las utilidades nativas:
       <div class="row row-cols-1 row-cols-md-2 g-3">
   Aquí solo van las EXCEPCIONES especificadas.
   ========================================================================== */

/* Pares cortos y semánticamente unidos: conservan 2 columnas también en móvil.
   (CP/Estado · Fecha inicio/fin · Hora inicio/fin · Horas/Minutos) */
.apolo-par-corto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--apolo-space-3); }

/* Identificadores fiscales: ancho completo y monoespaciada, siempre. */
.apolo-campo-fiscal { grid-column: 1 / -1; }
.apolo-campo-fiscal .form-control { font-family: var(--apolo-font-mono); text-transform: uppercase; }


/* ==========================================================================
   P-7 · LAYOUTS PARTIDOS A APILADOS (< 992)
   Anexo B §5 · P-7
   El orden de apilado es una decisión de contenido. Donde el panel debe ir
   primero se usa `.apolo-split__panel--primero`, que emplea el orden del grid
   para NO romper la correspondencia entre orden del DOM y orden de tabulación
   más de lo imprescindible (§7.3).
   ========================================================================== */

.apolo-split { display: grid; gap: var(--apolo-space-6); }
.apolo-split--380 { grid-template-columns: 1fr 380px; }
.apolo-split--320 { grid-template-columns: 1fr 320px; }
.apolo-split--280 { grid-template-columns: 1fr 280px; }
.apolo-split--260 { grid-template-columns: 1fr 260px; }

/* Tablet: se conservan los paneles de 260–320px (queda ≥380px de principal);
   el de 380px se apila. */
@media (max-width: 991.98px) {
  .apolo-split--380 { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .apolo-split { grid-template-columns: 1fr !important; gap: var(--apolo-space-4); }
  .apolo-split__panel--primero { order: -1; }
}


/* ==========================================================================
   P-8 · BARRA DE ACCIONES MASIVAS FIJA (< 992)
   Anexo B §5 · P-8
   ========================================================================== */

.apolo-barra-masiva {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--apolo-z-dropdown);
  display: none;
  align-items: center; gap: var(--apolo-space-3);
  padding: var(--apolo-space-3) var(--apolo-space-4);
  background: var(--apolo-color-primary-navy);
  color: #fff;
  box-shadow: 0 -4px 16px rgba(15,25,35,.16);
}
.apolo-barra-masiva.is-activa { display: flex; }
.apolo-barra-masiva__conteo { font-weight: var(--apolo-font-semibold); }

/* La última fila no debe quedar tapada por la barra. */
.apolo-lista.tiene-barra-masiva { padding-bottom: 76px; }

@media (min-width: 992px) {
  .apolo-barra-masiva { position: static; display: flex; border-radius: var(--apolo-radius-lg); box-shadow: none; }
  .apolo-barra-masiva:not(.is-activa) { display: none; }
  .apolo-lista.tiene-barra-masiva { padding-bottom: 0; }
}


/* ==========================================================================
   P-9 · MODALES A PANTALLA COMPLETA (móvil)
   Anexo B §5 · P-9
   El caso base lo resuelve `.modal-fullscreen-sm-down` de Bootstrap.
   Aquí solo la acción de confirmación fija al pie y el progreso del asistente.
   ========================================================================== */

@media (max-width: 767.98px) {
  .modal-fullscreen-sm-down .modal-footer {
    position: sticky; bottom: 0;
    background: var(--apolo-surface-card);
    border-top: 1px solid var(--apolo-border-color-subtle);
  }
  .modal-fullscreen-sm-down .modal-footer .btn { flex: 1; min-height: 48px; }
  /* El cierre va a la izquierda en móvil (patrón de navegación, no de diálogo). */
  .modal-fullscreen-sm-down .modal-header { flex-direction: row-reverse; justify-content: flex-end; gap: var(--apolo-space-3); }
  .modal-fullscreen-sm-down .modal-header .btn-close { margin: 0; }
}

.apolo-asistente__progreso {
  font-size: var(--apolo-text-sm);
  color: var(--apolo-text-color-secondary);
}


/* ==========================================================================
   P-10 · DOCUMENTOS LARGOS CON ÍNDICE DE SECCIONES
   Anexo B §5 · P-10
   Reporte Krypto (6 505 px) y Reporte Retroactivo (4 349 px).
   ========================================================================== */

.apolo-indice-movil { display: none; }

@media (max-width: 991.98px) {
  .apolo-indice-movil {
    display: flex; align-items: center; gap: var(--apolo-space-2);
    position: sticky; top: var(--apolo-layout-header-height);
    z-index: calc(var(--apolo-z-header) - 1);
    width: 100%;
    padding: var(--apolo-space-3) var(--apolo-space-4);
    background: var(--apolo-surface-card);
    border-bottom: 1px solid var(--apolo-border-color);
    font-size: var(--apolo-text-sm);
    font-weight: var(--apolo-font-semibold);
    color: var(--apolo-text-color-primary);
  }
  .apolo-indice-escritorio { display: none; }
}

.apolo-volver-arriba {
  position: fixed; right: var(--apolo-space-4); bottom: var(--apolo-space-6);
  z-index: var(--apolo-z-dropdown);
  width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  border: 0; border-radius: var(--apolo-radius-full);
  background: var(--apolo-color-primary); color: #fff;
  box-shadow: var(--apolo-shadow-lg);
}
.apolo-volver-arriba.is-visible { display: flex; }


/* ==========================================================================
   TRANSVERSAL · Zonas táctiles de 44 px (< 992)
   Anexo B §3.1
   Amplía el área activa SIN cambiar el tamaño visual del ícono, para no
   alterar la identidad visual aprobada.
   ========================================================================== */

@media (max-width: 991.98px) {
  .apolo-toque { position: relative; }
  .apolo-toque::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Casillas y controles de formulario en listas. */
  .apolo-tabla-cards .form-check-input,
  .apolo-tabla-fija  .form-check-input { width: 20px; height: 20px; }

  /* Acción principal de pantalla: ancho completo y 48 px de alto. */
  .apolo-cta-principal { width: 100%; min-height: 48px; }
}


/* ==========================================================================
   TRANSVERSAL · Cuerpo de documento legal (Anexo B §6.7)
   Única excepción tipográfica del anexo.
   ========================================================================== */

@media (max-width: 767.98px) {
  .apolo-doc-legal { font-size: 1rem; line-height: var(--apolo-leading-relaxed); }
}


/* ==========================================================================
   TRANSVERSAL · Preferencia de movimiento reducido (Anexo B §7.4)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   PATRONES ESPECÍFICOS DE MÓDULO
   Los tres casos que no se resuelven con los patrones generales P-1…P-10.
   ========================================================================== */

/* ── Alertas Apolo · §6.3 ───────────────────────────────────────────────── */

/* Barra de progreso de revisión: fija bajo el header en móvil y tablet.
   Es el antídoto a la parálisis que produce la cifra de 27 018. */
.apolo-progreso-revision {
  background: var(--apolo-surface-card);
  border: 1px solid var(--apolo-border-color-subtle);
  border-radius: var(--apolo-radius-lg);
  padding: var(--apolo-space-3) var(--apolo-space-4);
}
@media (max-width: 991.98px) {
  .apolo-progreso-revision {
    position: sticky;
    top: var(--apolo-layout-header-height);
    z-index: calc(var(--apolo-z-header) - 1);
    border-radius: 0;
    border-inline: 0;
    margin-inline: calc(-1 * var(--apolo-space-3));
  }
}

/* Encabezado del grupo fijo mientras se recorre su contenido. */
@media (max-width: 991.98px) {
  .apolo-grupo-alertas > .accordion-header {
    position: sticky;
    top: calc(var(--apolo-layout-header-height) + 52px);
    z-index: 2;
  }
}

/* No leída: negrita + punto rojo. Leída: regular, sin punto. */
.apolo-alerta--no-leida td[data-zona="titulo"],
.apolo-alerta--no-leida > td:nth-child(2) { font-weight: var(--apolo-font-bold); }

.apolo-punto-no-leida {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: var(--apolo-space-2);
  border-radius: var(--apolo-radius-full);
  background: var(--apolo-color-danger);
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .apolo-punto-no-leida { width: 10px; height: 10px; }
}


/* ── Timebilling · §6.8 ─────────────────────────────────────────────────── */

/* Calendario: la rejilla sigue siendo `repeat(7, 1fr)` en las TRES bandas.
   Lo que cambia es el contenido de la celda — en móvil, número del día más
   hasta 3 puntos de color; al pulsar un día se abre su agenda. */
.apolo-calendario__cabecera,
.apolo-calendario__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }

.apolo-calendario__cabecera > span {
  padding: var(--apolo-space-2);
  text-align: center;
  font-size: var(--apolo-text-xs);
  font-weight: var(--apolo-font-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--apolo-text-color-secondary);
  background: var(--apolo-n100);
  border-bottom: 1px solid var(--apolo-border-color-subtle);
}

.apolo-calendario__dia {
  min-height: 92px;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--apolo-space-2);
  border: 0;
  border-right: 1px solid var(--apolo-border-color-subtle);
  border-bottom: 1px solid var(--apolo-border-color-subtle);
  background: var(--apolo-surface-card);
  text-align: left;
}
.apolo-calendario__dia--finde { background: var(--apolo-n50); }
.apolo-calendario__dia--fuera { color: var(--apolo-text-color-disabled); background: var(--apolo-n50); }
.apolo-calendario__dia--hoy   { box-shadow: inset 0 0 0 2px var(--apolo-color-primary); }

.apolo-calendario__num { font-size: var(--apolo-text-sm); font-weight: var(--apolo-font-semibold); }

.apolo-calendario__tarea {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 4px;
  border-radius: var(--apolo-radius-sm);
  background: var(--apolo-color-primary-light);
  color: var(--apolo-color-primary-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Los puntos solo existen en móvil. */
.apolo-calendario__puntos { display: none; gap: 3px; }
.apolo-calendario__puntos > i { width: 6px; height: 6px; border-radius: var(--apolo-radius-full); }

@media (max-width: 767.98px) {
  /* A 375px cada columna mide ~50px: no cabe texto, solo el número y los puntos. */
  .apolo-calendario__dia { min-height: 56px; align-items: center; justify-content: flex-start; padding: 6px 2px; gap: 4px; }
  .apolo-calendario__tareas { display: none; }
  .apolo-calendario__puntos { display: flex; }
  .apolo-calendario__cabecera > span { font-size: 10px; padding: 6px 0; }
}

/* Cronómetro: panel lateral ≥768, barra fija al pie por debajo.
   Único caso del anexo en que un elemento cambia de tipo de contenedor. */
.apolo-cronometro-barra {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--apolo-z-dropdown);
  display: none;
  align-items: center; gap: var(--apolo-space-3);
  padding: var(--apolo-space-2) var(--apolo-space-3);
  background: var(--apolo-color-primary-navy);
  color: #fff;
  box-shadow: 0 -4px 16px rgba(15,25,35,.16);
}
@media (max-width: 767.98px) {
  .apolo-cronometro-barra { display: flex; }
  .apolo-cronometro-panel { display: none; }
  /* La barra no debe tapar el final del contenido. */
  .apolo-contenido__interior { padding-bottom: 76px; }
}