/* ═══════════════════════════════════════════════════════════════
   CEART — Global Mobile Responsive Styles
   Imported in every portal page after page-specific styles.
   Breakpoints:  ≤768px = tablet/phone   ≤480px = phone only
   ═══════════════════════════════════════════════════════════════ */

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

/* ── AVATARS: Ensure all avatar images scale without distortion ── */
.sidebar-avatar img,
.card-avatar img,
.stu-avatar img,
.article-avatar img,
.inline-comment-avatar img,
#result-avatar img,
#topbar-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit;
  display: block;
}

/* ── SIDEBAR: slide out on mobile ────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* !important necesario: algunas páginas declaran z-index menor en su <style> inline
     y mobile.css se carga antes, por lo que sin !important el bottom-nav tapaba el footer */
  .sidebar {
    transform: translateX(-100%);
    width: 260px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    z-index: 300 !important;
  }
  .sidebar.open { transform: none; }

  /* Overlay backdrop for sidebar — debe quedar sobre el bottom-nav (z=100) pero bajo el sidebar */
  .overlay, .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 250 !important;
    backdrop-filter: blur(2px);
  }
  .overlay.open, .sidebar-overlay.open { display: block; }

  /* Ocultar el bottom-nav cuando el sidebar está abierto, para que no compita por el foco */
  body:has(.sidebar.open) .bottom-nav { display: none !important; }

  /* TOPBAR: stretch full width */
  .topbar {
    left: 0 !important;
    padding: 0 14px !important;
  }

  /* Hamburger: always show */
  .topbar-hamburger {
    display: flex !important;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    border-radius: 8px; color: var(--ink);
    flex-shrink: 0;
  }

  /* Main content: no left margin */
  .content, .main-content, main {
    margin-left: 0 !important;
  }
}

/* ── BOTTOM NAV BAR (mobile only) ────────────────────────────── */
/* Altura total de la barra, incluyendo safe-area en iPhones */
:root {
  --bottom-nav-h: 60px;
  --bottom-nav-total: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-total); z-index: 100;
  background: rgba(255,252,252,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  padding: 6px 4px env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--faint);
  font-size: 9.5px; font-weight: 600;
  padding: 4px 6px; border-radius: 10px;
  transition: color .15s, background .15s;
  flex: 1; min-width: 0;
  height: var(--bottom-nav-h);
  justify-content: center;
}
.bottom-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bottom-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.bottom-nav-item.active { color: var(--ink); }
.bottom-nav-item.active svg { color: var(--gold-d, #d4890a); }

@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  /* Breathing room: el contenido debe terminar arriba de la barra */
  .main-content, main, .content {
    padding-bottom: calc(var(--bottom-nav-total) + 24px) !important;
  }
  /* Contenedores con padding-bottom propio que pueden quedar cortos */
  .feed-panel { padding-bottom: calc(var(--bottom-nav-total) + 24px) !important; }

  /* FAB must float above the bottom nav bar */
  .fab {
    bottom: calc(var(--bottom-nav-total) + 16px) !important;
  }
}

/* ── NOTIFICATIONS DROPDOWN: full width on mobile ────────────── */
@media (max-width: 480px) {
  .notif-dropdown {
    position: fixed !important;
    top: 60px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    transform: none !important;
  }
}

/* ── MODALS: bottom sheet on mobile ──────────────────────────── */
@media (max-width: 600px) {
  .modal-overlay,
  .pay-modal-backdrop,
  .lc-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal, .pay-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: 0 !important;
  }
  /* Drag handle hint */
  .modal::before, .pay-modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--rule);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
}

/* ── TABLES: horizontal scroll ───────────────────────────────── */
@media (max-width: 768px) {
  .tbl-wrap, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { min-width: 80px; }
}

/* ── FORMS: full width inputs ────────────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr !important; }
  .form-input, .form-select, .form-textarea,
  .fi, .fi-full {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
}

/* ── CARDS GRID: single column on small screens ──────────────── */
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr !important; }
  .stats-strip { grid-template-columns: 1fr 1fr !important; }
  .payments-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── CHILD SELECTOR BAR ──────────────────────────────────────── */
@media (max-width: 600px) {
  #child-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #child-select { width: 100% !important; }
}

/* ── TYPOGRAPHY SCALING ──────────────────────────────────────── */
@media (max-width: 480px) {
  .page-hdr h1, .feed-title, .tasks-heading {
    font-size: 20px !important;
  }
  .welcome-name { font-size: 18px !important; }
}

/* ── TOUCH TARGETS: 44px minimum ────────────────────────────── */
@media (max-width: 768px) {
  .nav-item, .ch-item, .chip, .sort-btn,
  .btn, .cred-btn, .topbar-btn,
  .pay-btn-submit, .pay-btn-cancel,
  .add-reaction-btn, .post-comment-count {
    min-height: 44px;
  }
  .reaction { min-height: 36px; padding: 6px 11px !important; }
  .nav-item { padding: 11px 12px !important; }
  /* Action buttons in forum / tasks */
  .task-action-btn, .sidebar-signout { min-width: 44px; min-height: 44px; }
}

/* ── CREDENTIAL CARD: responsive sizing ─────────────────────── */
@media (max-width: 480px) {
  .card-scene { max-width: 100% !important; }
  .cred-actions { flex-direction: column !important; }
  .cred-btn { width: 100% !important; min-width: 0 !important; }
  .info-table { max-width: 100% !important; }
  .validity-strip { max-width: 100% !important; }
}

/* ── SCAN PAGE: full screen QR ───────────────────────────────── */
@media (max-width: 600px) {
  #reader { width: 100% !important; }
}

/* ── FILTER BAR: wrap nicely on mobile ───────────────────────── */
@media (max-width: 600px) {
  .filters-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filter-select, .filter-input, .filter-date,
  .fi.fi-search { width: 100% !important; min-width: 0 !important; }
}

/* ── FORUM: hide desktop channel panel, show mobile pills ────── */
@media (max-width: 768px) {
  .channels-panel { display: none !important; }
  .ch-subnav { display: block !important; }
  .feed-panel { padding: 14px 14px 100px !important; }
}

/* ── EVENTS + TASKS: single column grid ─────────────────────── */
@media (max-width: 640px) {
  .tasks-grid { grid-template-columns: 1fr !important; }
}

/* ── PAYMENTS: better touch on method picker ────────────────── */
@media (max-width: 480px) {
  .pay-method-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pay-method-opt { padding: 14px 6px !important; }
}

/* ── SAFE AREA: iPhone notch / home indicator ────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    height: calc(60px + env(safe-area-inset-bottom));
  }
  .toast {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── iOS PWA INSTALADA: barra de estado / Dynamic Island ──────── */
/* Cuando la app está como PWA instalada y viewport-fit=cover está
   activo, la WebView de iOS va edge-to-edge: la barra superior queda
   bajo el notch/Dynamic Island. Aquí extendemos el topbar hacia
   arriba el alto del área segura y empujamos el contenido. */
@media (display-mode: standalone) {
  .topbar, .nav-page-topbar {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
  /* La gran mayoría de páginas usan padding-top entre 56 y 80 para
     hacer espacio al topbar. Forzamos a topbar + safe + 24 de aire. */
  .content, .main-content, main, .nav-page-content {
    padding-top: calc(56px + env(safe-area-inset-top, 0px) + 24px) !important;
  }
  /* La cámara del scanner se posiciona fixed con top:56; ajustamos. */
  .camera-wrap {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
  /* History strip del scanner también */
  .history-strip {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
  /* Perm / error screens del scanner */
  .perm-screen, .error-screen {
    top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ── SCROLL IMPROVEMENTS ─────────────────────────────────────── */
@media (max-width: 768px) {
  * { -webkit-overflow-scrolling: touch; }
  .ch-subnav-inner, .filter-bar, .stats-strip {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ch-subnav-inner::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar { display: none; }
}

/* ── ADMIN (admin.html has own layout, just ensure topbar) ────── */
@media (max-width: 768px) {
  .nav-page-topbar { left: 0 !important; }
  .nav-page-content { margin-left: 0 !important; padding-bottom: 80px !important; }
}

/* -- ANIMACIONES Y MICRO-INTERACCIONES -- */
@keyframes appEntry { 0% { opacity: 0; transform: translateY(12px); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: blur(0); } }

.layout { animation: appEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.btn, button { transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s, background-color 0.2s !important; }
.btn:active:not(:disabled), button:active:not(:disabled) { transform: scale(0.94); }

.card, .kid-card, .post-card, .task-card, .feed-item { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.card:hover, .kid-card:hover, .post-card:hover, .task-card:hover, .feed-item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(1,1,1,0.08) !important; }