/* ═══════════════════════════════════════════════════════════════
   STRUCTURA PRO · AUDITORÍA UI 2026-05-26
   ─────────────────────────────────────────────────────────────
   Fixes consolidados tras revisión a fondo de UI en Desktop + Mobile.
   Reporta el usuario: banners y letras superponiéndose, mobile sobremontado.

   Carga DESPUÉS de bug-fixes-final.css para sobrescribir.
   Si algún fix no se ve bien, comenta la sección y reporta.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · NORMALIZAR Z-INDEX DE FABs (CRÍTICO)
   ─────────────────────────────────────────────────────────────
   Antes: QA-FAB 9998, AI-Copilot 8500, PWA-Install 10000 → caos.
   Ahora: PWA-Install < AI-Copilot < QA-FAB < Modales.
   Usamos !important porque algunos están inline con style="..."
   ─────────────────────────────────────────────────────────────── */

/* Modales y dialogs · capa superior */
.modal, .dialog, [class*="modal-overlay"], .stru-modal, .ot-overlay {
  z-index: 9500 !important;
}

/* FAB QA / Feedback (botón flotante de reportar bug) */
#qa-floating-btn, [id*="qa-fab"], .qa-fab {
  z-index: 8800 !important;
}

/* FAB AI-Copilot (chat Stru-IA) · debe estar visible siempre */
#ai-copilot-fab, [id*="ai-copilot-btn"], .ai-copilot-fab, .stru-fab {
  z-index: 8700 !important;
}

/* PWA Install banner · por debajo de FABs (no debe taparlos) */
#pwa-install-btn, .pwa-install-banner, [id*="pwa-install"] {
  z-index: 8500 !important;
}

/* Banner de update in-app · justo por debajo de FABs */
#struct-update-banner {
  z-index: 8600 !important;
}

/* Toasts/notificaciones · arriba de FABs pero abajo de modales */
.toast, .notification, .notif-stack, [class*="toast-"] {
  z-index: 9000 !important;
}

/* Sidebar y su overlay */
.sidebar, aside.sidebar {
  z-index: 9100 !important;
}
.sidebar-overlay, .sidebar-backdrop {
  z-index: 9099 !important;
}


/* ───────────────────────────────────────────────────────────────
   2 · TOPBAR · Prevenir overflow en pantallas pequeñas
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    min-height: auto;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .topbar-title, .proyecto-nombre, [class*="topbar-title"] {
    max-width: calc(100vw - 110px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px !important;
  }
  #topbar-actions, .topbar-actions {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 6px !important;
  }
  #topbar-actions button, .topbar-actions button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   3 · BOTTOM NAVIGATION · legible en pantallas ≤380px
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  .bottom-nav {
    height: 64px !important;
  }
  .bn-item {
    padding: 4px 2px !important;
    min-width: 0 !important;
  }
  .bn-icon {
    font-size: 16px !important;
  }
  .bn-label {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
  }
}

/* Asegurar que el contenido principal nunca quede tapado por bottom-nav */
@media (max-width: 768px) {
  main, .main-content, #app-content, .app-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   4 · MODALES · Botón X accesible + scroll seguro
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Botón cerrar X más grande y separado del notch */
  .modal-close, .stru-close, [class*="modal-close"], button[aria-label*="errar"] {
    top: max(14px, env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Modales · evitar overflow horizontal durante animación */
  .modal, .stru-modal, [role="dialog"] {
    overflow-x: hidden !important;
    will-change: transform;
    max-height: 92dvh !important;   /* dvh respeta dynamic viewport en iOS */
  }

  /* Body de modales · scroll seguro */
  .modal-body, .stru-modal-body, .modal-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 60px;
  }
}


/* ───────────────────────────────────────────────────────────────
   5 · CHAT STRU-IA · respuestas largas + teclado móvil
   ─────────────────────────────────────────────────────────────── */

.stru-modal-body, [class*="stru-msg"], .ai-msg, .chat-msg {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* URLs largas no rompen el layout */
.stru-modal-body a, .ai-msg a, .chat-msg a {
  word-break: break-all;
}

@media (max-width: 480px) {
  /* Chat ocupa casi toda la pantalla en mobile */
  .stru-modal, #ai-copilot-modal, [id*="copilot-modal"] {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   6 · CARDS DE PROYECTOS · botones que caben en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Tarea #113 · 3 botones en 1 fila: Abrir + Copia expanden, ✕ queda compacto */
  .proj-actions, .project-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .proj-actions button, .proj-actions a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* El botón eliminar NO crece: queda como un icono compacto a la derecha */
  .proj-actions .btn-danger {
    flex: 0 0 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 9px 0 !important;
    text-align: center !important;
  }

  /* Nombre del proyecto con ellipsis si es muy largo */
  .proj-name, .project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
  }

  /* Stats chips · permitir wrap */
  .proj-stats, .project-stats {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   7 · TABLAS · inputs touch-friendly en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Mínimo 44px de alto en inputs táctiles (Apple HIG + Material) */
  table input, table select, table textarea,
  .budget-table input, .data-table input {
    min-height: 44px !important;
    min-width: 70px !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
  }

  /* Visual hint de scroll horizontal · sombra a la derecha */
  .table-wrapper, .table-scroll, .budget-wrapper {
    position: relative;
  }
  .table-wrapper::after, .table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.08));
    pointer-events: none;
  }
}


/* ───────────────────────────────────────────────────────────────
   8 · ONBOARDING TOUR · botones más compactos en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  .ot-card, .onboarding-card {
    padding: 18px !important;
  }
  .ot-actions, .onboarding-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ot-back, .ot-next, .ot-skip {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* Dots indicador · más chicos */
  .ot-dots .ot-dot {
    width: 6px !important;
    height: 6px !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   9 · FIX SPECIFIC · inputs type=number sin spinner arrows
   ─────────────────────────────────────────────────────────────── */

/* Aplicar globalmente · ya está en ui-enhancements.css pero reforzamos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}


/* ───────────────────────────────────────────────────────────────
   10 · LABELS DE INPUTS · legibles en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  label, .form-label, .input-label {
    letter-spacing: -0.1px !important;
    text-transform: none !important;   /* sin mayúsculas forzadas */
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   11 · SAFE AREA · respetar notches en iPhone moderno
   ─────────────────────────────────────────────────────────────── */

@supports (padding: max(0px)) {
  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* FABs respetan safe-area */
  #ai-copilot-fab, .stru-fab,
  #qa-floating-btn, .qa-fab,
  #pwa-install-btn {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(20px + env(safe-area-inset-right, 0px)) !important;
  }
  /* PWA install va a la izquierda */
  #pwa-install-btn, .pwa-install-banner {
    left: calc(20px + env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   12 · ANTI-OVERFLOW · prevenir horizontal scroll global
   ─────────────────────────────────────────────────────────────── */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Imágenes nunca deben desbordar */
img, video, iframe {
  max-width: 100%;
  height: auto;
}


/* ───────────────────────────────────────────────────────────────
   13 · SCROLLBAR · más visible en desktop dark mode
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}


/* ───────────────────────────────────────────────────────────────
   14 · FOCUS VISIBLE · accesibilidad teclado
   ─────────────────────────────────────────────────────────────── */

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent, #e8450a);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ───────────────────────────────────────────────────────────────
   15 · TEXTO LARGO · prevenir overflow en cards y modales
   ─────────────────────────────────────────────────────────────── */

.card, .stat-card, .info-card,
.modal-body, .stru-modal-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ───────────────────────────────────────────────────────────────
   16 · APU DETAIL ROWS · apilar en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .apu-detail-row, .apu-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 12px !important;
  }
  .apu-detail-row > *, .apu-row > * {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
  }
  /* Etiquetas antes de cada valor cuando se apila */
  .apu-detail-row [data-label]::before,
  .apu-row [data-label]::before {
    content: attr(data-label) ":";
    font-weight: 600;
    color: var(--ink3, #6b6b80);
    margin-right: 8px;
  }
}


/* ───────────────────────────────────────────────────────────────
   17 · ANIMACIONES TOAST · keyframes para el nuevo stack
   ─────────────────────────────────────────────────────────────── */

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────
   18 · CHIPS / BADGES · no se cortan en mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .chip, .badge, .tag,
  .plan-badge, .status-badge, .pro-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
}


/* ───────────────────────────────────────────────────────────────
   19 · LANGUAGE SWITCHER · que no se desborde
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .lang-switch, .lang-switcher, [class*="lang-pill"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .lang-switch button, .lang-pill {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   20 · MENÚ HAMBURGER · siempre visible y consistente
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hamburger, .menu-btn, #menu-btn, [aria-label*="enu"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }
}

@media (min-width: 769px) {
  /* En desktop el sidebar siempre está abierto, no necesitamos hamburger */
  .hamburger, .menu-btn, #menu-btn {
    display: none !important;
  }
}


/* ───────────────────────────────────────────────────────────────
   21 · SIGLAS · estilo del glosario (.sigla con data-sigla)
   ─────────────────────────────────────────────────────────────── */

.sigla, [data-sigla] {
  border-bottom: 1px dashed rgba(232, 69, 10, 0.55);
  cursor: help;
  position: relative;
}

.sigla:hover, [data-sigla]:hover {
  color: var(--accent, #e8450a);
}

/* En mobile el cursor:help no aplica, pero el dashed underline indica
   que el elemento es interactivo. */
@media (max-width: 768px) {
  .sigla, [data-sigla] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(232, 69, 10, 0.1);
  }
}


/* ─────────────────────────────────────────────────────────────── */
/* FIN del audit-fixes-2026-05-26.css */
/* Generado en auditoría 2026-05-26 · 21 secciones */
/* ─────────────────────────────────────────────────────────────── */