/* ============================================
   Mobile Responsive Fixes
   Mejoras de diseño responsive para móviles
   ============================================ */

/* Media query para tablets y móviles */
@media (max-width: 768px) {

    /* ===== GRIDS - Forzar 1 columna en móvil ===== */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== CONTAINERS - Mejorar padding ===== */
    .container,
    [class*="container"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ===== CARDS - Reducir padding en móvil ===== */
    .metric-card,
    .chart-container,
    .glass-card,
    .feature-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* ===== TABLAS - Scroll horizontal ===== */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table thead {
        display: table-header-group;
    }

    table tbody {
        display: table-row-group;
    }

    /* ===== BOTONES - Más grandes para móvil ===== */
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* ===== TEXTOS - Legibles en móvil ===== */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    h1 {
        font-size: 1.875rem !important; /* 30px */
    }

    h2 {
        font-size: 1.5rem !important; /* 24px */
    }

    h3 {
        font-size: 1.25rem !important; /* 20px */
    }

    h4 {
        font-size: 1.125rem !important; /* 18px */
    }

    /* ===== INPUTS - Más grandes ===== */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* Previene zoom en iOS */
        padding: 0.75rem !important;
    }

    /* ===== NAVEGACIÓN - Mobile friendly ===== */
    nav,
    .navbar {
        padding: 0.5rem 1rem !important;
    }

    /* ===== SPACING - Reducir en móvil ===== */
    section {
        padding: 2rem 1rem !important;
    }

    /* ===== GRÁFICOS - Responsive ===== */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-container {
        padding: 1rem !important;
    }

    /* ===== MODALES - Full screen en móvil ===== */
    .modal-content,
    [class*="modal"] {
        max-width: 95vw !important;
        margin: 1rem !important;
    }

    /* ===== OCULTAR ELEMENTOS EN MÓVIL ===== */
    .hide-mobile {
        display: none !important;
    }
}

/* Media query específico para móviles pequeños */
@media (max-width: 480px) {

    /* Reducir aún más el padding */
    .metric-card,
    .chart-container,
    .glass-card {
        padding: 1rem 0.75rem !important;
    }

    /* Texto más pequeño en pantallas muy pequeñas */
    h1 {
        font-size: 1.5rem !important; /* 24px */
    }

    h2 {
        font-size: 1.25rem !important; /* 20px */
    }

    /* Grids de acciones rápidas */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
}

/* ===== UTILIDADES RESPONSIVE ===== */

/* Mostrar solo en móvil */
.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Texto responsive */
.text-responsive {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Espaciado responsive */
.gap-responsive {
    gap: clamp(0.5rem, 2vw, 1.5rem) !important;
}

/* Padding responsive */
.p-responsive {
    padding: clamp(0.75rem, 3vw, 2rem) !important;
}

/* ===== FIXES ESPECÍFICOS ===== */

/* Fix para tablas de transacciones */
@media (max-width: 768px) {
    .transactions-table {
        font-size: 0.875rem !important;
    }

    .transactions-table td,
    .transactions-table th {
        padding: 0.5rem !important;
    }
}

/* Fix para sidebar si existe */
@media (max-width: 768px) {
    aside,
    .sidebar {
        position: fixed;
        left: -100%;
        width: 80vw;
        max-width: 300px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    aside.active,
    .sidebar.active {
        left: 0;
    }
}

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

/* Fix para imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Fix para videos */
video,
iframe {
    max-width: 100%;
    height: auto;
}