/* =============================================================================
   PESATUSPESOS - CSS RESPONSIVO GLOBAL Y PREMIUM
   Cobertura completa para: PC, Portátiles, iPads, Tablets y Móviles (iPhone/Android)
   ============================================================================= */

/* variables adicionales para consistencia de diseño */
:root {
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --glass-bg: rgba(14, 20, 32, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --gold-glow: 0 0 15px rgba(207, 181, 59, 0.3);
}

/* -----------------------------------------------------------------------------
   1. ELEMENTOS COMUNES Y CONTENEDOR BASE
   ----------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* Forzar videos responsivos */
.carrusel-item iframe, 
.video-wrap iframe,
.finanza-chart-wrap canvas,
.evolucion-chart-wrapper canvas {
  width: 100% !important;
  max-width: 100%;
  border-radius: 12px;
}

/* Envolver tablas automáticamente */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Contenedores de tablas responsivas */
.tabla-premium-container,
.tabla-responsive,
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 15px;
  border-radius: 12px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

/* -----------------------------------------------------------------------------
   2. MENÚ HAMBURGUESA DINÁMICO (CSS PARA EL COMPONENTE INYECTADO POR JS)
   ----------------------------------------------------------------------------- */
.menu-hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
  transition: var(--transition-smooth);
}

.menu-hamburguesa span {
  width: 100%;
  height: 3px;
  background-color: var(--text-on-dark, #ffffff);
  border-radius: 4px;
  transition: var(--transition-smooth);
  transform-origin: left center;
}

/* Animación del menú hamburguesa a una 'X' */
.menu-hamburguesa.activo span:nth-child(1) {
  transform: rotate(45deg) translateY(-2px);
  background-color: var(--gold-bright, #CFB53B);
}

.menu-hamburguesa.activo span:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}

.menu-hamburguesa.activo span:nth-child(3) {
  transform: rotate(-45deg) translateY(2px);
  background-color: var(--gold-bright, #CFB53B);
}

/* Menú Overlay */
.menu-overlay-global {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 10, 20, 0.5);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-overlay-global.activo {
  display: block;
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   3. MEDIA QUERIES SEGÚN BREAKPOINTS
   ----------------------------------------------------------------------------- */

/* --- Desktops & Laptops medianas (hasta 1200px) --- */
@media (max-width: 1200px) {
  .contenedor-flotante-app {
    max-width: 100%;
    padding: 0 15px;
  }
}

/* --- Portátiles y Tablets en horizontal (hasta 1024px) --- */
@media (max-width: 1024px) {
  .principal, 
  .dash-principal {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 25px !important;
  }

  .graficas-crecimiento,
  .centro-principal,
  .dash-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Dashboard grid en aporte.html e historial */
  .main-content-grid,
  .modal-premium-body {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .col-der, .col-izq {
    width: 100% !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}

/* --- Tablets en vertical (hasta 992px) --- */
@media (max-width: 992px) {
  /* Mostrar botón hamburguesa */
  .menu-hamburguesa {
    display: flex !important;
  }

  /* Rediseño de la barra superior */
  .barra {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 70px !important;
    padding: 0 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    background: var(--bg-navy, #060e1e) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    z-index: 10000 !important; /* Supera el overlay global (9998) para evitar desenfoque y capas de transparencia */
  }

  /* Empujar el contenido principal hacia abajo para compensar la barra fija */
  .contenido, 
  .contenedor-dashboard {
    padding-top: 90px !important;
  }

  /* Ocultar barra lateral o menú inline y convertirlo en Drawer deslizable */
  .menu-wrapper {
    position: fixed !important;
    top: 0;
    right: -300px; /* Escondido por defecto a la derecha */
    width: 280px !important;
    height: 100vh !important;
    background: #060f1e !important; /* Color sólido premium para evitar el bug de desenfoque de iOS Safari / Webkit */
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 80px 24px 40px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    transform: none !important;
    left: auto !important;
  }

  .menu-wrapper.activo {
    right: 0 !important;
  }

  /* Menú de navegación vertical dentro del drawer */
  .menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    justify-content: flex-start !important;
  }

  .menu button, 
  .menu a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-size: var(--fs-base) !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: var(--transition-smooth) !important;
  }

  .menu button:hover, 
  .menu a:hover {
    background: rgba(207, 181, 59, 0.1) !important;
    color: var(--gold-bright, #CFB53B) !important;
    border-color: rgba(207, 181, 59, 0.3) !important;
    transform: translateX(5px);
  }

  /* Integrar opciones de usuario flotantes en el Drawer para mejor visualización */
  /* Integrar opciones de usuario flotantes en el Drawer para mejor visualización */
  .contenedor-flotante {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    position: static !important;
  }

  .nombre-usuario-header {
    order: 1 !important;
    text-align: center !important;
    margin: 10px 0 15px 0 !important;
    font-size: var(--fs-md) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 15px !important;
    width: 100% !important;
    display: block !important;
    max-width: 100% !important;
    color: var(--gold-light, #f3d989) !important;
  }

  .boton-notificacion {
    order: 2 !important;
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    transition: var(--transition-smooth) !important;
  }
  
  .boton-notificacion:hover {
    background: rgba(207, 181, 59, 0.1) !important;
    border-color: rgba(207, 181, 59, 0.3) !important;
    transform: translateY(-2px) !important;
  }
  
  .boton-notificacion::after {
    content: "Notificaciones";
    font-size: var(--fs-sm);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }

  .boton-notificacion i {
    color: var(--gold-light, #f3d989) !important;
    font-size: var(--fs-md) !important;
  }

  .boton-principal {
    order: 3 !important;
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    transition: var(--transition-smooth) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .boton-principal:hover {
    background: rgba(207, 181, 59, 0.1) !important;
    border-color: rgba(207, 181, 59, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
  }

  .boton-principal::after {
    content: "Configuración";
    font-size: var(--fs-sm);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
  }

  .boton-principal img {
    filter: brightness(0) invert(1) !important;
    max-height: 20px !important;
    object-fit: contain !important;
  }

  .opciones-flotantes {
    order: 4 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: all 0.3s ease !important;
  }

  .contenedor-flotante.active .opciones-flotantes {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: slideDownMenu 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes slideDownMenu {
    from {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
      overflow: hidden;
      margin-top: 0;
    }
    to {
      opacity: 1;
      transform: translateY(0);
      max-height: 300px;
      margin-top: 5px;
    }
  }

  .boton-opcion {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    transition: var(--transition-smooth) !important;
    color: #ffffff !important;
    position: static !important;
  }

  .boton-opcion:hover {
    background: rgba(207, 181, 59, 0.1) !important;
    border-color: rgba(207, 181, 59, 0.3) !important;
    transform: translateY(-2px) !important;
  }

  .boton-manual::after {
    content: "Manual de Usuario" !important;
    font-size: var(--fs-sm) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
  }

  .boton-atencion::after {
    content: "Ayuda y Soporte" !important;
    font-size: var(--fs-sm) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
  }

  .boton-editar::after {
    content: "Editar Perfil" !important;
    font-size: var(--fs-sm) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
  }

  .boton-manual img,
  .boton-atencion img {
    filter: brightness(0) invert(1) !important;
    max-height: 20px !important;
    object-fit: contain !important;
  }

  .boton-editar img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid var(--gold-light, #f3d989) !important;
  }

  /* Modales universales adaptados */
  .contenedor-modal,
  .modal-container,
  .modal-premium-content,
  .modal-aviso-contenido {
    width: 95% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 20px !important;
  }
  
  /* Panel de usuario flotante */
  .usuario {
    position: fixed !important;
    top: 85px !important;
    right: 20px !important;
    left: auto !important;
    width: 300px !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 10002 !important;
    transform: none !important; /* Evitar desalineación por transform heredado de style.css */
  }
}

/* --- Móviles Grandes e iPads en Vertical (hasta 768px) --- */
@media (max-width: 768px) {
  /* Carrusel de videos 100% responsivo y centrado */
  .carrusel-wrapper {
    overflow: hidden !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .carrusel-track {
    display: flex !important;
    gap: 20px !important;
    width: auto !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  .carrusel-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
  }

  .carrusel-item iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    border: none !important;
    display: block !important;
  }

  body {
    padding: 10px !important;
  }

  .contenido {
    padding: 85px 10px 20px 10px !important;
  }

  /* Filtros y barras de herramientas */
  .dash-toolbar, 
  .cabecera-tarjeta-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
  }

  .dash-filters, 
  .filtros-mov,
  .exportar-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .filter-group,
  .btn-filtro,
  .btn-export-pdf,
  .btn-export-excel {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .filter-group select {
    width: 100% !important;
  }

  /* Gráficas */
  .finanza-chart-wrap {
    height: 180px !important;
  }

  /* Tarjetas y tableros */
  .fila-resumen-cabecera {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .carousel-container {
    padding: 0 !important;
  }

  /* Botones del carrusel ocultos en móviles pequeños para evitar tapados */
  .nav-btn {
    display: none !important;
  }

  /* Footer en 1 columna */
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 25px !important;
  }

  .footer-brand,
  .footer-logos {
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  .footer-col h4 {
    justify-content: center !important;
  }

  /* Tablas de Ingresos y Egresos Responsivas e Inalterables */
  .contenedor-tabla {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 12, 23, 0.4) !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .contenedor-tabla table {
    min-width: 780px !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* Distribuir anchos específicos de columnas para evitar cortes */
  .contenedor-tabla th:nth-child(1),
  .contenedor-tabla td:nth-child(1) {
    width: 135px !important; /* Fecha */
  }
  .contenedor-tabla th:nth-child(2),
  .contenedor-tabla td:nth-child(2) {
    width: 190px !important; /* Descripción */
  }
  .contenedor-tabla th:nth-child(3),
  .contenedor-tabla td:nth-child(3) {
    width: 125px !important; /* Método */
    display: table-cell !important; /* Desanular display none en celulares pequeños */
  }
  .contenedor-tabla th:nth-child(4),
  .contenedor-tabla td:nth-child(4) {
    width: 125px !important; /* Concepto */
    display: table-cell !important; /* Desanular display none en celulares pequeños */
  }
  .contenedor-tabla th:nth-child(5),
  .contenedor-tabla td:nth-child(5) {
    width: 125px !important; /* Monto */
  }
  .contenedor-tabla th:nth-child(6),
  .contenedor-tabla td:nth-child(6) {
    width: 80px !important; /* Acciones */
    text-align: center !important;
  }

  /* Ajustar inputs y selects internos */
  .contenedor-tabla table input,
  .contenedor-tabla table select {
    width: 100% !important;
    font-size: var(--fs-sm) !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* Alinear los botones de acción centrados en la columna */
  .contenedor-tabla td.acciones {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 5px !important;
    box-sizing: border-box !important;
  }

  /* Mostrar textos en botones de exportación Excel/PDF en móviles */
  .btn-exportar {
    padding: 10px 16px !important;
    font-size: var(--fs-xs) !important;
    gap: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  .btn-exportar span {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Formularios responsivos */
  .contenedor-principal {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }

  .cuadro-blanco {
    padding: 24px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- Móviles Medianos y Pequeños (hasta 480px) --- */
@media (max-width: 480px) {
  .texto-logo {
    font-size: var(--fs-sm) !important;
  }

  /* Adaptación de tamaño de fuentes */
  h1, .titulo-seccion {
    font-size: var(--fs-lg) !important;
    text-align: center !important;
  }

  h2, .modal-header h2 {
    font-size: var(--fs-lg) !important;
  }

  h3 {
    font-size: var(--fs-md) !important;
  }

  /* Ajustar botones flotantes de administración */
  .boton-flotante-admin {
    bottom: 15px !important;
    right: 15px !important;
    padding: 10px 14px !important;
    font-size: var(--fs-xs) !important;
  }

  /* Tarjetas del carrusel ajustadas para móviles pequeños */
  .meta-card {
    min-width: 260px !important;
    max-width: 290px !important;
    margin: 0 auto !important;
  }

  /* Calendario de aporte responsivo */
  .calendar-grid {
    gap: 3px !important;
  }

  .calendar-grid span {
    padding: 6px 0 !important;
    font-size: var(--fs-xs) !important;
  }

  /* Sección de entrada de montos */
  .input-wrapper {
    font-size: var(--fs-lg) !important;
  }

  #aporte-input {
    width: 120px !important;
  }

  .quick-amounts {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Panel de edición de perfil */
  .opciones-avatar {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Botones de acción modal */
  .action-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-primary, .btn-secondary {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* --- Móviles Ultra Pequeños (hasta 375px) --- */
@media (max-width: 375px) {
  /* Forzar un reajuste estricto de elementos mínimos */
  .meta-card {
    min-width: 240px !important;
    max-width: 250px !important;
  }

  .opciones-avatar {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .caja-logo i {
    font-size: var(--fs-lg) !important;
  }

  .texto-logo {
    display: none !important; /* Ocultar el texto en pantallas críticamente pequeñas */
  }

  /* Reducir aún más los rellenos */
  .barra {
    padding: 0 10px !important;
  }

  .menu-hamburguesa {
    margin-right: 5px !important;
  }
}

/* =============================================================================
   ADICIONES PREMIUM DE RESPONSIVIDAD PARA MÓDULOS ESPECÍFICOS
   (Deudas, Ahorros, Aportes, Perfil, Ayuda y FAQ)
   ============================================================================= */

/* --- Portátiles y Tablets en horizontal (hasta 1024px) --- */
@media (max-width: 1024px) {
  /* Deudas Module */
  .dash-kpi-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
  }
  .dash-center-grid,
  .dash-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .chart-container {
    height: auto !important;
    min-height: 320px !important;
  }

  /* Ahorros Aporte (aporte.html) */
  .goal-info-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }
  .goal-stats {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  .modal-premium-body {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
}

/* --- Tablets en vertical (hasta 992px) --- */
@media (max-width: 992px) {
  /* Ayuda FAQ Layout */
  .faq-layout {
    flex-direction: column-reverse !important;
    gap: 30px !important;
  }
  .faq-column-left, 
  .faq-column-right {
    width: 100% !important;
  }
  .faq-illustration {
    justify-content: center !important;
    margin: 20px auto !important;
  }

  /* Ahorros meta creation */
  .crear-body-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  .modal-crear-content {
    width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* --- Modales Stacking Overrides --- */
  .modal, 
  .modal-premium-overlay,
  .modal-aviso,
  .mute-modal,
  .notificaciones-modal {
    z-index: 20000 !important;
  }

  /* Botón de subir foto responsivo */
  #btnSubirFoto, 
  .foto-btn-large {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
  }

  /* Columnas de fecha y monto completas en apilamiento */
  .fechas-row .fecha-col {
    width: 100% !important;
  }
}

/* --- Móviles Grandes (hasta 768px) --- */
@media (max-width: 768px) {
  /* Deudas KPI */
  .dash-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Perfil de Usuario */
  .tarjeta-perfil {
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 15px !important;
  }
  .seccion-avatar {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 0 !important;
    padding-bottom: 25px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .seccion-formulario {
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* Modales Dashboards */
  .modal-dash-content,
  .modal-crear-content,
  .modal-premium-content,
  .modal-eliminar-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 15px auto !important;
    padding: 20px 15px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  /* Ahorros view toggler */
  .view-toggle-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .view-btn {
    padding: 8px 12px !important;
    font-size: var(--fs-sm) !important;
  }
}

/* --- Móviles Medianos y Pequeños (hasta 480px) --- */
@media (max-width: 480px) {
  /* Deudas KPI */
  .dash-kpi-row {
    grid-template-columns: 1fr !important;
  }

  /* Formularios en Modales (Deudas, Ahorros, etc.) */
  .form-grid,
  .crear-body-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-actions,
  .crear-footer-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .btn-save, .btn-cancel,
  .btn-primary-gold, .btn-secondary-transparent {
    width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  /* Picker Calendario Premium Stacking */
  .picker-body {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    min-height: auto !important;
  }
  .columna-anio {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-right: 0 !important;
    padding-bottom: 15px !important;
    width: 100% !important;
  }
  .grid-meses-seccion {
    width: 100% !important;
  }
  .grid-meses {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Fechas en creación de Meta */
  .fechas-row {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .select-group {
    width: 100% !important;
  }
  .crear-select {
    flex: 1 !important;
  }

  /* Perfil de Usuario */
  .acciones-foto-exterior {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .acciones-foto-exterior button {
    width: 100% !important;
    margin: 0 !important;
  }
  .acciones-dentro-tarjeta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .acciones-dentro-tarjeta button {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Chatbot Modal */
  .chat-modal .chat-content {
    width: 96% !important;
    height: 85vh !important;
    max-height: none !important;
    border-radius: 12px !important;
  }

  /* --- Historial de Meta Modal (aporte.html) --- */
  .modal-premium-overlay {
    overflow-x: hidden !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .modal-premium-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    border-radius: 14px !important;
    min-height: auto !important;
  }
  .modal-premium-header {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
  }
  .modal-premium-header .header-title {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .modal-premium-header .header-title i {
    font-size: var(--fs-xl) !important;
    padding: 8px !important;
  }
  .btn-cerrar-large {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .modal-premium-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px 10px !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .col-izq, .col-der {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Evita que el contenedor se estire al tamaño min-content del hijo */
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }
  .resumen-meta-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
    padding: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .meta-stats-grid {
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .meta-chart-container {
    margin: 10px auto 0 auto !important;
  }
  .lista-aportes-section {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filtros-container {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filtro-item {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
  .filtro-item select {
    width: 100% !important;
    flex: 1 !important;
    font-size: var(--fs-sm) !important;
  }
  .btn-limpiar-filtros {
    width: 100% !important;
    padding: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .tabla-premium-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  .tabla-premium {
    min-width: 500px !important; /* Deslizar solo la tabla */
    width: 100% !important;
  }
  .exportar-card {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .exportar-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .btn-export-pdf, .btn-export-excel {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .evolucion-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Aporte Page Meta Info Card Fix (aporte.html) --- */
  .goal-info-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .goal-chart-wrapper {
    position: static !important; /* Sacar de absolute para evitar que flote sobre el modal header */
    margin: 15px auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 80px !important;
    height: 80px !important;
  }
  .circular-chart {
    width: 100% !important;
    height: 100% !important;
  }
}