/* =====================================================
   Mobile UX/UI — ERP Fundación Red
   Mejoras específicas para dispositivos móviles
   Sin cambios de funcionalidad, solo estilos y UX
   ===================================================== */

/* ─── Variables táctiles ─── */
:root {
    --touch-min: 44px;   /* Tamaño mínimo WCAG para toque */
    --mobile-padding: 0.875rem;
}

/* ============================================================
   1. HEADER MÓVIL — Mejor experiencia táctil
   ============================================================ */
@media (max-width: 768px) {
    .app-header {
        padding: 0 var(--mobile-padding);
        height: 56px;
    }

    /* Botón hamburguesa más grande y táctil */
    .header-menu-btn {
        width: var(--touch-min);
        height: var(--touch-min);
        border-radius: var(--border-radius-sm);
        margin-left: -6px; /* Compensar el padding extra */
    }

    /* Título del header más pequeño para no aplastar */
    .header-title {
        font-size: 0.875rem;
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Botones de iconos del header más táctiles */
    .header-icon-btn {
        width: var(--touch-min);
        height: var(--touch-min);
    }

    /* Chip de usuario compacto */
    .user-chip {
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    }

    /* Dropdown de notificaciones — no se sale de pantalla */
    .header-dropdown[style*="width:300px"],
    .header-dropdown {
        width: calc(100vw - 2rem) !important;
        right: -0.875rem !important;
        left: auto !important;
        max-width: 320px;
    }

    /* Separador oculto en móvil */
    .header-right > div[style*="width:1px"] {
        display: none;
    }
}

/* ============================================================
   2. SIDEBAR OVERLAY — Mejorar tap area
   ============================================================ */
@media (max-width: 768px) {
    /* El overlay del sidebar debe cubrir todo y tener pointer-events correcto */
    .sb-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.55);
        z-index: 999;
        pointer-events: none;   /* No bloquear clics cuando está oculto */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }
    .sb-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: all;    /* Solo bloquear cuando está visible */
    }


}

/* ============================================================
   3. PÁGINA PRINCIPAL — padding y scroll cómodo
   ============================================================ */
@media (max-width: 768px) {
    .page-wrapper {
        padding: var(--mobile-padding);
        /* Permitir scroll suave */
        -webkit-overflow-scrolling: touch;
    }

    /* Safe area para iPhones con notch */
    .main-content {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ============================================================
   4. MÓDULOS — Encabezados responsivos
   ============================================================ */
@media (max-width: 640px) {
    .module-header {
        gap: 0.75rem;
    }

    .module-title {
        font-size: 1.2rem;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Botones de acción que ocupen bien el ancho */
    .btn-primary-action {
        flex: 1;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* ============================================================
   5. FILTROS — Pantalla pequeña
   ============================================================ */
@media (max-width: 640px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
        width: 100%;
    }

    .filter-select {
        width: 100%;
        min-height: var(--touch-min);
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .search-input {
        min-height: var(--touch-min);
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

/* ============================================================
   6. TABLAS — Scroll horizontal con indicador visual
   ============================================================ */
@media (max-width: 768px) {
    .table-container,
    .ben-table-wrap,
    .ev-table-wrap,
    .abs-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Indicador de scroll disponible */
        background:
            linear-gradient(to right, var(--bg-surface) 30%, transparent),
            linear-gradient(to left,  var(--bg-surface) 30%, transparent) 100% 0,
            linear-gradient(to right, rgba(0,0,0,0.08), transparent) 0 0,
            linear-gradient(to left,  rgba(0,0,0,0.08), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Celdas de tabla más compactas en móvil */
    .data-table th,
    .data-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Botones de acción en tablas — más fáciles de tocar */
    .action-btns {
        gap: 0.5rem;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   7. MODALES — Full screen en móvil pequeño
   ============================================================ */
@media (max-width: 640px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end; /* Modal sube desde abajo */
    }

    .modal-box {
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        max-height: 92vh;
        padding: 1.25rem;
        width: 100%;
        max-width: 100%;
        /* Animación de entrada desde abajo */
        animation: modalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    /* Línea indicadora de arrastre en móvil */
    .modal-box::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 1rem;
    }

    .modal-header {
        margin-bottom: 1rem;
    }

    .modal-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .btn-cancel,
    .btn-save,
    .btn-danger-modal {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }

    /* Modal content (StandardLibrary y otros) */
    .modal-content {
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        max-height: 92vh;
        max-width: 100%;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .modal-footer button {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* ============================================================
   8. FORMULARIOS — Mejor UX en móvil
   ============================================================ */
@media (max-width: 640px) {
    .form-row-cols {
        flex-direction: column;
    }

    .modal-input,
    .form-control,
    .profile-input {
        min-height: var(--touch-min);
        font-size: 16px; /* Evita zoom automático en iOS */
        padding: 0.625rem 0.875rem;
    }

    select.modal-input,
    select.form-control {
        min-height: var(--touch-min);
    }

    textarea.modal-input,
    textarea.form-control {
        min-height: 80px; /* Conservar min-height en textareas */
    }

    /* Formulario de perfil */
    .profile-form-row {
        grid-template-columns: 1fr;
    }

    .profile-form-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .profile-btn-primary,
    .profile-btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* ============================================================
   9. DASHBOARD — KPIs y layout
   ============================================================ */
@media (max-width: 480px) {
    .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .kpi-card__value {
        font-size: 1.375rem;
    }

    .dash-filters-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.875rem;
        gap: 0.75rem;
    }

    .filter-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-select {
        width: 100%;
    }
}

/* ============================================================
   10. TAREAS — Layout panel + calendario
   ============================================================ */
@media (max-width: 768px) {
    .tasks-operative-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 56px);
        overflow: visible;
    }

    /* ── Tabs bar: título arriba, botones en fila abajo ── */
    .tasks-tabs-bar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.875rem var(--mobile-padding) !important;
        align-items: center !important;
    }

    /* h2 ocupa todo el ancho → empuja botones a siguiente fila */
    .tasks-tabs-bar h2 {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
        font-size: 1.15rem !important;
    }

    /* Botones comparten la fila, cada uno mitad del ancho */
    .tasks-tabs-bar > .btn {
        flex: 1 1 0 !important;
        min-width: 0;
        justify-content: center;
        min-height: var(--touch-min);
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        text-align: center;
    }

    .tasks-left-panel {
        width: 100% !important;
        max-width: 100%;
        min-width: unset;
        max-height: 50vh !important;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column !important;
    }

    /* En móvil, queremos que el panel SIEMPRE muestre la lista de tareas,
       incluso si internamente tiene la clase 'collapsed' */
    .tasks-left-panel.collapsed {
        max-height: 50vh !important;
        width: 100% !important;
    }

    .tasks-left-panel .panel-tasks-scroll,
    .tasks-left-panel.collapsed .panel-tasks-scroll {
        display: block !important;
        overflow-y: auto !important;
        flex: 1;
    }

    .tasks-left-panel .panel-filters,
    .tasks-left-panel.collapsed .panel-filters {
        display: block !important;
    }

    /* Asegurar que panel-header siempre sea visible */
    .tasks-left-panel .panel-header,
    .tasks-left-panel.collapsed .panel-header {
        display: block !important;
    }

    .tasks-calendar-zone {
        height: 60vh;
        min-height: 400px;
    }

    /* Toolbar del calendario compacto */
    .calendar-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem var(--mobile-padding);
    }

    .cal-toolbar-left {
        flex: 1;
    }

    /* Ocultar pills de vista en móvil (ya existente pero reforzado) */
    .cal-view-pills {
        display: none;
    }

    /* Botón toggle panel más táctil */
    .btn-toggle-panel {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Popover de tarea: centrado y ancho completo */
    .task-quick-popover {
        width: calc(100vw - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        top: auto !important;
        bottom: 1rem !important;
        position: fixed !important;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Panel de detalle de tarea: full screen en móvil */
    .task-detail-panel {
        width: 100vw;
    }

    .task-detail-body {
        padding: 1rem;
    }

    .task-detail-header {
        padding: 1rem;
    }

    .task-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Toast de tareas en móvil */
    .tasks-toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: unset;
        text-align: center;
    }

    /* ── Dashboard de Tareas — KPIs en 2 columnas ── */
    .tasks-dashboard-layout .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* ── Dashboard de Tareas — Gráficos en 1 columna (sobreescribe inline style) ── */
    .tasks-dashboard-layout > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ============================================================
   11. EVENTOS — Responsive mejorado
   ============================================================ */
@media (max-width: 768px) {
    .events-module {
        padding: var(--mobile-padding);
        gap: 1rem;
    }

    .events-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ev-view-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ev-view-tab {
        white-space: nowrap;
        min-height: var(--touch-min);
    }

    .ev-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .ev-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Modal de detalle de evento: full width */
    .ev-modal {
        width: 100vw;
    }

    .ev-modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ev-modal-tab {
        min-height: 44px;
        white-space: nowrap;
    }

    /* Formulario de evento */
    .ev-form-modal {
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        max-height: 92vh;
        width: 100%;
        max-width: 100%;
    }

    .ev-form-row {
        grid-template-columns: 1fr;
    }

    .ev-form-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .ev-form-footer button {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }

    /* Filtros de eventos */
    .ev-filters {
        gap: 0.5rem;
    }

    .ev-filter-input,
    .ev-search {
        width: 100%;
        min-width: unset;
        min-height: var(--touch-min);
        font-size: 16px;
    }

    .ev-btn {
        min-height: var(--touch-min);
    }
}

@media (max-width: 480px) {
    .ev-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .events-header {
        gap: 0.75rem;
    }
}

/* ============================================================
   12. BENEFICIARIOS — Responsive mejorado
   ============================================================ */
@media (max-width: 768px) {
    .ben-module {
        padding: var(--mobile-padding);
        gap: 1rem;
    }

    .ben-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ben-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .ben-view-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ben-view-tab {
        white-space: nowrap;
        min-height: var(--touch-min);
    }

    .ben-cards-grid {
        grid-template-columns: 1fr;
    }

    .ben-filters {
        gap: 0.5rem;
    }

    .ben-filter-input,
    .ben-search {
        width: 100%;
        min-width: unset;
        min-height: var(--touch-min);
        font-size: 16px;
    }

    /* Panel lateral de detalle */
    .ben-sidebar-panel {
        max-width: 100vw;
        width: 100vw;
    }

    .ben-side-body {
        padding: 1rem;
    }

    /* Modal de formulario */
    .ben-modal-mask {
        padding: 0;
        align-items: flex-end;
    }

    .ben-modal {
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        max-height: 92vh;
        max-width: 100%;
    }

    .ben-form-grid {
        grid-template-columns: 1fr;
    }

    .ben-btn {
        min-height: var(--touch-min);
    }

    /* Tabs de detalle scrolleables */
    .ben-detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .ben-stats-grid {
        grid-template-columns: 1fr;
    }

    .ben-map-container {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .ben-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   13. AUSENCIAS — Responsive mejorado
   ============================================================ */
@media (max-width: 768px) {
    .absences-module {
        padding: var(--mobile-padding);
        gap: 1rem;
    }

    .absences-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .abs-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .abs-tab {
        white-space: nowrap;
        min-height: var(--touch-min);
    }

    .abs-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .abs-kpi-card {
        padding: 1rem;
    }

    .abs-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .abs-filters {
        width: 100%;
    }

    .abs-filter-select,
    .abs-filter-input {
        width: 100%;
        min-width: unset;
        min-height: var(--touch-min);
        font-size: 16px;
    }

    /* Ocultar columnas menos importantes en tabla */
    .abs-table th:nth-child(n+5),
    .abs-table td:nth-child(n+5) {
        display: none;
    }

    /* Modal de ausencia */
    .abs-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .abs-modal {
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        max-width: 100%;
    }

    .abs-form-grid {
        grid-template-columns: 1fr;
    }

    .abs-modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .abs-modal-footer .abs-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }

    .abs-btn {
        min-height: var(--touch-min);
    }

    /* Tipo de ausencia grid */
    .abs-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .abs-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .abs-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   14. INVENTARIOS — Responsive mejorado
   ============================================================ */
@media (max-width: 768px) {
    .inv-hub {
        padding: var(--mobile-padding);
    }

    .inv-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .inv-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .inv-builder {
        padding: var(--mobile-padding);
    }

    .builder-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .builder-layout {
        grid-template-columns: 1fr;
    }

    .inv-kpi-grid,
    .inv-analytics-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .inv-charts-grid {
        grid-template-columns: 1fr;
    }

    /* Filtros de inventarios */
    .inv-filters-bar,
    .inv-kardex-filters {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .inv-search-input,
    .inv-filter-select {
        width: 100%;
        min-width: unset;
        min-height: var(--touch-min);
        font-size: 16px;
    }

    /* Pills de filtro scrolleables */
    .inv-filter-pills {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .inv-pill {
        white-space: nowrap;
        min-height: var(--touch-min);
    }

    /* Toast de inventarios */
    .inv-toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: unset;
        text-align: center;
    }

    /* Tabs del builder */
    .builder-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .builder-tabs button {
        white-space: nowrap;
        min-height: var(--touch-min);
    }
}

@media (max-width: 480px) {
    .inv-kpi-grid,
    .inv-analytics-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   15. REPORTS — Responsive mejorado
   ============================================================ */
@media (max-width: 768px) {
    .reports-container {
        gap: 1rem;
    }

    .reports-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
    }

    .report-tab-btn {
        white-space: nowrap;
        min-height: var(--touch-min);
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .report-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .reports-constructor {
        grid-template-columns: 1fr;
    }

    .builder-sidebar {
        position: static;
    }

    .preview-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .preview-grid-2 {
        grid-template-columns: 1fr;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }

    .report-preview-container {
        padding: 1.25rem;
    }

    .report-preview-header {
        flex-direction: column;
        gap: 1rem;
    }

    .report-preview-meta {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .report-kpi-grid {
        grid-template-columns: 1fr;
    }

    .preview-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* ============================================================
   15. BOTONES — Mínimo táctil universal
   ============================================================ */
@media (max-width: 768px) {
    /* Cualquier botón interactivo debe tener mínimo 44px */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cancel,
    .btn-save,
    .btn-primary-action,
    .abs-btn,
    .ben-btn,
    .ev-btn {
        min-height: var(--touch-min);
    }

    /* Botones de paginación */
    .page-btn,
    .ev-page-btn,
    .abs-page-btn {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    /* Botones de icono en tablas */
    .icon-btn,
    .abs-modal-close,
    .modal-close {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   16. TOAST — Centrado en móvil
   ============================================================ */
@media (max-width: 640px) {
    .toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: unset;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   17. MÓDULO PERFIL — Responsive
   ============================================================ */
@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profile-sidebar-card {
        position: static;
    }

    .profile-main-card {
        padding: 1.25rem;
    }

    .profile-form-row {
        grid-template-columns: 1fr;
    }

    .profile-form-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .profile-btn-primary,
    .profile-btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
    }
}

/* ============================================================
   18. MÓDULOS ESPECÍFICOS — Workday, Reports, etc.
   ============================================================ */
@media (max-width: 768px) {
    /* Workday */
    .workday-module,
    .workday-header {
        padding: var(--mobile-padding);
    }

    /* Reports */
    .reports-grid,
    [class*="reports-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* KPI grids genéricos */
    [class*="kpi-grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   19. INPUTS — Evitar zoom en iOS (font-size mínimo 16px)
   ============================================================ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* Previene zoom automático en iOS Safari */
    }
}

/* ============================================================
   20. EXTRAS UX — Mejoras generales táctiles
   ============================================================ */

/* Eliminar el delay de 300ms en táctil */
* {
    touch-action: manipulation;
}

/* Mejor feedback visual en tap (sin hover persistente) */
@media (hover: none) {
    .card:hover,
    .area-card:hover,
    .user-card:hover,
    .kpi-card:hover,
    .dash-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .nav-item:hover,
    .sidebar-v3 button:not(.active):hover {
        background: transparent;
    }

    /* En touch, mostrar acciones rápidas siempre */
    .ptc-quick-actions {
        opacity: 1;
    }
}

/* Scroll suave global */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }

    /* Evitar que el body tenga overflow cuando el sidebar está abierto */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* ============================================================
   21. SAFE AREA — iPhone con notch/Dynamic Island
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .app-header {
            padding-left: max(var(--mobile-padding), env(safe-area-inset-left));
            padding-right: max(var(--mobile-padding), env(safe-area-inset-right));
        }

        .page-wrapper {
            padding-bottom: max(var(--mobile-padding), env(safe-area-inset-bottom));
        }

        .toast {
            bottom: max(1rem, env(safe-area-inset-bottom));
        }

        .tasks-toast {
            bottom: max(1rem, env(safe-area-inset-bottom));
        }

        .modal-box,
        .abs-modal,
        .ben-modal,
        .ev-form-modal {
            padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================
   22. MENÚ KIOSKO MÓVIL — Menú principal en pantallas pequeñas
   ============================================================ */
.mobile-kiosk-menu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem 0 2rem;
    min-height: 100%;
}

/* Bienvenida */
.kiosk-welcome {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--color-primary, #E53935) 0%, #C62828 100%);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(229, 57, 53, 0.35);
    position: relative;
    overflow: hidden;
}
.kiosk-welcome::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}

.kiosk-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.4);
}

.kiosk-welcome-text {
    flex: 1;
    min-width: 0;
}

.kiosk-greeting {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.kiosk-date {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 0.15rem;
    text-transform: capitalize;
}

.kiosk-logout-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.kiosk-logout-btn:hover,
.kiosk-logout-btn:active {
    background: rgba(255,255,255,0.3);
}

/* Grupo de módulos */
.kiosk-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kiosk-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #64748b);
    padding: 0 0.25rem;
}

.kiosk-group-label i {
    color: var(--color-primary, #E53935);
    font-size: 0.75rem;
}

/* Grid 2 columnas de tiles */
.kiosk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Tile individual */
.kiosk-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.1rem 0.75rem;
    background: var(--bg-surface, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary, #1e293b);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    min-height: 88px;
    position: relative;
    overflow: hidden;
}

.kiosk-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kiosk-color, #E53935);
    border-radius: 14px 14px 0 0;
    opacity: 0;
    transition: opacity 0.18s;
}

.kiosk-tile:active,
.kiosk-tile.router-link-active {
    background: color-mix(in srgb, var(--kiosk-color, #E53935) 8%, var(--bg-surface, #fff));
    border-color: var(--kiosk-color, #E53935);
    transform: scale(0.97);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.kiosk-tile:active::before,
.kiosk-tile.router-link-active::before {
    opacity: 1;
}

.kiosk-tile-icon {
    font-size: 1.75rem;
    line-height: 1;
    display: block;
}

.kiosk-tile-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: var(--text-primary, #1e293b);
}

/* Dark mode para el kiosko */
[data-theme="dark"] .kiosk-tile {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .kiosk-tile:active {
    background: color-mix(in srgb, var(--kiosk-color, #E53935) 15%, var(--bg-surface));
}

/* En desktop, ocultar el kiosko (lo maneja el v-if pero por seguridad) */
@media (min-width: 769px) {
    .mobile-kiosk-menu {
        display: none !important;
    }
}

/* En móvil extra pequeño, ajustar labels */
@media (max-width: 360px) {
    .kiosk-tile {
        padding: 0.875rem 0.5rem;
        min-height: 80px;
    }
    .kiosk-tile-icon {
        font-size: 1.5rem;
    }
    .kiosk-tile-label {
        font-size: 0.72rem;
    }
    .kiosk-grid {
        gap: 0.5rem;
    }
}