/**
 * MOBILE RESPONSIVE STYLES
 * Estilos específicos para mejorar la experiencia móvil
 * Abeme Modjobuy - Eteba Chale Group
 */

/* ============================================
   ADMIN INDEX - Gestión de Envíos
   ============================================ */

@media (max-width: 768px) {
    /* Admin Section */
    .admin-section {
        padding: var(--space-3);
    }
    
    .section-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-4);
    }
    
    /* Admin Actions Bar */
    .admin-actions-bar {
        padding: var(--space-2) !important;
        gap: var(--space-2) !important;
    }
    
    .admin-actions-bar .btn {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-3);
        white-space: nowrap;
    }
    
    .admin-actions-bar .btn i {
        font-size: var(--font-size-sm);
    }
    
    /* Group Container */
    .group-container {
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .group-header {
        padding: var(--space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .group-info {
        width: 100%;
    }
    
    .group-date {
        font-size: var(--font-size-lg);
        display: block;
        margin-bottom: var(--space-2);
    }
    
    .group-stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        width: 100%;
    }
    
    .stat-item {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-2);
        background: rgba(255,255,255,0.1);
        border-radius: var(--radius-md);
        white-space: nowrap;
    }
    
    .notify-arrival-btn {
        width: 100%;
        margin-top: var(--space-2);
        padding: var(--space-2);
        font-size: var(--font-size-sm);
    }
    
    /* Tables to Cards */
    .table-responsive {
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Override inline overflow-x:auto wrapper on the table */
    div[style*="overflow-x"] {
        overflow-x: visible !important;
    }
    
    .admin-table {
        display: block;
        width: 100%;
    }
    
    .admin-table thead {
        display: none;
    }
    
    .admin-table tbody {
        display: block;
    }
    
    .admin-table tr {
        display: block;
        margin-bottom: var(--space-4);
        background: var(--bg-surface);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        box-shadow: var(--shadow-sm);
    }
    
    .admin-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-gray-200);
    }
    
    .admin-table td:last-child {
        border-bottom: none;
    }
    
    .admin-table td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-600);
        margin-right: var(--space-2);
        flex-shrink: 0;
        min-width: 100px;
    }
    
    .admin-table td:nth-child(1)::before { content: "Código: "; }
    .admin-table td:nth-child(2)::before { content: "Remitente: "; }
    .admin-table td:nth-child(3)::before { content: "Destinatario: "; }
    .admin-table td:nth-child(4)::before { content: "Ruta: "; }
    .admin-table td:nth-child(5)::before { content: "Producto: "; }
    .admin-table td:nth-child(6)::before { content: "Peso: "; }
    .admin-table td:nth-child(7)::before { content: "Fecha Envío: "; }
    .admin-table td:nth-child(8)::before { content: "Fecha Est.: "; }
    .admin-table td:nth-child(9)::before { content: "Estado: "; }
    .admin-table td:nth-child(10)::before { content: "Adelanto: "; }
    .admin-table td:nth-child(11)::before { content: "Saldo: "; }
    .admin-table td:nth-child(12)::before { content: ""; }
    
    /* Action Buttons */
    .admin-table td:last-child {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
        justify-content: flex-end;
    }
    
    .action-btn {
        width: auto;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
    }

    /* Editable cells in mobile */
    .admin-table td.editable {
        flex-direction: column;
        align-items: flex-end;
    }
    
    .admin-table td.editable::before {
        align-self: flex-start;
    }
    
    .admin-table .edit-input {
        width: 100% !important;
        max-width: 100%;
        font-size: 0.85rem;
        padding: 6px 8px;
        box-sizing: border-box;
    }
    
    .admin-table .edit-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .admin-table .display-text {
        text-align: right;
        word-break: break-word;
    }
    
    .admin-table .status-select {
        width: 100%;
        max-width: 180px;
        font-size: 0.85rem;
    }
    
    /* Form Styles */
    .form-group {
        margin-bottom: var(--space-3);
    }
    
    .form-input,
    .form-select {
        font-size: var(--font-size-base);
        padding: var(--space-3);
    }
    
    .discount-display {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .discount-item {
        padding: var(--space-2);
    }
}

/* ============================================
   REGISTER PARTNER - Gestión de Usuarios
   ============================================ */

@media (max-width: 768px) {
    .admin-console-modern {
        padding: var(--space-3) !important;
    }
    
    .admin-console-modern h2 {
        font-size: var(--font-size-xl);
    }
    
    /* User Cards */
    .user-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-3);
        gap: var(--space-3);
    }
    
    .user-info {
        width: 100%;
    }
    
    .user-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--space-2) !important;
    }
    
    .user-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .user-actions .badge {
        align-self: flex-start;
    }
    
    /* Tabs */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: var(--font-size-sm);
        padding: var(--space-2) var(--space-3);
    }
    
    /* Forms */
    .row.g-3 {
        gap: var(--space-3) !important;
    }
    
    .col-md-6,
    .col-12 {
        width: 100%;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    /* Modal */
    .modal-dialog {
        margin: var(--space-2);
    }
    
    .modal-content {
        border-radius: var(--radius-lg);
    }
    
    .modal-footer {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}

/* ============================================
   ARCHIVED SHIPMENTS - Envíos Archivados
   ============================================ */

@media (max-width: 768px) {
    .page-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-4);
    }
    
    .shipment-group {
        margin-bottom: var(--space-4);
    }
    
    .group-header h2 {
        font-size: var(--font-size-lg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .group-date,
    .total-shipments {
        font-size: var(--font-size-sm);
        display: block;
    }
    
    /* Shipments Grid to Stack */
    .shipments-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .shipment-card {
        width: 100%;
        min-width: auto;
    }
    
    .shipment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .shipment-code {
        font-size: var(--font-size-lg);
    }
    
    .detail-item {
        padding: var(--space-2) 0;
    }
    
    .detail-item label {
        font-size: var(--font-size-sm);
        min-width: 100px;
    }
}

/* ============================================
   CAJA - Monedero
   ============================================ */

@media (max-width: 768px) {
    .wallet-page {
        padding: var(--space-3);
    }
    
    .wallet-hero {
        padding: var(--space-4);
    }
    
    .hero-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .hero-top h1 {
        font-size: var(--font-size-xl);
    }
    
    .hero-actions {
        width: 100%;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
    
    /* Balances Grid */
    .balances {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .wallet-card {
        padding: var(--space-4);
    }
    
    .wallet-card .label {
        font-size: var(--font-size-sm);
    }
    
    .wallet-card .value {
        font-size: var(--font-size-xl);
    }
    
    /* Card Modern */
    .card-modern {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .card-modern h2 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-3);
    }
    
    /* Quick Actions */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
    
    .action-card {
        padding: var(--space-4);
    }
    
    .action-card .btn {
        width: 100%;
    }
    
    /* Filters */
    .filters {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    /* Table Dark */
    .table-dark {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-dark thead {
        display: none;
    }
    
    .table-dark tbody {
        display: block;
    }
    
    .table-dark tr {
        display: block;
        margin-bottom: var(--space-3);
        background: rgba(255,255,255,0.05);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
    }
    
    .table-dark td {
        display: flex;
        justify-content: space-between;
        padding: var(--space-2) 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .table-dark td:last-child {
        border-bottom: none;
    }
    
    .table-dark td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        margin-right: var(--space-2);
    }
}

/* ============================================
   BENEFITS - Sistema de Beneficios
   ============================================ */

@media (max-width: 768px) {
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .stat-card {
        padding: var(--space-4);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
    }
    
    .stat-icon i {
        font-size: var(--font-size-xl);
    }
    
    .stat-label {
        font-size: var(--font-size-sm);
    }
    
    .stat-value {
        font-size: var(--font-size-xl);
    }
    
    /* Benefits Distribution */
    .benefits-distribution {
        flex-direction: column;
    }
    
    .chart-section {
        width: 100%;
        padding: var(--space-4);
    }
    
    .chart-section h2 {
        font-size: var(--font-size-lg);
    }
    
    /* Partners Progress */
    .partners-progress {
        padding: var(--space-3);
    }
    
    .partner-progress-card {
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }
    
    .progress-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .partner-name {
        font-size: var(--font-size-base);
    }
    
    .progress-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        width: 100%;
    }
    
    .percentage-badge {
        font-size: var(--font-size-sm);
    }
    
    .amount {
        font-size: var(--font-size-lg);
    }
    
    /* Detailed View */
    .detailed-view {
        padding: var(--space-4);
    }
    
    .detailed-view h2 {
        font-size: var(--font-size-lg);
    }
    
    .detailed-view .table-dark {
        display: block;
    }
    
    .detailed-view .table-dark thead {
        display: none;
    }
    
    .detailed-view .table-dark tbody {
        display: block;
    }
    
    .detailed-view .table-dark tr {
        display: block;
        margin-bottom: var(--space-4);
        background: rgba(255,255,255,0.05);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
    
    .detailed-view .table-dark td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-2) 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .detailed-view .table-dark td:last-child {
        border-bottom: none;
    }
    
    .detailed-view .table-dark td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-400);
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-1);
    }
    
    .detailed-view .table-dark td:nth-child(1)::before { content: "Socio"; }
    .detailed-view .table-dark td:nth-child(2)::before { content: "Porcentaje"; }
    .detailed-view .table-dark td:nth-child(3)::before { content: "Saldo Disponible"; }
    .detailed-view .table-dark td:nth-child(4)::before { content: "Acciones"; }
    
    .detailed-view .btn-group {
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }
    
    .detailed-view .btn-group .btn {
        width: 100%;
        justify-content: center;
    }
    
    .partner-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .main-partner-badge {
        align-self: flex-start;
    }
}

/* ============================================
   GENERAL MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Container */
    .container {
        padding: var(--space-3);
    }
    
    /* Buttons */
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-base);
    }
    
    .btn i {
        font-size: var(--font-size-lg);
    }
    
    /* Alerts */
    .alert {
        padding: var(--space-3);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-lg);
    }
    
    /* Modals */
    .modal {
        padding: var(--space-2);
    }
    
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: var(--space-4);
    }
    
    .modal-body {
        padding: var(--space-4);
    }
    
    .modal-footer {
        padding: var(--space-4);
    }
    
    /* Forms */
    .form-label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: var(--font-size-base);
        padding: var(--space-3);
        border-radius: var(--radius-lg);
    }
    
    /* Touch Targets */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    select {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Spacing */
    .section {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    /* Typography */
    h1 {
        font-size: var(--font-size-2xl);
    }
    
    h2 {
        font-size: var(--font-size-xl);
    }
    
    h3 {
        font-size: var(--font-size-lg);
    }
    
    /* Hide on Mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show on Mobile */
    .show-mobile {
        display: block !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .wallet-hero,
    .hero-top {
        padding: var(--space-3);
    }
    
    .balances {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   SMALL MOBILE (< 375px)
   ============================================ */

@media (max-width: 375px) {
    .admin-actions-bar .btn {
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-2);
    }
    
    .admin-actions-bar .btn i {
        margin-right: 0;
    }
    
    .admin-actions-bar .btn span {
        display: none;
    }
    
    .stat-value {
        font-size: var(--font-size-lg);
    }
    
    .partner-name {
        font-size: var(--font-size-sm);
    }
}