/* ===================================================================
   BANKAMBI - RESPONSIVE MASTER CSS
   Consolidación de fixes móviles para todo el sistema
   =================================================================== */

/* ============================================
   1. UTILIDADES BASE MÓVILES
   ============================================ */
@media (max-width: 768px) {
  /* Contenedores fluidos */
  .container,
  .main-container,
  .content-wrapper,
  .section-container,
  .dashboard-container,
  .admin-container,
  .interface-container,
  .custom-content-container,
  .gerencia-container,
  .procesar-container,
  .admin-container,
  [class*="-container"] {
    width: 100%;
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Prevenir desbordamiento horizontal */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Imágenes responsivas */
  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }

  /* Tablas con scroll horizontal */
  .table,
  .table-container,
  .dataTable,
  .dataTables_wrapper,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table thead,
  .table tbody,
  .table th,
  .table td,
  .table tr {
    display: block;
  }

  .table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-card);
  }

  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
  }

  .table td:last-child {
    border-bottom: none;
  }

  .table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
  }

  .table thead {
    display: none; /* Ocultar header en móvil, usar data-label */
  }
}

/* ============================================
   2. GRIDS RESPONSIVOS UNIVERSALES
   ============================================ */
@media (max-width: 1024px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .stats-container,
  .info-card-container,
  .reasons-grid,
  .testimonials-container,
  .about-us-container,
  .cta-grid,
  .sponsors-carousel,
  .dashboard-grid,
  .cards-grid,
  [class*="grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 768px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .stats-container,
  .info-card-container,
  .reasons-grid,
  .testimonials-container,
  .about-us-container,
  .cta-grid,
  .sponsors-carousel,
  .dashboard-grid,
  .cards-grid,
  .quick-stats-grid,
  .socio-grid,
  .beneficiarios-grid,
  .cuentas-grid,
  .financial-grid-details,
  .css-acc-cards-grid,
  .portal-grid-premium,
  .mega-grid,
  .command-stats,
  .filter-grid,
  .filters-grid,
  [class*="grid"],
  [class*="cards-grid"],
  [class*="container"] > .row,
  .row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Flexbox stacks */
  .d-flex,
  .flex-row,
  .justify-content-between,
  .header-actions-wrapper,
  .header-actions,
  .cta-content-wrapper,
  .about-us-block,
  .contact-terms-container,
  .footer-container,
  .action-btns-grid,
  .btn-group,
  .modal-footer .d-flex {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  .d-flex > *,
  .flex-row > * {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container,
  .main-container,
  .custom-content-container,
  [class*="-container"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-outline-primary,
  .btn-modern,
  [class*="btn-"] {
    width: 100%;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    justify-content: center;
  }

  .btn-sm {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
}

/* ============================================
   3. NAVBAR Y NAVEGACIÓN MÓVIL
   ============================================ */
@media (max-width: 1024px) {
  .navbar {
    padding: 0 12px !important;
  }

  .navbar-brand .logo {
    max-width: 140px !important;
    max-height: 44px !important;
  }

  .brand-text {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: auto !important;
    min-height: 60px !important;
    padding: 8px 12px !important;
  }

  #content {
    margin-top: 60px !important;
    min-height: calc(100vh - 60px) !important;
  }

  .sub-navbar {
    top: 60px !important;
    min-height: auto !important;
    padding: 8px 12px !important;
  }

  .sub-nav-container {
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  .sub-nav-link {
    min-width: 64px !important;
    padding: 8px 10px !important;
  }

  .sub-nav-link span {
    font-size: 0.7rem !important;
  }

  .nav-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .hamburger-menu {
    display: flex !important;
    z-index: 1100 !important;
  }

  .navbar-nav {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--card-bg) !important;
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 0.5rem !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    border-top: 1px solid var(--border-color) !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .navbar-nav.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-item {
    width: 100% !important;
  }

  .nav-link {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }

  /* Dropdowns como acordeón en móvil */
  .dropdown-menu,
  .admin-dropdown-menu,
  .config-expanded-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(0,0,0,0.05) !important;
    margin-top: 8px !important;
    width: 100% !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
  }

  .dropdown.active .dropdown-menu,
  .admin-dropdown.active .admin-dropdown-menu,
  .config-dropdown-expanded.active .config-expanded-menu {
    max-height: 500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 8px 0 !important;
  }

  .dropdown-item {
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
  }

  .dropdown-item:hover {
    background: var(--hover-bg) !important;
  }

  .admin-dropdown-menu {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    min-width: auto !important;
    max-height: calc(100vh - 80px) !important;
    z-index: 1000 !important;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 6px 8px !important;
  }

  .navbar-brand .logo {
    max-width: 100px !important;
    max-height: 36px !important;
  }

  .hamburger-menu {
    width: 28px !important;
    height: 22px !important;
  }

  .hamburger-bar {
    width: 28px !important;
    height: 2.5px !important;
  }

  .sub-nav-link {
    min-width: 56px !important;
    padding: 6px 8px !important;
  }

  .sub-nav-link span {
    font-size: 0.65rem !important;
  }

  .nav-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ============================================
   4. MODALES RESPONSIVOS
   ============================================ */
@media (max-width: 768px) {
  .modal-content,
  .modal-dialog,
  .unified-modal,
  .modal-system-content,
  .kambi-modal-box,
  .portal-content,
  .qr-card,
  .discapacidad-modal-content,
  [class*="modal-"]:not(.modal-backdrop):not(.portal-modal):not(.qr-modal) {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px auto !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .modal-body,
  .portal-body,
  .modal-system-body {
    padding: 1.5rem !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-header,
  .portal-header {
    padding: 1rem 1.5rem !important;
  }

  .modal-title,
  .portal-main-title {
    font-size: 1.25rem !important;
  }

  .close-portal,
  .close-portal-vault,
  .modal-close,
  .discapacidad-modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .modal-content,
  .portal-content,
  .qr-card,
  .discapacidad-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }

  .modal-body,
  .portal-body {
    padding: 1rem !important;
    max-height: calc(100vh - 120px) !important;
  }

  .modal-header,
  .portal-header {
    padding: 1rem !important;
    border-radius: 0 !important;
  }

  .modal-title {
    font-size: 1.1rem !important;
  }
}

/* ============================================
   5. FORMULARIOS RESPONSIVOS
   ============================================ */
@media (max-width: 768px) {
  .form-group,
  .mb-3,
  .unified-form-group {
    margin-bottom: 1rem !important;
  }

  label,
  .form-label {
    font-size: 0.875rem !important;
    margin-bottom: 0.375rem !important;
  }

  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .unified-form-input {
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important; /* Evita zoom en iOS */
    min-height: 48px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }

  .form-check {
    padding-left: 2rem !important;
  }

  .form-check-input {
    width: 1.25em !important;
    height: 1.25em !important;
    margin-left: -1.5em !important;
  }

  .input-group {
    flex-direction: column !important;
  }

  .input-group > * {
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
  }

  .row > [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================
   6. TARJETAS (CARDS) RESPONSIVAS
   ============================================ */
@media (max-width: 768px) {
  .card,
  .card-container,
  .dashboard-card,
  .info-card,
  .stat-card,
  .profile-card,
  .data-card,
  .permissions-container,
  .filters-container,
  .unified-form-section,
  .unified-tabs-container,
  .socio-card,
  .beneficiario-card,
  .cuenta-bancaria-card,
  .emergencia-card,
  .notaria-card,
  .mega-card,
  .financial-detail-item,
  .data-glass-pill,
  .expiry-card,
  .dashboard-timeline,
  .profile-progress-wrap,
  .css-acc-item,
  .profile-info-card,
  .movimiento-item {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
  }

  .card-header {
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  .card-body {
    padding: 1rem !important;
  }

  .card-title,
  .h1, .h2, .h3, .h4, .h5, .h6,
  h1, h2, h3, h4, h5, h6 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  .card,
  .socio-card,
  .beneficiario-card,
  .cuenta-bancaria-card,
  .emergencia-card,
  .notaria-card,
  .mega-card,
  .data-glass-pill,
  .expiry-card,
  .dashboard-timeline,
  .profile-progress-wrap,
  .profile-info-card,
  .movimiento-item {
    padding: 0.75rem !important;
    border-radius: 10px !important;
  }

  .card-title,
  h1, h2, h3, h4, h5, h6 {
    font-size: 1rem !important;
  }

  .socio-icon-wrapper,
  .data-pill-icon,
  .financial-detail-icon,
  .profile-info-icon-box,
  .movimiento-icon-box,
  .beneficiario-avatar-wrapper,
  .emergencia-avatar-box,
  .cuenta-card-icon-bg,
  .beneficiario-icon-bg {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .socio-icon-wrapper img,
  .data-pill-icon img,
  .financial-detail-icon img,
  .profile-info-icon-box img,
  .movimiento-icon-box img {
    width: 20px !important;
    height: 20px !important;
  }

  .socio-card-title {
    font-size: 0.6rem !important;
  }

  .data-pill-value {
    font-size: 1rem !important;
  }

  .data-pill-label {
    font-size: 0.6rem !important;
  }
}

/* ============================================
   7. BOTONES - TARGETS TÁCTILES MÍNIMOS
   ============================================ */
@media (max-width: 768px) {
  .btn,
  .unified-btn,
  button,
  [class*="btn-"],
  a[class*="btn"],
  .dropdown-toggle,
  .nav-link,
  .dropdown-item,
  .sub-nav-link,
  .admin-dropdown-item,
  .css-acc-label,
  .verifyIdBtn,
  .sendOTPBtn,
  .verifyOTPBtn,
  .resetFinalBtn,
  .login-btn,
  .step-action {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
    font-size: 1rem !important; /* Prevenir zoom iOS */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-sm {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================
   8. TIPOGRAFÍA FLUIDA
   ============================================ */
@media (max-width: 768px) {
  body {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .text-primary,
  .text-secondary,
  .text-muted,
  p, span, div, li, td, th, a {
    font-size: 0.9rem !important;
  }

  small, .text-small, .badge, .pill {
    font-size: 0.75rem !important;
  }

  /* Headings fluidos */
  h1, .h1 { font-size: 1.75rem !important; }
  h2, .h2 { font-size: 1.5rem !important; }
  h3, .h3 { font-size: 1.25rem !important; }
  h4, .h4 { font-size: 1.1rem !important; }
  h5, .h5 { font-size: 1rem !important; }
  h6, .h6 { font-size: 0.9rem !important; }
}

@media (max-width: 480px) {
  body { font-size: 14px !important; }

  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  h3, .h3 { font-size: 1.1rem !important; }
  h4, .h4 { font-size: 1rem !important; }

  .text-primary, .text-secondary, .text-muted, p, span, li, td, th, a {
    font-size: 0.85rem !important;
  }
}

/* ============================================
   9. PORTAL SOCIO Y DASHBOARDS ESPECÍFICOS
   ============================================ */
@media (max-width: 768px) {
  /* Dashboard socios - ya parcialmente arreglado */
  .dash-main-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .dash-right-column {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .dash-right-column > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .socio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .quick-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Portal modal en móvil */
  .portal-content {
    border-radius: 0 !important;
    max-height: 100vh !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .portal-header {
    padding: 1.5rem !important;
    border-radius: 0 !important;
  }

  .portal-body {
    padding: 1.5rem !important;
    max-height: calc(100vh - 140px) !important;
  }
}

@media (max-width: 480px) {
  .socio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.375rem !important;
  }

  .socio-card {
    min-height: 90px !important;
    padding: 0.75rem 0.5rem !important;
  }

  .quick-stats-grid {
    gap: 0.375rem !important;
  }
}

/* ============================================
   10. FOOTER Y SIDE WIDGETS
   ============================================ */
@media (max-width: 768px) {
  .side-widget {
    display: none !important;
  }

  .footer-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }

  .footer-column {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .subscribe-form {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .subscribe-form input,
  .subscribe-form button {
    width: 100% !important;
  }

  .social-icons {
    justify-content: center !important;
    gap: 1rem !important;
  }
}

/* ============================================
   11. ALERTAS Y TOASTS MÓVILES
   ============================================ */
@media (max-width: 768px) {
  .messages-container {
    top: 70px !important;
    left: 8px !important;
    right: 8px !important;
    max-width: none !important;
  }

  .toast-notification {
    min-width: auto !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 8px !important;
  }

  .alert {
    padding: 1rem !important;
    border-radius: 8px !important;
  }
}

/* ============================================
   12. LOADER MÓVIL
   ============================================ */
@media (max-width: 480px) {
  .loader-logo-container {
    width: 120px !important;
    height: 120px !important;
  }

  .loader-logo {
    width: 80px !important;
  }

  .loader-text {
    font-size: 1rem !important;
  }
}

/* ============================================
   13. ACCESIBILIDAD MÓVIL
   ============================================ */
@media (max-width: 768px) {
  /* Focus visible para navegación por teclado */
  *:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
  }

  /* Áreas de toque mínimas */
  [role="button"],
  [tabindex="0"],
  a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }

  /* Deshabilitar hover en touch */
  .card:hover,
  .btn:hover,
  .nav-link:hover,
  .dropdown-item:hover,
  .socio-card:hover,
  .mega-card:hover,
  .data-glass-pill:hover,
  .financial-detail-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ============================================
   14. PRINT STYLES
   ============================================ */
@media print {
  .navbar,
  .sub-navbar,
  .hamburger-menu,
  .whatsapp-float-container,
  .messages-container,
  .side-widget,
  .loader,
  .modal-backdrop,
  .portal-modal,
  .dropdown-menu,
  .admin-dropdown-menu,
  .config-expanded-menu,
  .btn,
  [class*="btn-"],
  .pagination,
  .filters-container {
    display: none !important;
  }

  #content {
    margin-top: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .card,
  .modal-content {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .dark-theme body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   15. REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   16. HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000;
    --text-secondary: #000;
    --primary-color: #000;
    --success-color: #006400;
    --danger-color: #8b0000;
  }

  .dark-theme {
    --border-color: #fff;
    --text-secondary: #fff;
    --primary-color: #fff;
    --success-color: #00ff00;
    --danger-color: #ff0000;
  }

  .card,
  .btn,
  .form-control,
  .modal-content {
    border: 2px solid currentColor !important;
  }
}

/* ============================================
   17. FIXES ESPECÍFICOS POR MÓDULO
   ============================================ */

/* Login */
@media (max-width: 480px) {
  .login-split-container {
    flex-direction: column !important;
  }

  .login-left-side {
    display: none !important;
  }

  .login-right-side {
    width: 100% !important;
    padding: 1rem !important;
  }

  .login-form-container {
    padding: 0 !important;
  }

  .login-card {
    padding: 1.5rem 1rem !important;
    border-radius: 0 !important;
  }

  .otp-field {
    width: 36px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
  }
}

/* Actualizar datos */
@media (max-width: 768px) {
  .actualizar-datos-container,
  .form-section {
    padding: 1rem !important;
  }

  .form-row {
    flex-direction: column !important;
  }

  .form-row > [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* Administradores */
@media (max-width: 768px) {
  .admin-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .admin-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .admin-actions .btn {
    width: 100% !important;
  }
}

/* Reportes y gráficos */
@media (max-width: 768px) {
  .chart-container,
  [id*="chart"],
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Carruseles */
@media (max-width: 768px) {
  .carousel-track {
    gap: 1rem !important;
  }

  .sponsor-logo,
  .carousel-item {
    min-width: 120px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================
   18. ESTADO DE CARGA Y SKELETONS
   ============================================ */
.skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-hover) 50%, var(--border-color) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
  .skeleton-text {
    height: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .skeleton-title {
    height: 1.5rem !important;
    width: 60% !important;
    margin-bottom: 1rem !important;
  }

  .skeleton-card {
    height: 120px !important;
    border-radius: 12px !important;
  }
}

/* ============================================
   19. UTILIDADES DE VISIBILIDAD
   ============================================ */
@media (max-width: 768px) {
  .d-none-mobile { display: none !important; }
  .d-block-mobile { display: block !important; }
  .d-flex-mobile { display: flex !important; }
  .d-grid-mobile { display: grid !important; }
}

@media (min-width: 769px) {
  .d-none-desktop { display: none !important; }
  .d-block-desktop { display: block !important; }
  .d-flex-desktop { display: flex !important; }
  .d-grid-desktop { display: grid !important; }
}

/* ============================================
   20. SAFE AREA PARA NOTCHES
   ============================================ */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    body {
      padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }

    .modal-content,
    .portal-content,
    .navbar {
      padding-left: max(12px, env(safe-area-inset-left)) !important;
      padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .modal-content,
    .portal-content {
      padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================
   21. FIX: ESPACIADO DEBAJO DEL NAVBAR FIJO
   Para contenedores que usan margin: 2rem auto
   y se ven pegados al navbar/sub-navbar
   ============================================ */
@media (max-width: 1024px) {
  /* Asegurar que #content tenga el margen correcto */
  #content {
    margin-top: var(--navbar-height) !important;
  }
  
  /* Cuando hay sub-navbar visible */
  body:has(.sub-navbar:not(.collapsed)) #content,
  .sub-navbar:not(.collapsed) ~ #content {
    margin-top: calc(var(--navbar-height) + var(--sub-navbar-height)) !important;
  }
}

/* Fix global para contenedores con margin: 2rem auto */
@media (max-width: 1024px) {
  .dashboard-container,
  .logs-container,
  .container[style*="margin: 2rem auto"],
  .card[style*="margin: 2rem auto"],
  .rrhh-card[style*="margin: 2rem auto"],
  .rrhh-form-card[style*="margin: 2rem auto"],
  .form-eval-container[style*="margin: 2rem auto"],
  article[style*="margin: 2rem auto"],
  section[style*="margin: 2rem auto"],
  div[style*="margin: 2rem auto"] {
    margin-top: calc(var(--navbar-height) + var(--sub-navbar-height) + 1.5rem) !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .dashboard-container,
  .logs-container,
  .container[style*="margin: 2rem auto"],
  .card[style*="margin: 2rem auto"],
  .rrhh-card[style*="margin: 2rem auto"],
  .rrhh-form-card[style*="margin: 2rem auto"],
  .form-eval-container[style*="margin: 2rem auto"],
  article[style*="margin: 2rem auto"],
  section[style*="margin: 2rem auto"],
  div[style*="margin: 2rem auto"] {
    margin-top: calc(var(--navbar-height) + 1rem) !important; /* sub-navbar se colapsa en móvil */
    margin-bottom: 1rem !important;
  }
}

/* ===== FIXES ESPECÍFICOS DASHBOARD MÓVIL ===== */
@media (max-width: 768px) {
  /* Forzar que la columna derecha NO sea sticky y fluya normalmente */
  .dash-main-grid {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  
  .dash-right-column {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    display: flex !important;
    width: 100% !important;
    order: 2 !important; /* Después de las tarjetas */
  }
  
  .dash-left-column {
    order: 1 !important; /* Las tarjetas primero */
  }
  
  .dash-right-column > * {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Timeline y expiry-card apilados verticalmente */
  .dashboard-timeline,
  .expiry-card {
    width: 100% !important;
    flex-shrink: 0 !important;
  }
}

/* Fix para modal promo - asegurar que el icono se restaure al cerrar */
.portal-modal .close-portal {
  z-index: 10001 !important;
  pointer-events: auto !important;
}

/* Asegurar que el backdrop del modal cierre al hacer click fuera */
.portal-modal {
  pointer-events: none !important;
}
.portal-modal .portal-content {
  pointer-events: auto !important;
}
.portal-modal.active {
  pointer-events: auto !important;
}

/* Fix para botones del modal promo */
.portal-body .btn-puro,
.portal-body .btn-puro:hover {
  pointer-events: auto !important;
  z-index: 10002 !important;
}

/* Navegacion movil: panel opaco y contraste alto en modo oscuro */
@media (max-width: 768px) {
  .navbar-nav {
    background: #ffffff !important;
    border-top: 1px solid #dbe4ee !important;
    padding: 0.8rem !important;
    gap: 0.35rem !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2) !important;
  }

  .navbar-nav > .nav-item > .nav-link {
    min-height: 48px;
    border-radius: 12px;
    color: #1e293b !important;
    font-weight: 700 !important;
  }

  .navbar-nav > .nav-item > .nav-link span,
  .navbar-nav > .nav-item > .nav-link i {
    color: #1e293b !important;
    opacity: 1 !important;
  }

  .navbar-nav > .nav-item > .nav-link:hover,
  .navbar-nav > .nav-item.active > .nav-link {
    background: #e8f4f3 !important;
    color: #0d7377 !important;
  }

  .navbar-nav .admin-dropdown-menu,
  .navbar-nav .config-expanded-menu,
  .navbar-nav .dropdown-menu {
    background: #f8fafc !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 14px !important;
    padding: 0.35rem !important;
  }

  .navbar-nav .admin-dropdown-menu .dropdown-item,
  .navbar-nav .admin-dropdown-menu .dropdown-item span,
  .navbar-nav .config-expanded-menu .dropdown-item,
  .navbar-nav .config-expanded-menu .dropdown-item span {
    color: #334155 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }

  .navbar-nav .admin-section-title,
  .navbar-nav .admin-section-title span {
    color: #0f766e !important;
    opacity: 1 !important;
    background: #e2f1ef !important;
    border-radius: 10px;
  }

  html.dark-theme body .navbar-nav {
    background: #0b1729 !important;
    border-top-color: rgba(94, 234, 212, 0.25) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
  }

  html.dark-theme body .navbar-nav > .nav-item > .nav-link,
  html.dark-theme body .navbar-nav > .nav-item > .nav-link span,
  html.dark-theme body .navbar-nav > .nav-item > .nav-link i {
    color: #f8fafc !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  html.dark-theme body .navbar-nav > .nav-item > .nav-link:hover,
  html.dark-theme body .navbar-nav > .nav-item.active > .nav-link {
    background: rgba(45, 212, 191, 0.18) !important;
    color: #99f6e4 !important;
  }

  html.dark-theme body .navbar-nav .admin-dropdown-menu,
  html.dark-theme body .navbar-nav .config-expanded-menu,
  html.dark-theme body .navbar-nav .dropdown-menu {
    background: #111c2d !important;
    border-color: rgba(94, 234, 212, 0.2) !important;
  }

  html.dark-theme body .navbar-nav .admin-dropdown-menu .dropdown-item,
  html.dark-theme body .navbar-nav .admin-dropdown-menu .dropdown-item span,
  html.dark-theme body .navbar-nav .config-expanded-menu .dropdown-item,
  html.dark-theme body .navbar-nav .config-expanded-menu .dropdown-item span {
    color: #f8fafc !important;
    opacity: 1 !important;
  }

html.dark-theme body .navbar-nav .admin-section-title,
html.dark-theme body .navbar-nav .admin-section-title span {
    color: #99f6e4 !important;
    background: rgba(45, 212, 191, 0.16) !important;
  }
}

/* El tema persistido se aplica al body; duplicar el selector evita un panel claro accidental */
@media (max-width: 768px) {
  body.dark-theme .navbar-nav {
    background: #0b1729 !important;
    border-top-color: rgba(94, 234, 212, 0.25) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
  }

  body.dark-theme .navbar-nav > .nav-item > .nav-link,
  body.dark-theme .navbar-nav > .nav-item > .nav-link span,
  body.dark-theme .navbar-nav > .nav-item > .nav-link i,
  body.dark-theme .navbar-nav .admin-dropdown-menu .dropdown-item,
  body.dark-theme .navbar-nav .admin-dropdown-menu .dropdown-item span,
  body.dark-theme .navbar-nav .config-expanded-menu .dropdown-item,
  body.dark-theme .navbar-nav .config-expanded-menu .dropdown-item span {
    color: #f8fafc !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }

  body.dark-theme .navbar-nav .admin-dropdown-menu,
  body.dark-theme .navbar-nav .config-expanded-menu,
  body.dark-theme .navbar-nav .dropdown-menu {
    background: #111c2d !important;
    border-color: rgba(94, 234, 212, 0.2) !important;
  }

  body.dark-theme .navbar-nav .admin-section-title,
  body.dark-theme .navbar-nav .admin-section-title span {
    color: #99f6e4 !important;
    opacity: 1 !important;
    background: rgba(45, 212, 191, 0.16) !important;
  }

  body.dark-theme .navbar-nav > .nav-item > .nav-link:hover,
  body.dark-theme .navbar-nav > .nav-item.active > .nav-link {
    background: rgba(45, 212, 191, 0.18) !important;
    color: #99f6e4 !important;
  }

  body.dark-theme .navbar-nav > .nav-item > .nav-link .admin-item-icon:not(.profile-avatar-nav) {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.dark-theme .navbar-nav > .nav-item > .nav-link .item-icon-wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
  }
}