/* ==========================================================================
   assets/css/pwa.css — App instalable y ajustes para celular/tablet en TODO el sitio
   Se agrega automáticamente a todas las páginas (includes/pwa.php).
   ========================================================================== */

/* ---------- Base cómoda en pantallas táctiles ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(6, 182, 212, 0.18); overflow-wrap: break-word; }
img, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
pre, code { white-space: pre-wrap; word-break: break-word; }
:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* App instalada: respeta el notch y la barra inferior del celular */
@media (display-mode: standalone) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    body > nav, body > header { padding-top: max(12px, env(safe-area-inset-top)) !important; }
}

/* Tablas anchas: se deslizan dentro de su caja (pwa.js las envuelve) */
.pwa-tabla-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pwa-tabla-scroll > table { min-width: 100%; }

/* ---------- Menú hamburguesa (pwa.js lo agrega a los menús largos) ---------- */
.nav-toggle { display: none; }
@media (max-width: 960px) {
    nav.nav-colapsable { flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 0 !important; padding: 10px 16px !important; align-items: center !important; text-align: left !important; }
    nav.nav-colapsable h2 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem !important; letter-spacing: 1px !important; margin: 0 !important; text-align: left !important; }
    nav.nav-colapsable .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
        width: auto; min-width: 46px; height: 44px; margin: 0 0 0 10px; padding: 0 12px; border-radius: 12px;
        background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.22); color: #f8fafc;
        font: 700 0.85rem/1 inherit; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
    }
    nav.nav-colapsable .nav-toggle:hover { transform: none; box-shadow: none; }
    .nav-toggle .barras { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.2s; }
    .nav-toggle .barras::before, .nav-toggle .barras::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s; }
    .nav-toggle .barras::before { top: -6px; }
    .nav-toggle .barras::after { top: 6px; }
    nav.abierto .nav-toggle .barras { background: transparent; }
    nav.abierto .nav-toggle .barras::before { transform: translateY(6px) rotate(45deg); }
    nav.abierto .nav-toggle .barras::after { transform: translateY(-6px) rotate(-45deg); }
    .nav-toggle .aviso-punto { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }

    nav.nav-colapsable > ul {
        display: none !important; width: 100% !important; flex-direction: column !important; align-items: stretch !important;
        gap: 4px !important; margin: 10px 0 4px !important; padding: 8px 0 0 !important; overflow: visible !important;
        white-space: normal !important; border-top: 1px solid rgba(148, 163, 184, 0.16); max-height: calc(100dvh - 90px); overflow-y: auto !important;
    }
    nav.nav-colapsable.abierto > ul { display: flex !important; animation: pwa-menu 0.18s ease-out; }
    nav.nav-colapsable > ul > li { width: 100%; }
    nav.nav-colapsable > ul > li > a { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 10px; font-size: 1rem; white-space: normal; }
    nav.nav-colapsable > ul > li > a:hover, nav.nav-colapsable > ul > li > a.nav-activo { background: rgba(6, 182, 212, 0.12); }
    nav.nav-colapsable > ul > li > a.btn-login { justify-content: center; margin-top: 6px; }
}
@keyframes pwa-menu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Formularios cómodos en celular (sin zoom de iPhone) ---------- */
@media (max-width: 760px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: max(16px, 1em); }
    .admin-container, .container { padding-left: max(14px, env(safe-area-inset-left)) !important; padding-right: max(14px, env(safe-area-inset-right)) !important; }
}

/* ---------- Botón «Instalar app», avisos de conexión y de actualización ---------- */
.pwa-aviso {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9000;
    display: flex; align-items: center; gap: 12px; width: min(520px, calc(100% - 24px)); padding: 12px 12px 12px 14px;
    border-radius: 16px; background: rgba(15, 23, 42, 0.97); border: 1px solid rgba(245, 179, 1, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); color: #f8fafc; font-size: 0.92rem; line-height: 1.35;
    animation: pwa-sube 0.3s ease-out;
}
.pwa-aviso img { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.pwa-aviso .pwa-texto { flex: 1; min-width: 0; }
.pwa-aviso strong { display: block; color: #fcd34d; }
.pwa-aviso small { color: #94a3b8; }
.pwa-aviso button { width: auto; margin: 0; flex-shrink: 0; padding: 10px 14px; min-height: 42px; border: 0; border-radius: 10px; font-weight: 800; font-size: 0.85rem; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
.pwa-aviso .pwa-si { background: linear-gradient(135deg, #f5b301, #d97706); color: #1a1200; }
.pwa-aviso .pwa-no { background: transparent; color: #94a3b8; padding: 10px 8px; }
@keyframes pwa-sube { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

.pwa-offline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9100; padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
    background: #7f1d1d; color: #fee2e2; text-align: center; font-size: 0.82rem; font-weight: 700;
    transform: translateY(-100%); transition: transform 0.25s;
}
.pwa-offline.visible { transform: none; }

@media print {
    .pwa-aviso, .pwa-offline, .nav-toggle { display: none !important; }
}

/* ---------- Red de seguridad contra desbordes (todas las pantallas) ----------
   Una tabla ancha dentro de una columna de grid estiraba toda la página: ahora
   la columna puede encogerse y la tabla se desliza dentro de su tarjeta. */
.card-admin, .portal-card, .grid-2 > *, [class*="grid"] > *, .admin-container > div, .container > div { min-width: 0; }
.card-admin, .portal-card { max-width: 100%; }
.tabla-wrapper, .table-responsive, .tabla-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 960px) {
    /* Menús cortos (sin hamburguesa): el título puede bajar de línea */
    nav:not(.nav-colapsable) h2 { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
    /* Formularios: campos a lo ancho de la tarjeta */
    .card-admin form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    .card-admin form select, .card-admin form textarea { max-width: 100%; }
    .card-admin { padding: 16px !important; }
}

/* ---------- Celular: indicadores en 2 columnas (antes una tarjeta enorme por fila) ---------- */
@media (max-width: 600px) {
    .ux-a83186.ux-a83186.ux-a83186, .ux-d38bd8.ux-d38bd8.ux-d38bd8, .stats-prensa, .resumen-estados,
    .portal-grid, .resumen-nomina, .acciones-rapidas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
    }
    .portal-grid > .portal-stat:only-child, .portal-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .portal-stat { padding: 14px !important; }
    .portal-stat .numero { font-size: 1.6rem !important; }
    .stat-numero, .ux-a83186 .stat-numero { font-size: 1.9rem !important; }
    .mr-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .mr-resumen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .mr-resumen > * { padding: 12px !important; }

    /* Panel del administrador: accesos rápidos en 2 columnas */
    .nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .nav-card { padding: 16px 10px !important; }
    .nav-card h3 { font-size: 0.92rem !important; line-height: 1.25; }
    .nav-card p { font-size: 0.72rem !important; line-height: 1.3; }
    .nav-card .nav-icono { font-size: 1.7rem !important; }

    /* Panel del docente: tarjetas de nómina e inscripciones una debajo de otra */
    .ux-366c96.ux-366c96.ux-366c96 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ux-366c96 .btn-secundario { display: block !important; width: 100%; margin-top: 8px !important; }
}
@media (max-width: 340px) {
    .nav-grid, .portal-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Tablet (601–1024 px) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
    .admin-container { padding-left: 20px !important; padding-right: 20px !important; }
    .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
    .nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Grids «auto-fit»: nunca más anchos que su tarjeta en pantallas angostas */
.fila-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.portal-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.portal-datos { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.lista-colegios { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.galeria-aus { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }

/* Insignias disponibles en todas las páginas (antes solo en los paneles de familias) */
:where(.chip) { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; background: rgba(148, 163, 184, 0.18); color: #cbd5e1; white-space: nowrap; }
:where(.chip-ok) { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
:where(.chip-aviso) { background: rgba(234, 179, 8, 0.18); color: #facc15; }
:where(.chip-malo) { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
:where(.chip-info) { background: rgba(6, 182, 212, 0.18); color: #67e8f9; }

/* v3.1 — Botón y menú «Compartir» */
.btn-compartir { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(37, 211, 102, 0.5); background: rgba(37, 211, 102, 0.14); color: #4ade80; font-weight: 800; font-size: 0.88rem; cursor: pointer; text-decoration: none; }
.btn-compartir:hover { background: rgba(37, 211, 102, 0.24); }
.sc-compartir-menu { position: absolute; z-index: 9999; width: 220px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: #0f172a; border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.sc-compartir-menu a, .sc-compartir-menu button { display: block; padding: 10px 12px; border-radius: 10px; border: 0; color: #fff; font: 700 0.9rem system-ui, sans-serif; text-decoration: none; text-align: left; cursor: pointer; }
.sc-compartir-menu button { background: #334155; }

/* Botón de ayuda flotante (manual del rol) */
.sc-ayuda { position: fixed; left: 31px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 900; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f5b301; color: #1a1200; font: 900 1.35rem system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.sc-ayuda:hover { transform: scale(1.06); }
@media print { .sc-ayuda, .sc-compartir-menu, .btn-compartir { display: none !important; } }