/* ============================================================
   PIVOT APP — responsive.css
   Layout adaptativo: mobile-first, tablet (≥768px) y desktop (≥1200px)
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   BASE / MOBILE (Pantallas pequeñas < 768px)
   Se aplica por defecto. Fuerza a que las vistas ocupen toda la pantalla.
   ══════════════════════════════════════════════════════════════ */

/* 1. Bloqueamos el Flex Row en móvil para que las pantallas no se pongan lado a lado.
   ⚠️  NO usar display !important aquí: el JS controla la visibilidad de appContent
       con style="display:none" / style="display:block". Un !important lo anularía. */
#appContent {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* respeta barras dinámicas de iOS/Android (toolbar que aparece/desaparece) */
  overflow-x: hidden;
}

/* 2. Forzamos a que las pantallas se apilen y ocupen el 100% del espacio */
.app-view, #view-home {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: var(--bg); /* Fondo sólido para que no se trasluzcan */
  z-index: 1;
}

/* view-home: siempre visible en mobile (display explícito, no depender del default del browser) */
#view-home {
  display: flex !important;
  flex-direction: column !important;
}

/* 3. Vistas secundarias: ocultas por default, el JS las muestra con .active
   (+ style.display:'flex') y las anima con keyframes (.app-view-enter / .app-view-exit).
   El padre queda renderizado debajo, así que volver con el gesto nativo revela
   contenido real (no el fondo) y no hace falta una transition de slide. */
.app-view:not(#view-home) {
  display: none;
}

/* 4. Evitar que textos largos en el header rompan la pantalla */
.app-header {
  width: 100%;
  box-sizing: border-box;
}

.header-row-top {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.app-header-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ══════════════════════════════════════════════════════════════
   TABLET — ≥ 768px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  .bottom-nav { display: none !important; }
  .app-scroll { padding-bottom: 24px !important; }

  #appContent {
    /* ⚠️ Sin display !important: el JS ya pone display:block con inline style.
       Aquí solo cambiamos el flex-direction para el layout de columnas. */
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden;
  }

  /* ── NAV VERTICAL (col 1) ── */
  #bottom-nav {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 72px !important;
    height: 100% !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    padding-bottom: 24px !important;
    background: var(--card) !important;
    border-right: 1px solid var(--border2) !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    z-index: 10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-item {
    flex: none !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .nav-item-label { display: none !important; }

  .nav-item::before {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* ── PANEL MEDIO (col 2) ── */
  #view-home {
    position: relative !important;
    display: flex !important;
    transform: none !important;
    width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    border-right: 1px solid var(--border2) !important;
    background: var(--bg) !important;
    z-index: 9 !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  #view-home .app-scroll {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ── PANEL CONTENIDO (col 3) ── */
  .app-view:not(#view-home) {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 280px !important;
    height: 100% !important;
    transform: none !important;
    transition: none !important; /* En tablet/desktop el show/hide es vía .active, sin animación de slide */
    display: none !important;
    flex-direction: column !important;
  }

  /* ── Restaurar transiciones en elementos hijos que las necesitan ── */
  .edit-field-sheet,
  .edit-field-overlay,
  .bs-panel,
  .bs-overlay,
  .color-picker-sheet,
  .color-picker-overlay,
  .crop-sheet,
  #modal-crop,
  #date-picker-modal,
  .dp-card,
  .modal-confirm-sheet,
  .modal-confirm-overlay,
  .wiz-bienvenida-sheet,
  .dialog-borrar-card,
  #view-perfil,
  .app-view-detail {
    transition: revert !important;
  }

  /* ── Col 3 activa y col 4 activa: mostrar ── */
  .app-view:not(#view-home).active,
  .app-view-detail.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* ── Animación de entrada para col 3 ── */
  .app-view:not(#view-home).active .app-scroll > * {
    animation: panel-slide-in 0.3s cubic-bezier(0.4,0,0.2,1) both;
  }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(1) { animation-delay: 0.00s; }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(2) { animation-delay: 0.04s; }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(3) { animation-delay: 0.08s; }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(4) { animation-delay: 0.12s; }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(5) { animation-delay: 0.16s; }
  .app-view:not(#view-home).active .app-scroll > *:nth-child(6) { animation-delay: 0.20s; }

  @keyframes panel-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #view-home { display: flex !important; }
  /* En tablet/desktop la entrada/salida mobile (fade-up) no aplica: las columnas
     usan el stagger de contenido (panel-slide-in / col4-enter). */
  .app-view-enter,
  .app-view-exit { animation: none !important; }
  .app-view:not(#view-home) .header-back { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP — ≥ 1024px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Nav col 1: expandida con labels ── */
  #bottom-nav {
    width: 200px !important;
    align-items: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 4px !important;
  }

  .nav-item {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
  }

  .nav-item-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }

  .nav-item::before {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* ── Item activo en panel medio (col 2) ── */
  #view-home .sec-row.nav-sidebar-active {
    background: var(--accent-dim) !important;
    border-bottom: none !important;
  }
  #view-home .sec-row.nav-sidebar-active .sec-row-title {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
  }

  /* ── Item activo en panel col 3 ── */
  #view-perfil .sec-row.nav-sidebar-active,
  #view-perfil [onclick].nav-sidebar-active {
    background: var(--accent-dim) !important;
  }
  #view-perfil .sec-row.nav-sidebar-active .sec-row-title,
  #view-perfil [onclick].nav-sidebar-active .sec-row-title {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
  }

  /* ── Panel medio (col 2) ── */
  #view-home {
    width: 300px !important;
    min-width: 280px !important;
  }

  #view-home .app-scroll {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Scrollbar discreta en col 3 ── */
  .app-view:not(#view-home) .app-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .app-view:not(#view-home) .app-scroll::-webkit-scrollbar {
    display: block;
    width: 4px;
  }
  .app-view:not(#view-home) .app-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }

  /* ── Col 3 ancho fijo cuando hay col 4 activa ──
     El split de 4 columnas se auto-activa desde 1200px (ver perfil.js). A esos
     anchos: nav 200 + home 300 + col3 300 deja col4 con el resto sin desbordar.
     A ≥1600px se ensancha en su propio media query. */
  #appContent:has(.app-view-detail.active) .app-view:not(#view-home):not(.app-view-detail).active {
    flex: 0 0 300px !important;
    min-width: 0 !important;
    max-width: 380px !important;
    border-right: 1px solid var(--border2) !important;
  }

  /* ── Col 4: oculta por defecto, visible y flex:1 cuando activa ──
     Prefijo #appContent para subir especificidad a (1,2,0) y ganarle a la regla
     tablet `.app-view:not(#view-home) { min-width:280px }` (1,1,0 por el id dentro
     del :not), que si no impediría que la col4 se encoja y la haría desbordar. */
  .app-view-detail {
    display: none !important;
  }
  #appContent .app-view-detail.active {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  /* ── Ocultar título e ícono de header en col 2 y col 3 (redundante con sidebar) ── */
  .app-view .app-header-title,
  .app-view .app-header-icon {
    display: none !important;
  }
  .app-view .app-header {
    min-height: 0 !important;
    padding: 0 !important;
  }
  .app-view .header-row-top {
    min-height: 0 !important;
    padding: 8px 12px !important;
  }

  /* ── Col 4: sin header visible (col 3 actúa como título) ── */
  .app-view-detail .app-header {
    min-height: 0 !important;
    padding: 0 !important;
  }
  .app-view-detail .header-row-top {
    min-height: 0 !important;
    padding: 8px 12px !important;
  }

  /* ── Wizards: restringir a la derecha de col 1 ── */
  .wiz-equipo-overlay,
  #registroScreen,
  #wiz-liga-overlay {
    left: 200px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LARGE DESKTOP — ≥ 1600px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {

  #bottom-nav { width: 220px !important; }

  /* ── Wizards a 1600px: offset por col 1 ampliada ── */
  .wiz-equipo-overlay,
  #registroScreen,
  #wiz-liga-overlay {
    left: 220px !important;
  }

  #view-home {
    width: 400px !important;
    min-width: 320px !important;
  }

  .app-view:not(#view-home) .app-scroll {
    max-width: 800px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  /* ── Col 3: ancho fijo siempre ── */
  #view-perfil.active {
    flex: 0 0 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    border-right: 1px solid var(--border2) !important;
  }

  /* ── Col 4: siempre visible, flex:1 ── */
  .app-view-detail {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    position: relative !important;
    flex-direction: column !important;
    transform: none !important;
  }

  .app-view-detail.active {
    animation: col4-enter 0.25s cubic-bezier(0.4,0,0.2,1) both;
  }

  @keyframes col4-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Col 4: sin header en desktop ── */
  .app-view-detail .app-header {
    display: none !important;
  }

  /* ── Col 4 scrollbar ── */
  .app-view-detail .app-scroll {
    max-width: 640px !important;
    margin: 0 auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}