/* ===== responsive.css — Escritorio → tablet → móvil (rediseño tipo app) ===== */

/* ============================================================
   TABLET GRANDE (≤ 1080px)
   ============================================================ */
@media (max-width: 1080px) {
  .sidebar { width: 220px; padding: 20px 14px; }
  .board { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .topbar { padding: 20px 24px 14px; }
}

/* ============================================================
   MÓVIL / TABLET PORTRAIT (≤ 900px) — REDISEÑO TIPO APP
   Barra superior limpia + navegación inferior fija + botón flotante
   ============================================================ */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }

  /* ---------- BARRA SUPERIOR OSCURA (marca + salir + filtros) ---------- */
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  /* Fila 1: marca a la izquierda, cerrar sesión a la derecha */
  .sidebar-brand { flex: 1 1 100%; padding: 0; display: flex; align-items: center; }
  .sidebar-brand .btn-logout { position: static; margin-left: auto; }

  /* Fila 2: filtros como tira horizontal deslizable */
  .sidebar-section { flex-basis: 100%; margin: 0; padding: 0; }
  .sidebar-section-title { display: none; }
  .priority-filters {
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .priority-filters::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }

  /* El bloque de usuario del sidebar se oculta (el avatar vive en la barra clara) */
  .sidebar-footer { display: none; }

  /* ---------- NAVEGACIÓN INFERIOR FIJA (tab bar) ---------- */
  .sidebar-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    flex-direction: row;
    margin: 0;
    gap: 2px;
    background: var(--navy-900);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0,0,0,0.28);
  }
  .nav-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 2px;
    border-radius: 12px;
    font-size: 0;                 /* oculta el texto largo original */
    transform: none !important;
  }
  .nav-item .nav-icon { display: flex; }
  .nav-item .nav-icon svg { width: 22px; height: 22px; }
  .nav-item::after {
    content: attr(data-short);    /* etiqueta corta: Inicio · General · Equipo · Chat */
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
  }
  .nav-item.active { background: var(--primary); color: #fff; }

  /* ---------- BOTÓN FLOTANTE (FAB) Nueva tarea ---------- */
  .new-task-btn {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 61;
    width: auto;
    margin: 0;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(79,70,229,0.55);
  }
  /* El FAB solo tiene sentido en las vistas de tareas */
  body[data-view="team"] .new-task-btn,
  body[data-view="chat"] .new-task-btn,
  body[data-view="attendance"] .new-task-btn { display: none; }

  /* ---------- CONTENIDO deja espacio para la nav inferior ---------- */
  .main { padding-bottom: 80px; }

  /* ---------- BARRA CLARA (título + controles) ordenada ---------- */
  .topbar { padding: 16px 16px 6px; flex-direction: column; align-items: stretch; gap: 12px; }
  .topbar-title h1 { font-size: 22px; }
  .topbar-right { flex-direction: column; align-items: stretch; gap: 10px; }
  .topbar-clock { display: none; }              /* el teléfono ya muestra la hora */
  .topbar-utility { justify-content: flex-end; gap: 12px; }
  .topbar-actions { gap: 10px; }
  .search-box { flex: 1; width: auto; min-width: 0; }

  /* ---------- LOGIN / REGISTRO EN MÓVIL ---------- */
  .auth-brand { display: none; }                 /* oculta el panel oscuro en pantallas chicas */
  .auth-wrapper { width: min(430px, 92vw); min-height: auto; border-radius: 22px; }
  .auth-card { flex: 1; padding: 40px 28px; }
}

/* ============================================================
   MÓVIL (≤ 680px) — tablero en una columna y ajustes finos
   ============================================================ */
@media (max-width: 680px) {
  .board { grid-template-columns: 1fr; padding: 8px 14px 24px; }

  .team-view { padding: 8px 14px 24px; }
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

  /* Vista de lista: se desliza horizontal en vez de aplastarse */
  .list-view { padding: 8px 14px 24px; overflow-x: auto; }
  .task-table { min-width: 560px; }

  /* Modales: campos en una sola columna y footer que se ajusta */
  .field-row { flex-direction: column; gap: 0; }
  .modal-scroll { padding: 24px 18px 8px; }
  .modal-footer { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .modal-footer-right { flex: 1; justify-content: flex-end; }

  .topbar-title h1 { font-size: 20px; }
}

/* ============================================================
   MÓVIL PEQUEÑO (≤ 420px)
   ============================================================ */
@media (max-width: 420px) {
  .sidebar { padding: 12px 14px; }
  .chip { font-size: 11px; padding: 5px 10px; }
  .nav-item::after { font-size: 10px; }
  .new-task-btn { padding: 12px 16px; }

  .topbar-title h1 { font-size: 19px; }

  /* Modales casi a pantalla completa */
  .modal { width: 96vw; max-height: 92vh; }

  /* Login aún más ajustado */
  .auth-wrapper { width: 93vw; border-radius: 20px; }
  .auth-card { padding: 34px 22px; }
}