/*
 * NormaCode — Sprint 1 mobile fixes (pase 60.15, 2026-06-17)
 * Companion: docs/architecture/AUDITORIA_MOBILE_2026-06-17.md
 *
 * Aplica SOLO en viewport <=768px. Desktop intacto.
 *
 * Fixes:
 *   F1 — Botón Guardar a FAB bottom-right (M0 showstopper)
 *   F2 — Header meta band collapsible (a integrar JS en pase siguiente)
 *   F3 — Widget "Tu progreso NormaCode 40 %" auto-hide tras 3s
 *   F5 — MAPA pills a barra segmentada
 */

@media (max-width: 768px) {

  /* ========================================================================
   * F10 — Subheader compact: ocultar iconos redundantes scrolleables
   *       (refresh, help, modo-expert, header-subtitle) en mobile.
   *       Dejamos: project badge + indicador de guardado + status dot + avatar.
   *       El refresh ya está accesible vía pull-to-refresh nativo del browser.
   *       La ayuda contextual es de uso raro en mobile (defer a desktop).
   *       F1 móvil v3 §24 2026-07-10: #saveStateIndicator SALIÓ del hide — ahora
   *       es la variante COMPACTA icon-only (styling en style.css @media ≤768).
   * ======================================================================== */
  #flowModeToggle,
  #btn-refresh-data,
  #btn-context-help,
  .header-subtitle {
    display: none !important;
  }
  /* Header subtítulo desktop "OGUC 4.1.10 / DITEC 2025 / v5.10.x" oculto en
     mobile — info irrelevante para usuario, accesible desde /profile dropdown. */

  /* Header-actions más compacto: solo project + status + avatar */
  .header-actions {
    gap: 8px !important;
  }
  /* F1 fix regresión (verificación visual 2026-07-10): con proyecto cargado, el
     badge (50vw) + botón Guardar compacto (40px) hacían WRAP y la 2ª fila
     desbordaba el header sticky de 52px, flotando transparente sobre el
     contenido. Garantizar UNA fila: el header no envuelve, el spacer vacío
     .header-info cede su flex y el badge toma el espacio libre y TRUNCA.
     Selectores hijos de .header (no tocar .header-actions del dashboard). */
  .header {
    flex-wrap: nowrap;
  }
  .header > .header-info {
    flex: 0 1 auto;
  }
  .header > .header-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  /* Project badge toma el espacio libre de la fila y trunca con ellipsis */
  #activeProjectBadge {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  /* ========================================================================
   * F0.1 móvil v3 §24 2026-07-10 — chip de etapa móvil + drawer RETIRADOS.
   *   Se CONSERVA solo el hide de #projectContextBar: la barra de contexto
   *   desktop NO debe aparecer en móvil (nav móvil = bottom tabs + FAB).
   *   Markup #mobileMetaChip/#mobileMetaDrawer queda inerte (remoción total F3).
   * ======================================================================== */
  #projectContextBar {
    display: none !important;
  }

  /* ========================================================================
   * F0.3 móvil v3 §24 2026-07-10 — NAV PURA: padding-bottom del contenido
   *   despeja SOLO los bottom tabs (64px) + safe-area + 8px buffer.
   *   (Chip de etapa y drawer retirados en F0.1; antes sumaba chip 50 + tabs
   *   64 + buffer = 140.) Regla ÚNICA — se eliminó el duplicado 88px de más
   *   abajo que ganaba por orden de cascada.
   * ======================================================================== */
  body.app-shell-body main,
  body.app-shell-body .view-section,
  .calculator-view {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* ========================================================================
   * F6 — Bottom Tab Bar Material 3 (Round B, pase 60.17, 2026-06-17)
   *      4 destinations Zona/Capas/Verificar/Informe. Active state pill arriba.
   *      Sticky bottom: 0 con safe-area-inset-bottom. Chip meta sube a 64px.
   * ======================================================================== */
  .nc-mobile-bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8600; /* sobre chip (8500) pero bajo modal/drawer (9100) */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
  }
  .nc-mobile-bottom-tabs[hidden] { display: none !important; }
  /* F4/§24 2026-07-11 — scroll-to-minimize (patrón iOS 26 tabBarMinimizeBehavior /
     M3E nav corta): al scrollear hacia abajo la nav se desliza fuera; reaparece al
     subir / llegar al fondo / enfocar (JS initScrollToMinimize, gate isMobile).
     transform (no display) para animar sin reflow; padding del contenido intacto.
     (Re-aplicado por el gerente: una carrera entre agentes F4a/F4b lo había borrado.) */
  .nc-mobile-bottom-tabs {
    transition: transform 0.22s ease-out;
    will-change: transform;
  }
  .nc-mobile-bottom-tabs.is-scroll-minimized {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }

  .nc-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px 4px 6px;
    min-height: 64px;
    min-width: 44px; /* WCAG 2.5.5 */
    position: relative;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.2s ease-out;
  }
  .nc-tab:active {
    color: var(--primary, #34d399);
  }
  .nc-tab:focus-visible {
    outline: 2px solid var(--primary, #34d399);
    outline-offset: -2px;
  }
  .nc-tab-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
  .nc-tab-label {
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* Active state: indicator pill arriba + color cyan + ícono filled-feel */
  .nc-tab[aria-current="true"] {
    color: var(--primary, #34d399);
  }
  .nc-tab[aria-current="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--primary, #34d399);
    border-radius: 0 0 3px 3px;
  }
  .nc-tab[aria-current="true"] .nc-tab-icon {
    transform: scale(1.08);
    transition: transform 0.2s ease-out;
  }

  /* F0.1 móvil v3 §24 2026-07-10: chip meta retirado — ajuste chip-sobre-tabs eliminado. */
  /* F1 móvil v3 §24 2026-07-10: el FAB Guardar flotante fue RETIRADO. #btnSaveProject
     vuelve al flujo del header como botón icon-only compacto (bloque F1 más abajo);
     ya no necesita offset sobre los bottom tabs. */
  /* P1.18 (audit 2026-06-17 PM): cookies banner cubre bottom tab bar en /app.
     Z-index 99999 del banner > 8600 de tabs → banner siempre encima.
     Fix: reposicionar banner SOBRE el tab bar cuando estamos en /app autenticado
     (body.app-shell-body) o cuando los tabs están visibles. */
  body.app-shell-body #nc-cookies-banner,
  body:has(#mobileBottomTabs:not([hidden])) #nc-cookies-banner {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ========================================================================
   * F1 móvil v3 §24 2026-07-10 — Guardar: botón icon-only COMPACTO en el header
   *   (reemplaza el FAB flotante Material 3). Queda en el flujo de .header-actions.
   *   Se estiliza por id (la clase .nc-mobile-fab quedó sin estilo FAB); mantiene
   *   el fondo primario que ya trae .btn-primary del base.
   * ======================================================================== */
  #btnSaveProject {
    /* cuadrado compacto icon-only ~40px (WCAG 2.5.8 AA ≥24px) */
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  #btnSaveProject:active {
    transform: scale(0.95);
  }
  #btnSaveProject .nc-mobile-fab-label {
    /* Oculta el texto "Guardar" en mobile — solo el ícono. El aria-label del
       botón ("Guardar proyecto") preserva la a11y. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #btnSaveProject i {
    font-size: 1.15rem;
    margin: 0;
  }

  /* ========================================================================
   * Sprint 1 mobile audit 2026-07-02 — header título corto
   * ======================================================================== */
  /* Header: mostrar título corto en mobile (el largo se truncaba con elipsis) */
  .header h1 .hdr-title-full { display: none !important; }
  .header h1 .hdr-title-short { display: inline !important; }
  .header h1 { font-size: 1.05rem; }
  /* F1 móvil v3 §24 2026-07-10: la regla FAB safe-area-right se retiró junto con el
     FAB flotante — #btnSaveProject ya no usa position:fixed. */

  /* ========================================================================
   * F0.2 móvil v3 §24 2026-07-10 — mecanismo F3 (auto-hide del widget de
   *   progreso + mini-handle "%") RETIRADO por completo. El widget onboarding
   *   queda colapsado y lo posiciona onboarding-checklist.css (sobre la nav).
   *   Se elimina también .oc-widget.nc-progress-hidden (regla huérfana sin el JS).
   * ======================================================================== */

  /* ========================================================================
   * F5 — MAPA pills compactas + barra de progreso segmentada
   * ======================================================================== */
  /* Cuando el header se colapse (F2), las pills MAPA se compactan a chips
     pequeños. Hasta entonces, reducimos su padding para liberar espacio. */
  .mapa-pill,
  .stage-pill,
  .stepper-pill {
    padding: 4px 10px;
    font-size: 0.78rem;
    min-height: 32px;
  }

  /* F0.3 móvil v3 §24 2026-07-10: padding-bottom del contenido consolidado en la
     sección NAV PURA (una sola regla). Antes había un duplicado 88px acá que
     ganaba por orden de cascada y tapaba el valor correcto. */
}

/* ============================================================================
 * Hero CTAs login.html — stacked en mobile (F4 companion)
 * Ya aplicado inline en login.html. Aquí solo bypass override defensivo.
 * ============================================================================ */
@media (max-width: 640px) {
  .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero-ctas .hero-btn {
    justify-content: center;
  }
}

/* F4/§24 2026-07-11 — reduce-motion: la nav no anima su minimize */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nc-mobile-bottom-tabs { transition: none; }
}