/* ================================================================
   VencePro — MOBILE BASE CSS
   
   Layout structure para mobile (.layout-mobile).
   Este archivo NO usa Tailwind — es CSS puro para:
     1. Ocultar header/sidebar desktop
     2. Reservar espacio para TopBar + BottomNav
     3. Ajustar main-content margins
     4. Smooth transitions
   
   IMPACTO EN DESKTOP: CERO — todo dentro de .layout-mobile selector.
   ================================================================ */

/* ================================================================
   1. HEADER MOBILE — Visible pero simplificado (sin hamburguesa)
   ================================================================ */
.layout-mobile .header {
    height: 64px !important;
    z-index: 50 !important;
}

.layout-mobile .btn-menu {
    display: none !important;
}

.layout-mobile .brand-subtitle {
    display: none !important;
}

.layout-mobile .header-content {
    padding: 0 12px 0 16px !important;
}

.layout-mobile .brand-logo {
    width: 36px !important;
    height: 36px !important;
}

.layout-mobile .brand-title {
    font-size: 16px !important;
}

.layout-mobile .header-brand {
    gap: 8px !important;
}

/* Profile: solo avatar, sin texto */
.layout-mobile .profile-info {
    display: none !important;
}

.layout-mobile .btn-profile>ion-icon {
    display: none !important;
}

/* Dropdowns mobile-friendly — fixed position para contener en viewport */
.layout-mobile .notifications-dropdown,
.layout-mobile .profile-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 16px !important;
    left: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 380px !important;
    transform: none !important;
    z-index: 9999 !important;
}

.layout-mobile .notifications-dropdown {
    max-height: calc(100vh - 64px - 90px - 16px) !important;
    overflow-y: auto !important;
}

.layout-mobile .profile-dropdown {
    width: 260px !important;
    max-width: calc(100vw - 32px) !important;
}

.layout-mobile .sidebar {
    display: none !important;
}

.layout-mobile .sidebar-overlay {
    display: none !important;
}

/* ================================================================
   2. MAIN CONTENT — MOBILE LAYOUT
   ================================================================ */
.layout-mobile .main-content {
    /* Remove desktop sidebar margin + desktop margin-top */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;

    /* Space for Header (64px) + BottomNav (80px) + home indicator */
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 16px), 16px)) !important;

    /* Full width — prevent horizontal overflow */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;

    /* iOS smooth scroll */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    min-height: 100vh;
}


/* ================================================================
   2b. ADMIN PAGE WRAPPERS — Consistent padding on mobile
   ================================================================ */
.layout-mobile .dashboard-admin,
.layout-mobile .trabajadores-page,
.layout-mobile .alertas-page,
.layout-mobile .usuarios-page,
.layout-mobile .whatsapp-page,
.layout-mobile .reportes-page,
.layout-mobile .logs-page,
.layout-mobile .configuracion-page {
    padding: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ================================================================
   3. COMPACT DESKTOP ELEMENTS IN MOBILE
   ================================================================ */

/* Connection actions: stack vertically en mobile */
.layout-mobile .connection-actions {
    flex-direction: column !important;
    width: 100% !important;
}

.layout-mobile .connection-actions .btn {
    width: 100% !important;
    justify-content: center !important;
}

/* Page header — sin padding en wrapper, visual card es page-header-content */
.layout-mobile .page-header {
    padding: 0 !important;
    margin-bottom: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.layout-mobile .page-header-content {
    border-radius: 16px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.layout-mobile .page-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
}

.layout-mobile .page-subtitle {
    font-size: 13px !important;
}

/* Button inside page-header: full-width on mobile, below title */
.layout-mobile .page-header .btn {
    width: 100% !important;
    margin-top: 10px !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    order: 2 !important;
}

.layout-mobile .page-header>div:first-child {
    order: 1 !important;
    width: 100% !important;
}

/* ================================================================
   3b. UNIFIED CONTAINER WIDTH — Todas las cards/sections al mismo ancho
   ================================================================ */
.layout-mobile .filters-card,
.layout-mobile .connection-card,
.layout-mobile .filters-section,
.layout-mobile .connection-section,
.layout-mobile .table-section,
.layout-mobile .stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ================================================================
   4. TABLES — Keep original design, just allow horizontal scroll
   ================================================================ */
.layout-mobile .shared-data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
}

/* ================================================================
   5. FORM OPTIMIZATIONS (Mobile)
   ================================================================ */
.layout-mobile input,
.layout-mobile select,
.layout-mobile textarea {
    font-size: 16px !important;
    /* Prevents iOS zoom on focus */
    border-radius: 12px !important;
}

.layout-mobile .filter-select {
    width: 100% !important;
    margin-bottom: 8px;
}

.layout-mobile .documentos-filters,
.layout-mobile .filter-group {
    flex-direction: column !important;
    width: 100% !important;
}

/* ================================================================
   6. KPI CARDS — MOBILE COMPACT (prevent overflow)
   ================================================================ */
.layout-mobile .kpis-section {
    max-width: 100% !important;
    overflow: hidden !important;
}

.layout-mobile .kpis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
}

.layout-mobile .kpi-card {
    padding: 14px !important;
    border-radius: 16px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

.layout-mobile .kpi-number {
    font-size: 28px !important;
}

.layout-mobile .kpi-label {
    font-size: 12px !important;
}

/* ================================================================
   7. MODAL → BOTTOM SHEET (Mobile)
   ================================================================ */
.layout-mobile .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
}

.layout-mobile .modal-container,
.layout-mobile .modal-container.modal-medium,
.layout-mobile .modal-container.modal-large {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    animation: slideUp 300ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.layout-mobile .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 12px !important;
    gap: 8px;
}

/* Drag handle */
.layout-mobile .modal-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d1d6;
    flex-shrink: 0;
}

/* Title centered, close button absolute right */
.layout-mobile .modal-title {
    text-align: center !important;
    width: 100%;
}

.layout-mobile .modal-close {
    position: absolute !important;
    top: 16px;
    right: 16px;
}

/* ================================================================
   8. ACTION CARDS — MOBILE GRID
   ================================================================ */
.layout-mobile .actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.layout-mobile .action-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
}

.layout-mobile .action-label {
    font-size: 12px !important;
}

/* ================================================================
   9. WELCOME SECTION — HIDDEN (replaced by greeting card)
   ================================================================ */
.layout-mobile .welcome-section {
    display: none !important;
}

/* ================================================================
   10. SCROLLBAR HIDDEN (iOS style)
   ================================================================ */
.layout-mobile,
.layout-mobile *,
.layout-mobile html,
.layout-mobile body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.layout-mobile::-webkit-scrollbar,
.layout-mobile *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html.layout-mobile,
html.layout-mobile body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html.layout-mobile::-webkit-scrollbar,
html.layout-mobile body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ================================================================
   11. ANIMATIONS
   ================================================================ */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ================================================================
   12. UTILITY: HIDE ON DESKTOP / SHOW ON MOBILE
   ================================================================ */
.mobile-only {
    display: none !important;
}

.layout-mobile .mobile-only {
    display: block !important;
}

.layout-mobile .desktop-only {
    display: none !important;
}

/* ================================================================
   13. TOUCH OPTIMIZATIONS
   ================================================================ */
.layout-mobile button,
.layout-mobile a,
.layout-mobile [role="button"] {
    min-height: 44px;
    min-width: 44px;
}

.layout-mobile {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ================================================================
   14. FALLBACK CSS FOR MOBILE COMPONENTS
   These rules ensure TopBar, BottomNav, FAB, and icons work
   even when Tailwind CDN is slow/blocked.
   Tailwind classes will override these when loaded.
   ================================================================ */

/* --- Material Symbols REMOVED — system now uses Ionicons only --- */

/* --- TopBar REMOVED — reusing desktop header --- */

/* --- BottomNav (Ionicons + iOS style) --- */
.layout-mobile .bottomnav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 -8px 24px rgba(0, 93, 167, 0.06);
    /* Espacio extra para barrita iOS home indicator */
    padding-bottom: max(env(safe-area-inset-bottom, 20px), 20px);
}

.layout-mobile .bottomnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 6px 6px;
    max-width: 448px;
    margin: 0 auto;
    position: relative;
}

.layout-mobile .bottomnav-pill {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background: rgba(0, 122, 255, 0.10);
    border-radius: 14px;
    transition: transform 320ms cubic-bezier(0.2, 0.0, 0.0, 1);
}

.layout-mobile .bottomnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    padding: 6px 0 4px;
    min-height: 48px;
    border-radius: 14px;
    text-decoration: none;
    color: #8e8e93;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms cubic-bezier(0.2, 0, 0, 1),
        transform 120ms ease;
    will-change: transform;
}

.layout-mobile .bottomnav-item.is-active {
    color: #007aff;
}

.layout-mobile .bottomnav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.layout-mobile .bottomnav-icon-wrap ion-icon {
    font-size: 24px;
}

.layout-mobile .bottomnav-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    letter-spacing: 0.01em;
}

.layout-mobile .bottomnav-item.is-active .bottomnav-label {
    font-weight: 700;
}

/* Badge dot */
.layout-mobile .bottomnav-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid #fff;
}

.layout-mobile .bottomnav-badge.hidden {
    display: none;
}

/* Active nav item — now handled via .bottomnav-item.is-active above */

/* --- FAB --- */
.layout-mobile #mobile-fab button {
    position: fixed;
    right: 24px;
    bottom: 112px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0091FF, #0076D1);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    width: 56px;
    height: 56px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(147, 197, 253, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.layout-mobile #mobile-fab button:active {
    transform: scale(0.9);
}

/* --- Login page: hide mobile chrome completely --- */
.layout-mobile body[data-page="login"] #mobile-topbar,
.layout-mobile body[data-page="login"] #mobile-bottomnav,
.layout-mobile body[data-page="login"] #mobile-fab {
    display: none !important;
}

/* --- Font families (fallback when Google Fonts slow) --- */
.layout-mobile {
    font-family: 'Inter', system-ui, sans-serif;
}

.layout-mobile .login-wrapper {
    flex-direction: column !important;
}

.layout-mobile .login-showcase {
    display: none !important;
}

.layout-mobile .login-panel-right {
    flex: 1 !important;
    min-height: 100vh;
    padding: 2rem 1.5rem 3rem;
}

.layout-mobile .login-card {
    padding: 2rem 1.5rem;
    max-width: 100%;
}

.layout-mobile .login-card-logo-img {
    max-width: 200px !important;
    max-height: 80px !important;
}

/* Prevent pull-to-refresh conflicts */
.layout-mobile body {
    overscroll-behavior-y: contain;
}

/* ================================================================
   SPA NAVIGATION — Skeleton UI + Transitions
   ================================================================ */

/* Skeleton shimmer animation */
@keyframes skel-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.layout-mobile .spa-skeleton {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.layout-mobile .skel-block {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
    border-radius: 12px;
}

.layout-mobile .skel-title {
    height: 28px;
    width: 55%;
}

.layout-mobile .skel-text {
    height: 16px;
    width: 90%;
}

.layout-mobile .skel-text.short {
    width: 60%;
}

.layout-mobile .skel-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.layout-mobile .skel-card {
    height: 80px;
    width: 100%;
}

/* SPA transition on <main> */
.layout-mobile .main-content {
    will-change: opacity;
}

/* ================================================================
   15. PERFIL PAGE — MOBILE OPTIMIZATIONS
   ================================================================ */
.layout-mobile .perfil-container {
    max-width: 100% !important;
    padding: 12px 16px !important;
}

.layout-mobile .perfil-hero {
    padding: 20px 16px !important;
    margin-bottom: 16px !important;
    background: linear-gradient(180deg, rgba(0, 122, 255, 0.04) 0%, transparent 100%);
    border-radius: 20px;
}

.layout-mobile .perfil-avatar {
    width: 80px !important;
    height: 80px !important;
}

.layout-mobile .perfil-avatar ion-icon {
    font-size: 44px !important;
}

.layout-mobile .perfil-nombre {
    font-size: 22px !important;
}

.layout-mobile .perfil-info {
    border-radius: 16px !important;
    margin-bottom: 12px !important;
}

/* Mobile: label arriba, valor abajo (stacked) */
.layout-mobile .info-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

.layout-mobile .info-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--color-texto-secundario) !important;
}

.layout-mobile .info-value {
    font-size: 15px !important;
    text-align: left !important;
}

.layout-mobile .info-row {
    padding: 14px 16px !important;
}

.layout-mobile .info-icon {
    width: 36px !important;
    height: 36px !important;
}

.layout-mobile .info-icon ion-icon {
    font-size: 18px !important;
}

.layout-mobile .perfil-actions {
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.layout-mobile .perfil-action-btn {
    padding: 14px 16px !important;
    border-radius: 9999px !important;
    min-height: 52px;
}

/* ================================================================
   16. MODAL FORM — MOBILE ALIGNMENT
   ================================================================ */
.layout-mobile .modal-section-title {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8e8e93 !important;
    margin-bottom: 12px !important;
}

.layout-mobile .modal-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.layout-mobile .form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: var(--color-texto) !important;
}

.layout-mobile .form-input-wrapper {
    border-radius: 12px;
}

.layout-mobile .form-input-wrapper .form-input {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
}

.layout-mobile .file-upload {
    padding: 20px 16px !important;
    border-radius: 14px !important;
}

.layout-mobile .modal-footer {
    position: sticky;
    bottom: 0;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff;
    z-index: 10;
}

.layout-mobile .modal-footer .btn {
    height: 48px !important;
    border-radius: 9999px !important;
    font-size: 15px !important;
}

/* Modal Ver Documento: botones apilados (3 botones) */
.layout-mobile #modalVerDocumento .modal-footer {
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

.layout-mobile #modalVerDocumento .modal-footer .btn {
    width: 100%;
    height: 50px !important;
    font-weight: 600;
    justify-content: center;
}

/* Ocultar icono título y botón cerrar en modal Ver Documento */
.layout-mobile #modalVerDocumento .modal-title ion-icon {
    display: none !important;
}

.layout-mobile #modalVerDocumento .modal-close {
    display: none !important;
}

/* Visor PDF en mobile: mismo diseño bottom-sheet que modales */
.layout-mobile .vpdf-close-btn {
    display: none !important;
}

.layout-mobile .vpdf-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
}

.layout-mobile .vpdf-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
}

.layout-mobile .vpdf-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px 16px 10px !important;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    position: relative;
    border-radius: 20px 20px 0 0;
    gap: 6px;
}

.layout-mobile .vpdf-header::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #d1d1d6 !important;
    flex-shrink: 0;
}

.layout-mobile .vpdf-title {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

.layout-mobile .vpdf-title ion-icon {
    display: none !important;
}

.layout-mobile .vpdf-header-actions {
    display: none !important;
}

/* ================================================================
   17. NAMESPACE — ADMIN vs TRABAJADOR (mobile)
   Estilos aislados por rol para evitar conflictos cruzados.
   Cada body tiene class="app-admin" o class="app-trabajador"
   ================================================================ */

/* --- Admin: page wrappers padding --- */
.layout-mobile .app-admin .dashboard-admin,
.layout-mobile .app-admin .trabajadores-page,
.layout-mobile .app-admin .alertas-page,
.layout-mobile .app-admin .usuarios-page,
.layout-mobile .app-admin .whatsapp-page,
.layout-mobile .app-admin .reportes-page,
.layout-mobile .app-admin .logs-page,
.layout-mobile .app-admin .configuracion-page {
    padding: 12px !important;
}

/* --- Trabajador: page wrappers padding --- */
.layout-mobile .app-trabajador .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.layout-mobile .app-trabajador .documentos-container,
.layout-mobile .app-trabajador .alertas-page,
.layout-mobile .app-trabajador .perfil-container {
    padding: 12px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Trabajador page-header: pixel-perfect con web responsive --- */
.layout-mobile .app-trabajador .page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    background: white !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.layout-mobile .app-trabajador .page-header>div:first-child {
    width: auto !important;
}

.layout-mobile .app-trabajador .page-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

.layout-mobile .app-trabajador .page-title ion-icon {
    font-size: 28px !important;
    color: #007aff !important;
    flex-shrink: 0 !important;
}

.layout-mobile .app-trabajador .page-subtitle {
    font-size: 14px !important;
    color: #8e8e93 !important;
    margin: 4px 0 0 0 !important;
}

.layout-mobile .app-trabajador .page-header .btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 9999px !important;
    padding: 11px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
}

/* ================================================================
   18. PERFORMANCE — Reduce overhead on mobile
   ================================================================ */
.layout-mobile .bottomnav-item,
.layout-mobile .bottomnav-pill {
    contain: layout style;
}