/**
 * RESPONSIVE MOBILE - APP STYLE
 * Estilos globales para hacer que todas las páginas se vean como una app móvil
 * Compatible con: dashboard.php, team.php, profile.php, memberships.php, missions.php, products.php, ads.php
 */

/* ========================================
   MOBILE FIRST - BASE STYLES
======================================== */

/* Asegurar que todo sea 100% responsive */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ========================================
   TABLETS Y PANTALLAS MEDIANAS (768px - 1024px)
======================================== */
@media (max-width: 1024px) {
    /* Header ajustado */
    .header {
        padding: 12px 20px;
    }
    
    /* Contenedores más compactos */
    .container {
        padding: 20px;
        max-width: 100%;
    }
    
    /* Grids de 2 columnas en tablet */
    .stats,
    .stats-grid,
    .plans-grid,
    .mission-grid,
    .products-grid,
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}

/* ========================================
   MÓVILES GRANDES (481px - 768px)
======================================== */
@media (max-width: 768px) {
    /* Ocultar texto del logo */
    .logo-text {
        display: none !important;
    }
    
    /* Header compacto */
    .header {
        padding: 10px 15px;
        height: auto;
    }
    
    .hamburger-btn {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    
    .user-info {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .user-info i {
        font-size: 16px;
    }
    
    /* Container más compacto */
    .container {
        padding: 15px;
        padding-bottom: 100px; /* Espacio para bottom nav */
    }
    
    /* Main content */
    .main-content {
        padding: 15px;
        padding-bottom: 100px;
    }
    
    /* Grids a 1 columna */
    .stats,
    .stats-grid,
    .quick-actions,
    .commission-cards {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    /* Plans y productos a 1 columna */
    .plans-grid,
    .mission-grid,
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Cards más compactas */
    .stat-card,
    .plan-card,
    .mission-card,
    .product-card,
    .action-button {
        padding: 15px;
    }
    
    /* Stat cards estilo App Móvil */
    .stat-card,
    .stat-item {
        padding: 20px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 165, 0, 0.08) 100%) !important;
        border: 2px solid rgba(255, 215, 0, 0.3) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .stat-card:active,
    .stat-item:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }
    
    .stat-value {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
        text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5) !important;
        margin-bottom: 4px !important;
    }
    
    .stat-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Welcome banner estilo App Móvil */
    .welcome-banner {
        padding: 24px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 165, 0, 0.12) 100%) !important;
        border: 2px solid rgba(255, 215, 0, 0.4) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    .welcome-banner h1 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
        text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4) !important;
        margin-bottom: 8px !important;
    }
    
    .welcome-banner p {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        line-height: 1.5 !important;
    }
    
    /* Team banner */
    .team-banner {
        padding: 25px 15px;
    }
    
    .team-banner .total-count {
        font-size: 36px !important;
    }
    
    /* Secciones */
    .referral-section,
    .profile-section {
        padding: 20px 15px;
        margin-bottom: 15px;
    }
    
    /* Títulos de sección */
    h2, h3 {
        font-size: 18px !important;
    }
    
    /* Botones estilo App Móvil */
    button,
    .btn,
    .btn-primary,
    .action-button,
    .copy-link-btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        text-decoration: none !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Botones primarios (dorados) */
    .btn-primary,
    button[type="submit"]:not(.modal-close),
    .action-button {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
        color: #000 !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    }
    
    .btn-primary:active,
    button[type="submit"]:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Botones con iconosestilo App Móvil */
    .bottom-nav {
        padding: 8px 10px 8px 10px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        min-height: 70px !important;
        background: rgba(15, 15, 35, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 2px solid rgba(255, 215, 0, 0.5) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5), 0 -2px 10px rgba(255, 215, 0, 0.2) !important;
    }
    
    .nav-item {
        font-size: 11px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        min-width: 70px !important;
        min-height: 56px !important;
        gap: 6px !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    
    .nav-item i {
        font-size: 26px !important;
        margin-bottom: 2px !important;
        transition: all 0.2s ease !important;
    }
    
    .nav-item span {
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
    }
    
    .nav-item.active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.25) 100%) !important;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.2) !important;
    }
    
    .nav-item.active i {
        transform: scale(1.15) !important;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) !important;
    }
    
    .nav-item:active {
        transform: scale(0.95) !important;
    }
    
    /* Botón hamburguesa más compacto y elegante */
    .hamburger-menu,
    .hamburger-btn {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
        border-radius: 10px !important;
        background: rgba(255, 215, 0, 0.1) !important;
        border: 1px solid rgba(255, 215, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    
    .hamburger-menu:hover,
    .hamburger-btn:hover {
        background: rgba(255, 215, 0, 0.2) !important;
        border-color: rgba(255, 215, 0, 0.5) !important;
    }
    
    .hamburger-menu span,
    .hamburger-btn span {
        width: 20px !important;
        height: 2px !important;
        background: #FFD700 !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }
    
    /* Botones de acción rápida */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .action-button {
        width: 100% !important;
        padding: 18px 20px !important;
        min-height: 56px !important;
    }
    
    .action-button i {
        font-size: 24px !important;
    }
    
    .action-button span {
        font-size: 15px !important;
    }
    
    /* Botón copiar link */
    .copy-link-btn {
        min-height: 48px !important;
        width: 100% !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
    }
    
    /* Botones de close en modales */
    .modal-close {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 28px !important;
        line-height: 1 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    /* Inputs estilo App Móvil */
    input,
    select,
    textarea,
    .referral-link-input {
        padding: 14px 16px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        border: 2px solid rgba(255, 215, 0, 0.3) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
    }
    
    input:focus,
    select:focus,
    textarea:focus,
    .referral-link-input:focus {
        border-color: #FFD700 !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2) !important;
        outline: none !important;
    }
    
    /* Input groups */
    .input-group {
        margin-bottom: 18px !important;
    }
    
    .input-group label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        display: block !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Modales estilo App Móvil */
    .modal-content {
        padding: 24px !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        margin: 20px auto !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, rgba(15, 15, 35, 0.98) 0%, rgba(25, 25, 45, 0.98) 100%) !important;
        backdrop-filter: blur(20px) !important;
        border: 2px solid rgba(255, 215, 0, 0.3) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    }
    
    .modal-header {
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 2px solid rgba(255, 215, 0, 0.3) !important;
    }
    
    .modal-header h3 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
    }
    
    .modal-body {
        max-height: calc(90vh - 180px) !important;
        overflow-y: auto !important;
    }
    
    /* Scrollbar en modales */
    .modal-body::-webkit-scrollbar {
        width: 6px !important;
    }
    
    .modal-body::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 3px !important;
    }
    
    .modal-body::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, 0.5) !important;
        border-radius: 3px !important;
    }
    
    /* Sidebar más estrecho */
    .sidebar {
        width: 280px;
        left: -280px;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    /* Referral cards en columna */
    .referral-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 18px !important;
    }
    
    .referral-card .user-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
    
    .referral-card .user-info {
        flex: 1 !important;
        width: 100% !important;
    }
    
    .referral-card .user-name {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    .referral-card .user-email {
        font-size: 13px !important;
    }
    
    /* Header más compacto */
    .header,
    .top-header {
        padding: 12px 15px !important;
        height: auto !important;
        min-height: 60px !important;
    }
    
    .logo {
        font-size: 18px !important;
    }
    
    .logo img {
        width: 35px !important;
        height: 35px !important;
    }
    
    /* User info en header */
    .user-info {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    
    .user-info i {
        font-size: 16px !important;
    }
    
    /* Secciones más compactas */
    .section,
    .referral-section,
    .profile-section,
    .commission-section {
        padding: 18px 15px !important;
        margin-bottom: 15px !important;
        border-radius: 14px !important;
    }
    
    /* Títulos de sección más prominentes */
    .section h2,
    .section-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
        margin-bottom: 15px !important;
    }
    
    .section h3 {
        font-size: 17px !important;
        font-weight: 600 !important;
    }
    
    /* Badges y status estilo App */
    .badge,
    .status-badge,
    .plan-badge,
    .level-badge {
        padding: 6px 12px !important;
        border-radius: 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Alerts y mensajes */
    .alert,
    .notification,
    .message-box {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    /* Links de referido */
    .referral-link-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .referral-link-input {
        flex: 1 !important;
        width: 100% !important;
    }
    
    /* Iconos más grandes en cards */
    .plan-card i,
    .mission-card i,
    .product-card i {
        font-size: 32px !important;
    }
    
    /* Precios destacados */
    .price,
    .plan-price,
    .product-price {
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
    }
    
    /* Descripciones */
    .description,
    .plan-description,
    .product-description {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Listas de features */
    .features-list,
    .benefits-list {
        font-size: 13px !important;
    }
    
    .features-list li,
    .benefits-list li {
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Progress bars */
    .progress-bar,
    .mission-progress {
        height: 10px !important;
        border-radius: 5px !important;
    }
    
    /* Loading spinners */
    .spinner,
    .loader {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Empty states */
    .empty-state,
    .no-data {
        padding: 40px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    .empty-state i {
        font-size: 48px !important;
        margin-bottom: 15px !important;
        opacity: 0.5 !important;
    }
    
    /* WITHDRAW HISTORY - Responsive móvil */
    .withdraw-history-item {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        display: block !important;
    }
    
    .withdraw-history-item > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .withdraw-history-item > div:first-child {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }
    
    /* Monto del retiro más grande */
    .withdraw-history-item > div:first-child > span:first-child {
        font-size: 22px !important;
        font-weight: 700 !important;
    }
    
    /* Código de retiro móvil - mejorado sin overflow */
    .withdraw-history-item > div > div {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-top: 8px !important;
        overflow: hidden !important;
    }
    
    .withdraw-history-item > div > div > div:last-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
    }
    
    /* Status badges en retiros */
    .withdraw-status-badge {
        padding: 6px 12px !important;
        border-radius: 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }
    
    /* Activity items responsive */
    .activity-item {
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .activity-item .activity-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    .activity-item .activity-amount {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    
    /* Transaction history móvil */
    .transaction-item {
        padding: 14px !important;
        display: block !important;
    }
    
    .transaction-item > div {
        margin-bottom: 8px !important;
    }
    
    .transaction-amount {
        font-size: 20px !important;
        font-weight: 700 !important;
    }


    
    /* Cards generales estilo App Móvil */
    .plan-card,
    .mission-card,
    .product-card,
    .referral-card,
    .activity-item,
    .transaction-item {
        padding: 18px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
        border: 2px solid rgba(255, 215, 0, 0.25) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.2s ease !important;
    }
    
    .plan-card:active,
    .mission-card:active,
    .product-card:active {
        transform: scale(0.98) !important;
    }
    
    /* Tablas responsive estilo App */
    table {
        font-size: 13px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    th, td {
        padding: 12px 10px !important;
    }
    
    th {
        background: rgba(255, 215, 0, 0.15) !important;
        font-weight: 700 !important;
        color: #FFD700 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
    }
    
    tr {
        border-bottom: 1px solid rgba(255, 215, 0, 0.1) !important;
    }
    
    .referral-info {
        width: 100%;
    }
    
    /* Commission cards */
    .commission-card {
        padding: 20px;
    }
    
    .commission-card .percentage {
        font-size: 32px;
    }
    
    /* Activity items */
    .activity-item {
        padding: 12px;
    }
    
    .activity-item .amount {
        font-size: 16px;
    }
}

/* ========================================
   MÓVILES ESTÁNDAR (376px - 480px)
======================================== */
@media (max-width: 480px) {
    /* Font base más pequeño */
    html {
        font-size: 14px;
    }
    
    /* Header ultra compacto */
    .header {
        padding: 8px 12px;
    }
    
    .hamburger-btn {
        width: 36px;
        height: 36px;
    }
    
    .user-info {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* Container compacto */
    .container {
        padding: 12px;
        padding-bottom: 90px;
    }
    
    .main-content {
        padding: 12px;
        padding-bottom: 90px;
    }
    
    /* Cards ultra compactas */
    .stat-card,
    .plan-card,
    .mission-card,
    .product-card {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 20px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
    
    /* Welcome banner */
    .welcome-banner {
        padding: 15px 12px;
    }
    
    .welcome-banner h1 {
        font-size: 20px !important;
    }
    
    .welcome-banner p {
        font-size: 12px !important;
    }
    
    /* Team banner */
    .team-banner .total-count {
        font-size: 32px !important;
    }
    
    /* Secciones */
    .referral-section,
    .profile-section {
        padding: 15px 12px;
    }
    
    /* Títulos */
    h2, h3 {
        font-size: 16px !important;
    }
    
    /* Botones más grandes para táctil */
    .btn,
    .action-button {
        padding: 14px 20px;
        font-size: 14px;
        min-height: 44px; /* Tamaño táctil Apple */
    }
    
    /* Inputs más grandes */
    input,
    select,
    textarea {
        padding: 14px;
        font-size: 16px; /* Evita zoom en iOS */
        min-height: 44px;
    }
    
    /* Commission cards */
    .commission-card .percentage {
        font-size: 28px;
    }
    
    .commission-card .level {
        font-size: 20px;
    }
    
    /* Referral cards */
    .referral-card {
        padding: 12px;
    }
    
    .referral-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .referral-name {
        font-size: 14px;
    }
    
    /* Modal full screen móvil */
    .modal-content {
        max-width: 96% !important;
        margin: 10px;
        padding: 15px;
    }
    
    /* Bottom nav */
    .bottom-nav {
        padding: 10px 8px;
        height: 65px;
    }
    
    .nav-item {
        font-size: 10px;
    }
    
    .nav-item i {
        font-size: 20px;
    }
}

/* ========================================
   MÓVILES PEQUEÑOS (320px - 375px)
======================================== */
@media (max-width: 375px) {
    /* Font más pequeño */
    html {
        font-size: 13px;
    }
    
    /* Header mínimo */
    .header {
        padding: 8px 10px;
    }
    
    /* Container mínimo */
    .container,
    .main-content {
        padding: 10px;
        padding-bottom: 85px;
    }
    
    /* Stats ultra compactos */
    .stat-value {
        font-size: 18px !important;
    }
    
    .stat-label {
        font-size: 10px !important;
    }
    
    /* Welcome banner mínimo */
    .welcome-banner h1 {
        font-size: 18px !important;
    }
    
    /* Team banner */
    .team-banner .total-count {
        font-size: 28px !important;
    }
    
    /* Commission percentages */
    .commission-card .percentage {
        font-size: 24px;
    }
    
    /* Referral avatar */
    .referral-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    /* Botones mantienen tamaño táctil */
    .btn,
    .action-button {
        padding: 12px 16px;
        min-height: 44px;
    }
    
    /* Inputs mantienen tamaño para evitar zoom */
    input,
    select,
    textarea {
        font-size: 16px;
        padding: 12px;
    }
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA APP MÓVIL
======================================== */

/* Scroll suave */
@media (max-width: 768px) {
    * {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Quitar scrollbar en móvil */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    /* Safe area para notch */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header {
        padding-top: calc(10px + env(safe-area-inset-top));
    }
    
    .bottom-nav {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    
    /* Evitar zoom en doble tap */
    body {
        touch-action: manipulation;
    }
    
    /* Mejor contraste en móvil */
    .stat-card,
    .plan-card,
    .mission-card,
    .product-card,
    .referral-card,
    .activity-item {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Animaciones más rápidas en móvil */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Mejorar legibilidad */
    p, span, label {
        line-height: 1.5;
    }
    
    /* Cards con padding uniforme */
    .card,
    .section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    /* Espaciado consistente */
    .mb-1 { margin-bottom: 10px; }
    .mb-2 { margin-bottom: 15px; }
    .mb-3 { margin-bottom: 20px; }
    
    .mt-1 { margin-top: 10px; }
    .mt-2 { margin-top: 15px; }
    .mt-3 { margin-top: 20px; }
    
    /* Flex helpers para móvil */
    .flex-column-mobile {
        flex-direction: column !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
}

/* ========================================
   LANDSCAPE MÓVIL
======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reducir altura de elementos en landscape */
    .welcome-banner,
    .team-banner {
        padding: 15px;
    }
    
    .stat-card {
        padding: 10px;
    }
    
    .bottom-nav {
        height: 55px;
        padding: 8px;
    }
    
    .nav-item i {
        font-size: 18px;
    }
}

/* ========================================
   DARK MODE SUPPORT
======================================== */
@media (prefers-color-scheme: dark) {
    /* Ya está implementado en los estilos base */
}

/* ========================================
   ACCESIBILIDAD
======================================== */

/* Aumentar contraste para botones */
@media (max-width: 768px) {
    .btn:hover,
    .action-button:hover {
        transform: scale(1.02);
    }
    
    /* Área táctil mínima de 44x44px */
    button,
    a.btn,
    .action-button,
    .nav-item {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Focus visible para navegación por teclado */
    button:focus,
    a:focus,
    input:focus {
        outline: 2px solid #FFD700;
        outline-offset: 2px;
    }
}

/* ========================================
   PRINT STYLES (Ocultar en impresión)
======================================== */
@media print {
    .header,
    .sidebar,
    .bottom-nav,
    .hamburger-btn,
    .invite-btn,
    .floating-button {
        display: none !important;
    }
}