/* ============================================================
   HES — Capa de diseño móvil (2026-07-22)
   Se carga DESPUÉS de los estilos inline de cada template, por lo
   que gana el cascade a igual especificidad. Cubre las 48 vistas.
   Breakpoints: 768px (tablet/teléfono) y 480px (teléfono).
   Modo app (APK): html.hes-app — safe areas y ajustes táctiles.
   ============================================================ */

/* ---------- 1. GLOBAL ---------- */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 768px) {
    /* Evitar scroll horizontal accidental en cualquier vista */
    main { overflow-x: hidden; }

    /* Tipografía de página */
    main h1 { font-size: 1.35rem; }
    main h2 { font-size: 1.15rem; }

    /* Inputs: 16px evita el auto-zoom de los navegadores móviles */
    input, select, textarea { font-size: 16px !important; }

    /* Objetivos táctiles mínimos */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    button { touch-action: manipulation; }

    /* Cards y contenedores */
    .card { padding: 16px; border-radius: 12px; }

    /* Grids de estadísticas: 2 columnas parejas */
    .stats-grid, .stats-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 12px 10px; }
    .stat-value { font-size: 1.3rem; }
    .stat-label { font-size: 0.7rem; }

    /* Barras de filtros: carrusel horizontal en vez de párrafo de botones */
    .filter-bar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-btn { white-space: nowrap; flex-shrink: 0; min-height: 38px; }

    /* Filas de información etiqueta/valor: apilar */
    .info-row { flex-wrap: wrap; gap: 2px 10px; }

    /* Formularios */
    .form-group { margin-bottom: 14px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; }

    /* Toasts: ancho completo arriba */
    .toast-container { left: 12px; right: 12px; top: 12px; }
    .toast { width: 100%; box-sizing: border-box; }

    /* Modales genéricos HES */
    .hes-modal { width: 94%; max-width: 420px; padding: 1.4rem; max-height: 88vh; overflow-y: auto; }
    .hes-modal-actions { flex-wrap: wrap; }
    .hes-modal-btn { min-height: 44px; flex: 1 1 auto; }
}

@media (max-width: 480px) {
    main { padding: 14px 12px !important; }
    .card { padding: 14px; }
    /* Botones de acción principales a lo ancho */
    form .btn[type="submit"], .btn-primary { width: 100%; }
}

/* Sin efectos hover en pantallas táctiles (evita estados "pegados") */
@media (hover: none) {
    .btn:hover, .control-btn:hover, .btn-red-main:hover, .hes-modal-btn:hover { transform: none; }
}

/* ---------- 2. AUTH (login, registro, recuperar, verificar) ---------- */
@media (max-width: 480px) {
    .auth-container { padding: 16px 4px; }
    .auth-container .card { padding: 22px 18px; }
    .auth-logo img { max-width: 130px; }
    .date-selects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .checkbox-label { align-items: flex-start; line-height: 1.4; }
}

/* ---------- 3. SALA ACTIVA (vista núcleo de la app) ---------- */
@media (max-width: 768px) {
    .room-header { margin-bottom: 1rem; }
    .room-emotion { font-size: 1.6rem; }
    .room-title { font-size: 1.05rem; }

    .turn-banner { padding: 0.9rem; margin-bottom: 1rem; border-radius: 0.8rem; }
    .turn-banner h3 { font-size: 1rem; }
    .turn-banner p { font-size: 0.82rem; }
    .turn-timer { font-size: 1.6rem; margin: 0.35rem 0; }
    .audio-visualizer { height: 22px; margin: 0.5rem 0; }

    .my-position-banner { padding: 0.6rem 0.9rem; font-size: 0.85rem; }

    /* Participantes: cuadrícula 2 columnas, cards fluidas */
    .participants-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; justify-items: stretch; }
    .participant-card { width: auto; padding: 0.9rem 0.5rem; }
    .participant-card.has-turn { transform: scale(1.03); }
    .participant-avatar { width: 52px; height: 52px; font-size: 1.25rem; }

    /* Controles: barra fija al alcance del pulgar */
    .controls-section { position: sticky; bottom: 8px; z-index: 60; padding: 0.8rem 0.6rem; margin-bottom: 0.75rem; box-shadow: 0 -4px 24px rgba(0,0,0,0.45); border: 1px solid rgba(67,185,178,0.15); }
    .main-controls { gap: 0.55rem; }
    .control-btn, .btn-red-main { width: 54px; height: 54px; font-size: 1.15rem; }
    .control-label { font-size: 0.6rem; margin-top: 0.25rem; }

    /* Dropdown rojo: que no se salga por el borde */
    .red-dropdown { bottom: 68px; left: auto; right: 0; transform: none; }
    .red-dropdown-arrow { left: auto; right: 22px; transform: none; }

    /* Cola de turnos debajo de participantes */
    .room-body { gap: 1rem; margin-bottom: 1rem; }
    .queue-panel { padding: 0.85rem; }

    /* Overlays de sala */
    .countdown-box, .inactivity-box { max-width: 92%; padding: 1.6rem; }
    .countdown-number { font-size: 3rem; }
    .inactivity-countdown { font-size: 2.4rem; }
}

@media (max-width: 360px) {
    .participants-row { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .control-btn, .btn-red-main { width: 48px; height: 48px; }
}

/* ---------- 4. FLUJO DE SALAS (selección, cola, lobby, valorar, historial, crisis) ---------- */
@media (max-width: 768px) {
    /* Selección de emoción */
    .voz-title { font-size: 1.25rem; }
    .voz-emotions { gap: 0.6rem; }
    .voz-emotion { padding: 0.7rem 0.4rem; }
    .voz-roles { flex-wrap: wrap; }
    .voz-submit { width: 100%; min-height: 48px; }
    .voz-room { flex-wrap: wrap; gap: 0.5rem; }
    .voz-room-btn { width: 100%; min-height: 44px; }

    /* Cola de espera */
    .queue-container { padding: 0 4px; }
    .queue-card { padding: 22px 16px; }
    .queue-position { font-size: 2.6rem; }
    .queue-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    /* Lobby */
    .lobby-card { padding: 20px 14px; }
    .participants-grid { gap: 0.7rem; }

    /* Valorar sesión */
    .rating-card { padding: 20px 14px; }
    .rating-stars { gap: 6px; }
    .rating-stars .star { font-size: 2rem; padding: 6px; }
    .comment-section textarea { width: 100%; box-sizing: border-box; }

    /* Historial de sesiones */
    .session-card { flex-wrap: wrap; gap: 8px; padding: 14px; }

    /* Recursos de crisis */
    .emergency-banner { padding: 14px; }
    .emergency-number { font-size: 1.5rem; }
    .resource-card { flex-wrap: wrap; padding: 14px; }
    .contact-item { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- 5. PERFIL Y CONFIGURACIÓN ---------- */
@media (max-width: 768px) {
    .profile-hero { flex-wrap: wrap; gap: 12px; text-align: center; justify-content: center; }
    .profile-info { width: 100%; }
    .profile-badges { justify-content: center; }
    .pf-avatar-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
    .pf-emotion-pills { gap: 6px; }
    .pf-emotion-pill { min-height: 40px; }
    .pf-modal-card { width: 94%; max-height: 86vh; overflow-y: auto; }
    .kebab-menu { right: 8px; }
}

/* ---------- 6. GAMIFICACIÓN (logros, ranking, recompensas) ---------- */
@media (max-width: 768px) {
    .achievements-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .achievement-card { padding: 12px 8px; }
    .points-display { font-size: 1.6rem; }
    .ranking-item { padding: 10px 12px; gap: 10px; }
    .rank-points { font-size: 0.85rem; }
    .my-position { position: sticky; bottom: 8px; z-index: 40; box-shadow: 0 -4px 18px rgba(0,0,0,0.4); }
    .recompensas-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .recompensa-card { padding: 12px 10px; }
    .transaction-item { flex-wrap: wrap; gap: 4px 10px; }
}

/* ---------- 7. CONSEJEROS ---------- */
@media (max-width: 768px) {
    .availability-toggle { flex-wrap: wrap; gap: 10px; }
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .quick-actions .btn { width: 100%; }
    .session-item { flex-wrap: wrap; gap: 6px; }
    .progress-card { padding: 14px; }
}

/* ---------- 8. MODERACIÓN Y SUPERADMIN (uso staff en móvil) ---------- */
@media (max-width: 768px) {
    .reporte-item, .reporte-header { flex-wrap: wrap; gap: 6px; }
    .detail-card { padding: 14px; }
    .u-badge { white-space: nowrap; }
    .admin-link { min-height: 44px; display: flex; align-items: center; }
    .search-bar input { width: 100%; box-sizing: border-box; }
    /* Listas largas de staff: permitir scroll horizontal si una fila no cabe */
    .list-row, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 9. MODO APP (APK — html.hes-app) ---------- */
/* La app añade la clase via UA HESMobile. Safe areas para notch/gestos. */
html.hes-app .topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
html.hes-app .sidebar { padding-top: env(safe-area-inset-top, 0px); }
html.hes-app main { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
html.hes-app .controls-section { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
/* Dentro de la app no hay URL bar: el header pesa menos visualmente */
html.hes-app .topbar { position: sticky; top: 0; z-index: 90; }
/* Elementos irrelevantes dentro de la app (marcar con .hide-in-app) */
html.hes-app .hide-in-app { display: none !important; }