/* =============================================================
   MOBILE RESPONSIVE STYLES
   Ajustes para que la aplicación sea usable en teléfonos en
   orientación vertical. Enfoque principal: Reporte de Ventas.
   ============================================================= */

/* ====================== SIDEBAR: Títulos de sección ====================== */
.nav-section-title {
    padding: 14px 16px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
    margin-top: 4px;
}
.nav-section-title:first-child {
    padding-top: 4px;
    margin-top: 0;
}
/* Línea sutil arriba (excepto en el primero) */
.nav-section-title:not(:first-child) {
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
    padding-top: 14px;
}
/* Separador sutil antes del primer item después de cada título */
.nav-menu .nav-section-title + .nav-item { margin-top: 2px; }


/* Lista móvil oculta por defecto (en desktop vemos la tabla) */
.sales-mobile-list { display: none; }

/* ---------- Desktop: nada se ve afectado ---------- */

/* ====================== TABLETS Y MÓVILES (≤ 992px) ====================== */
@media (max-width: 992px) {
    /* Ajustes de la barra de filtros del reporte */
    #sales-section .row > [class*="col-md-"] {
        margin-bottom: 10px;
    }

    /* Toolbar de resultados (ordenar, buscar, imprimir) */
    #sales-report-results .card-body > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    #sales-report-results .card-body > .d-flex.justify-content-between > .d-flex.gap-2 {
        flex-wrap: wrap;
        width: 100%;
        gap: 6px !important;
    }

    #sales-report-results .card-body > .d-flex.justify-content-between > .d-flex.gap-2 > * {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ====================== MÓVILES (≤ 768px) ====================== */
@media (max-width: 768px) {

    /* ----- Contenido general ----- */
    .main-content { padding: 0; }
    .content-area { padding: 12px; }

    .section-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start !important;
    }
    .section-header h2 {
        font-size: 1.1rem;
        line-height: 1.2;
    }
    .section-header .btn-add,
    .section-header .btn-secondary-header {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    .section-header .header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .section-header .header-actions > * { flex: 1 1 140px; }

    /* ----- Ocultar la tabla desktop en móvil ----- */
    #sales-list > .table-responsive { display: none !important; }

    /* ----- Mostrar la lista de tarjetas móvil ----- */
    .sales-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 4px 2px 20px;
    }

    /* ----- Tarjeta de venta (resumen) ----- */
    .sale-card-mobile {
        background: #ffffff;
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        border-left: 4px solid #3b82f6;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .sale-card-mobile:active {
        transform: scale(0.985);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    /* Color de la barra lateral según estado de pago */
    .sale-card-mobile.status-paid      { border-left-color: #22c55e; }
    .sale-card-mobile.status-partial   { border-left-color: #f59e0b; }
    .sale-card-mobile.status-pending   { border-left-color: #ef4444; }
    .sale-card-mobile.status-cancelled { border-left-color: #334155; opacity: 0.75; }

    .sale-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .sale-card-id {
        font-weight: 700;
        color: #1e293b;
        font-size: 0.95rem;
    }
    .sale-card-id .sale-hash { color: #94a3b8; margin-right: 2px; }

    .sale-card-customer {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 0.95rem;
        color: #1e293b;
    }
    .sale-card-customer i {
        color: #64748b;
        font-size: 1.1rem;
    }
    .sale-card-customer strong {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }

    .sale-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.78rem;
        color: #64748b;
        margin-bottom: 10px;
    }
    .sale-card-meta span { display: inline-flex; align-items: center; gap: 4px; }

    .sale-card-totals {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }
    .sale-card-totals .total-item {
        display: flex;
        flex-direction: column;
        padding: 10px;
        background: #f8fafc;
        border-radius: 10px;
        text-align: center;
    }
    .sale-card-totals .total-item .label {
        font-size: 0.68rem;
        color: #64748b;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .sale-card-totals .total-item .value {
        font-size: 1.05rem;
        font-weight: 700;
        margin-top: 2px;
    }
    .sale-card-totals .total-usd { background: #ecfdf5; }
    .sale-card-totals .total-usd .value { color: #16a34a; }
    .sale-card-totals .total-mxn { background: #eff6ff; }
    .sale-card-totals .total-mxn .value { color: #1565c0; }

    .sale-card-footer {
        display: flex;
        justify-content: flex-end;
        font-size: 0.75rem;
        color: #3b82f6;
        padding-top: 8px;
        border-top: 1px solid #f1f5f9;
        font-weight: 500;
    }
    .sale-card-footer i { margin-left: 4px; }

    /* ----- Vista de detalle móvil (overlay full-screen) ----- */
    .mobile-detail-overlay {
        position: fixed;
        inset: 0;
        background: #f8fafc;
        z-index: 10050;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
    }
    .mobile-detail-overlay.active { transform: translateX(0); }

    .mobile-detail-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: #ffffff;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .mobile-detail-header h5 {
        margin: 0;
        flex: 1;
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-detail-header .btn-back {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: #ffffff;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mobile-detail-header .btn-back:active { background: rgba(255, 255, 255, 0.35); }
    .mobile-detail-header .badge { font-size: 0.7rem; }

    .mobile-detail-body {
        padding: 14px;
        padding-bottom: 40px;
    }

    .detail-section {
        background: #ffffff;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .detail-section h6 {
        margin: 0 0 10px;
        color: #1e293b;
        font-size: 0.95rem;
        font-weight: 700;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .detail-section h6 i { color: #3b82f6; }

    .detail-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        font-size: 0.85rem;
        border-bottom: 1px dashed #f1f5f9;
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-label { color: #64748b; }
    .detail-value {
        color: #1e293b;
        font-weight: 500;
        text-align: right;
        word-break: break-word;
    }

    /* ----- Totales (detalle) ----- */
    .totals-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .total-box {
        padding: 14px 10px;
        border-radius: 12px;
        text-align: center;
    }
    .total-box.total-usd { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
    .total-box.total-mxn { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
    .total-box .label {
        display: block;
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .total-box .value {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 4px;
    }
    .total-box.total-usd .value { color: #16a34a; }
    .total-box.total-mxn .value { color: #1565c0; }
    .total-box .tc {
        display: block;
        font-size: 0.7rem;
        color: #64748b;
        margin-top: 4px;
    }

    /* ----- Ticket cards (dentro del detalle) ----- */
    .ticket-card-mobile {
        background: #f8fafc;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
        border-left: 4px solid #10b981;
    }
    .ticket-card-mobile:last-child { margin-bottom: 0; }

    .ticket-card-header {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }
    .ticket-number {
        background: #10b981;
        color: #ffffff;
        min-width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .ticket-name { flex: 1; min-width: 0; }
    .ticket-name strong {
        display: block;
        font-size: 0.9rem;
        color: #1b5e20;
        word-break: break-word;
    }
    .ticket-club {
        font-size: 0.75rem;
        color: #64748b;
        margin-top: 2px;
    }

    .ticket-status {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 10px;
        color: #ffffff;
        flex-shrink: 0;
        letter-spacing: 0.3px;
    }
    .ticket-status-paid    { background: #22c55e; }
    .ticket-status-partial { background: #f59e0b; }
    .ticket-status-pending { background: #ef4444; }

    .ticket-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 14px;
        font-size: 0.82rem;
    }
    .ticket-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 3px 0;
    }
    .ticket-row > span { color: #64748b; }
    .ticket-row > strong { text-align: right; }

    .ticket-card-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
    }
    .btn-ticket-action {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.85rem;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
    }
    .btn-ticket-action.btn-payment { background: #10b981; }
    .btn-ticket-action.btn-coupon  { background: #3b82f6; }
    .btn-ticket-action.disabled,
    .btn-ticket-action[disabled]    {
        background: #d1d5db;
        color: #9ca3af;
        cursor: not-allowed;
    }

    /* ----- Payment cards ----- */
    .payment-card-mobile {
        background: #f8fafc;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 8px;
        border-left: 4px solid #2196f3;
    }
    .payment-card-mobile:last-child { margin-bottom: 0; }

    .payment-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9rem;
    }
    .payment-card-header i { color: #2196f3; font-size: 1.05rem; }
    .payment-number {
        margin-left: auto;
        font-size: 0.75rem;
        color: #64748b;
    }
    .payment-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.82rem;
    }
    .payment-row > span { color: #64748b; }
    .payment-row > strong { text-align: right; }

    /* ----- Resumen de estadísticas ----- */
    #sales-summary .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 0 0 12px;
    }
    #sales-summary .row > .col {
        flex: unset;
        max-width: unset;
        padding: 0;
    }
    #sales-summary .stat-card {
        padding: 10px;
        gap: 8px;
    }
    #sales-summary .stat-card .stat-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        flex-shrink: 0;
    }
    #sales-summary .stat-card .stat-value {
        font-size: 1rem;
        word-break: break-all;
    }
    #sales-summary .stat-card .stat-label {
        font-size: 0.72rem;
    }

    /* ----- Filtros de búsqueda ----- */
    #sales-section .card-body .row > [class*="col-md-"] { margin-bottom: 10px; }
    #sales-section .col-md-2.d-flex.align-items-end .btn { width: 100%; }

    /* ----- Tablas genéricas en móvil ----- */
    .content-section .table-responsive { font-size: 0.85rem; }

    /* ----- Topbar / breadcrumb ----- */
    .topbar {
        flex-wrap: wrap;
        padding: 10px 12px;
    }
    .breadcrumb-container {
        font-size: 0.8rem;
        overflow-x: auto;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    /* ----- Bootstrap Modals en pantalla completa (con scroll) ----- */
    #ticketPaymentModal .modal-dialog,
    #sellerModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }
    #ticketPaymentModal .modal-content,
    #sellerModal .modal-content {
        min-height: 100vh;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #ticketPaymentModal .modal-header,
    #sellerModal .modal-header,
    #ticketPaymentModal .modal-footer,
    #sellerModal .modal-footer {
        flex-shrink: 0 !important;
    }
    /* El body es la única área scrollable dentro del modal */
    #ticketPaymentModal .modal-body,
    #sellerModal .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
    }
    /* Reducir paddings internos */
    #ticketPaymentModal .modal-header { padding: 14px 16px !important; }
    #ticketPaymentModal .modal-footer { padding: 12px 16px !important; }
    #ticketPaymentModal .row.g-3.mb-4 .col-md-4 { margin-bottom: 10px; }
    /* El historial de pagos debe permitir scroll propio o extenderse */
    #ticketPaymentModal #tpm-payments-list { max-height: none !important; }

    /* ----- Panels / forms deslizables a pantalla completa ----- */
    .form-panel,
    .side-panel {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ----- Quitar selector de columnas que quebrase el layout ----- */
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ====================== MÓVILES PEQUEÑOS (≤ 480px) ====================== */
@media (max-width: 480px) {
    .content-area { padding: 10px; }

    .mobile-detail-header h5 { font-size: 0.88rem; }
    .mobile-detail-header { padding: 10px 12px; }

    /* Ticket body una sola columna para no cortar números */
    .ticket-card-body { grid-template-columns: 1fr; }

    .detail-section { padding: 12px; }

    .sale-card-totals .total-item .value { font-size: 1rem; }

    #sales-summary .row { grid-template-columns: 1fr 1fr; }

    .stats-grid { grid-template-columns: 1fr; }

    /* Acciones de tickets apiladas si no alcanza */
    .ticket-card-actions { flex-wrap: wrap; }
    .btn-ticket-action { min-width: calc(50% - 4px); }
}

/* ====================== BOTÓN DE CANCELAR (desktop + móvil) ====================== */

/* Botón en la tarjeta móvil (footer) */
.sale-card-cancel-btn {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sale-card-cancel-btn:hover { background: #fecaca; }

/* Botón grande dentro del detalle móvil */
.btn-cancel-reservation {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
}
.btn-cancel-reservation:hover { filter: brightness(1.05); }
.btn-cancel-reservation:active { transform: scale(0.98); }

/* Zona de riesgo */
.detail-section.danger-section {
    background: #fff5f5;
}

/* Modal de motivo de cancelación */
#cancelReservationModal .cancel-reservation-modal {
    max-width: 480px;
}
#cancelReservationReason:focus {
    outline: none;
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Tooltip de motivo en la tabla */
.cancel-reason-tooltip { margin-left: 4px; }

/* En desktop, el botón inline dentro de la celda de status */
@media (min-width: 769px) {
    .btn-cancel-sale:hover {
        background: #fecaca !important;
        filter: brightness(1.02);
    }
}

/* Badge 'dark' para status cancelado cuando Bootstrap no lo provea */
.badge.bg-dark { background-color: #334155 !important; color: #ffffff !important; }

/* ====================== CONFIGURACIÓN DE EMPRESA ====================== */
#config-section .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
#policy-lang-tabs .nav-link {
    color: #475569;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
#policy-lang-tabs .nav-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: transparent;
}
#config-section textarea { font-family: inherit; line-height: 1.5; }

@media (max-width: 768px) {
    #config-section .card-body { padding: 14px; }
    #policy-lang-tabs .nav-link { padding: 8px 10px; font-size: 0.85rem; }
    #config-section textarea { font-size: 0.9rem; }
    #company-config-save-btn { padding: 8px 12px; font-size: 0.85rem; }
}

/* ====================== DETALLES DEL CLIENTE ====================== */

/* Link del nombre del cliente en la tabla desktop */
.sale-customer-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
    cursor: pointer;
}
.sale-customer-link:hover {
    color: #2563eb;
    text-decoration: underline;
}
.sale-customer-link strong { color: inherit; }
.customer-info-icon {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: color 0.15s;
}
.sale-customer-link:hover .customer-info-icon { color: #2563eb; }

/* Botón "Datos del cliente" en el header de Información General (móvil) */
.btn-customer-details {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
}
.btn-customer-details:active { background: #dbeafe; }

/* Fila Cliente clickeable en el detalle móvil */
.detail-row-customer {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    margin: 0 -6px;
    padding: 7px 6px !important;
    border-radius: 6px;
}
.detail-row-customer:active { background: #eff6ff; }
.detail-customer-link {
    color: #2563eb !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600 !important;
}
.detail-customer-link i {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Modal de detalles del cliente */
#customerDetailsModal .customer-details-modal {
    max-width: 520px;
    padding: 0 !important;
    text-align: left;
    overflow: hidden;
    width: 92vw;
}
.cust-modal-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    padding: 20px 22px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.cust-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    flex-shrink: 0;
}
.cust-header-info { flex: 1; min-width: 0; }
.cust-header-info h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cust-header-info p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-close-inline {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-close-inline:hover { background: rgba(255, 255, 255, 0.35); }

.cust-modal-body {
    padding: 20px 22px;
    max-height: 60vh;
    overflow-y: auto;
    background: #ffffff;
}
.cust-empty {
    text-align: center;
    color: #94a3b8;
    padding: 30px 12px;
}
.cust-empty i { font-size: 2rem; display: block; margin-bottom: 8px; color: #cbd5e1; }

.cust-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cust-field {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #f1f5f9;
    align-items: center;
}
.cust-field:last-child { border-bottom: none; }
.cust-field-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.cust-field-body { flex: 1; min-width: 0; }
.cust-field-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.cust-field-value {
    font-size: 0.92rem;
    color: #1e293b;
    word-break: break-word;
}
.cust-field-value a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.cust-field-value a:hover { text-decoration: underline; }

.cust-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.cust-quick-action {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 90px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.cust-qa-email { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.cust-qa-email:hover { background: #dbeafe; }
.cust-qa-phone { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cust-qa-phone:hover { background: #d1fae5; }
.cust-qa-wa    { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; }
.cust-qa-wa:hover { background: #dcfce7; }

.cust-modal-footer {
    padding: 12px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    #customerDetailsModal .customer-details-modal { width: 96vw; max-width: 96vw; }
    .cust-modal-header { padding: 16px 18px 14px; }
    .cust-avatar { width: 44px; height: 44px; font-size: 1.5rem; }
    .cust-header-info h4 { font-size: 0.98rem; }
    .cust-modal-body { padding: 14px 16px; }
    .cust-field-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .cust-quick-action { flex: 1 1 100%; }
}

/* ====================== MÓDULO CATÁLOGOS - V2 (Drill-down) ====================== */

/* Breadcrumb de navegación interna */
.catalog-breadcrumb {
    margin-bottom: 12px;
    padding: 8px 4px;
    font-size: 0.88rem;
}
.catalog-breadcrumb .bc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.catalog-breadcrumb .bc-item a,
.catalog-breadcrumb .bc-item span {
    color: #64748b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.catalog-breadcrumb .bc-item a:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.catalog-breadcrumb .bc-item.bc-current a,
.catalog-breadcrumb .bc-item.bc-current span {
    color: #1e293b;
    font-weight: 600;
}
.catalog-breadcrumb .bc-sep {
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* Tarjeta contenedora de la vista */
.catalog-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Toolbar (búsqueda + botón nuevo) */
.cat-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    align-items: center;
}
.cat-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.cat-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.95rem;
}
.cat-search {
    padding-left: 38px !important;
    padding-right: 12px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.92rem;
    transition: all 0.15s;
}
.cat-search:focus {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.cat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 12px;
    padding: 0 2px;
}
.cat-warn {
    color: #b45309;
    background: #fef3c7;
    padding: 3px 8px;
    border-radius: 6px;
}

.cat-muted { color: #64748b; }

/* Empty state */
.cat-empty {
    text-align: center;
    padding: 50px 20px;
    color: #64748b;
}
.cat-empty i { font-size: 2rem; color: #cbd5e1; display: block; margin-bottom: 10px; }
.cat-empty-icon { font-size: 3rem; color: #cbd5e1; margin-bottom: 12px; }
.cat-empty h4 { color: #1e293b; margin-bottom: 8px; font-size: 1.1rem; }
.cat-empty p { margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cat-empty small { display: block; margin-top: 8px; font-size: 0.8rem; }

.catalog-loading {
    padding: 60px 20px;
    text-align: center;
}

/* ---------- Vista de Países: Grid de tarjetas ---------- */
.country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.country-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    outline: none;
}
.country-card:hover {
    border-color: #3b82f6;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}
.country-card:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.cc-flag {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.cc-body { flex: 1; min-width: 0; }
.cc-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}
.cc-codes {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.cc-badge {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.cc-dial {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: #059669;
    font-weight: 600;
    font-size: 0.78rem;
}
.cc-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.country-card:hover .cc-actions { opacity: 1; }
.cc-chevron {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin-left: 4px;
    transition: transform 0.15s, color 0.15s;
}
.country-card:hover .cc-chevron {
    color: #3b82f6;
    transform: translateX(3px);
}

/* ---------- Header del detalle (país / estado) ---------- */
.cat-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}
.btn-back {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.btn-back:hover { background: #f1f5f9; border-color: #3b82f6; color: #3b82f6; }
.cat-header-flag {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.cat-header-flag .bi { font-size: 2rem; color: #475569; }
.cat-header-info { flex: 1; min-width: 0; }
.cat-header-info h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #1e293b;
    font-weight: 700;
}
.cat-header-sub {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
}
.cat-header-sub .cat-muted i { margin-right: 3px; }
.cat-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ---------- Sub-navegación (Estados / Ciudades) dentro del país ---------- */
.cat-subnav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.cat-subtab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cat-subtab:hover { color: #1e293b; }
.cat-subtab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
.subtab-count {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}
.cat-subtab.active .subtab-count {
    background: #dbeafe;
    color: #1e40af;
}

/* ---------- Filas (Estados y Ciudades) ---------- */
.cat-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cat-rows-dense { gap: 2px; }

.cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
    outline: none;
}
.cat-row:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}
.cat-row:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.cat-row-compact {
    padding: 8px 12px;
    cursor: default;
}
.cat-row-compact:hover { transform: none; }

.cat-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cat-row-compact .cat-row-icon {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
}
.cat-row-body { flex: 1; min-width: 0; }
.cat-row-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-row-sub {
    margin-top: 2px;
    font-size: 0.75rem;
    color: #64748b;
}
.cat-row-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.cat-row:hover .cat-row-actions { opacity: 1; }
.cat-row-actions .cc-chevron {
    color: #cbd5e1;
    margin-left: 6px;
    transition: transform 0.15s, color 0.15s;
}
.cat-row:hover .cc-chevron {
    color: #3b82f6;
    transform: translateX(3px);
}

/* Paginación ligera */
.cat-pagination {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
    .country-grid { grid-template-columns: 1fr; }
    .cat-toolbar { flex-direction: column; align-items: stretch; }
    .cat-toolbar .btn { width: 100%; }
    .cat-header { padding: 12px; gap: 10px; }
    .cat-header-flag { font-size: 2rem; }
    .cat-header-info h3 { font-size: 1rem; }
    .cat-subtab { padding: 8px 10px; font-size: 0.82rem; }
    .btn-lbl { display: none; }
    .section-header .btn-add,
    .section-header .btn-secondary-header {
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* En móvil, las acciones siempre visibles en la tarjeta */
    .cc-actions, .cat-row-actions { opacity: 1; }
    .country-card { padding: 10px 12px; }
    .cc-flag { font-size: 1.75rem; }
    .cat-row-compact { padding: 8px 10px; }
    .cat-header-actions .btn-sm { padding: 4px 8px; }
}

/* ====================== MÓDULO CATÁLOGOS (legacy: compatibility) ====================== */
.tab-count {
    display: inline-block;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}
#catalogs-tabs .nav-link {
    color: #475569;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    padding: 10px 14px;
}
#catalogs-tabs .nav-link.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: transparent;
}
#catalogs-tabs .nav-link.active .tab-count {
    background: #dbeafe;
    color: #1e40af;
}

.catalog-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.catalog-toolbar > input,
.catalog-toolbar > select { flex: 1 1 180px; min-width: 0; }
.catalog-toolbar > button { flex-shrink: 0; }
.catalog-toolbar-cities > select:first-of-type,
.catalog-toolbar-cities > select:nth-of-type(2) { flex: 1 1 150px; }

.catalog-empty {
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 0.9rem;
}
.catalog-loading {
    padding: 40px 16px;
    text-align: center;
}

.catalog-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.catalog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.catalog-table thead th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.catalog-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.catalog-table tbody tr:hover { background: #f8fafc; }
.catalog-table tbody tr:last-child td { border-bottom: none; }

.catalog-badge {
    display: inline-block;
    background: #e0e7ff;
    color: #3730a3;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.catalog-phone {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: #059669;
    font-weight: 600;
}
.catalog-actions {
    text-align: right;
    white-space: nowrap;
}
.btn-icon {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
}
.btn-icon:hover { background: #f1f5f9; color: #1e293b; }
.btn-icon.btn-icon-danger:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.catalog-pagination {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}
.catalog-pagination-inner {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.catalog-pagination-inner span {
    padding: 0 10px;
    font-size: 0.85rem;
    color: #475569;
}

/* ---- Modal de sembrado ---- */
.seed-modal .seed-scope-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}
.seed-modal .seed-opt {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    align-items: flex-start;
    transition: all 0.15s;
}
.seed-modal .seed-opt:hover { border-color: #3b82f6; background: #f8fafc; }
.seed-modal .seed-opt input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #3b82f6;
}
.seed-modal .seed-opt div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.seed-modal .seed-opt strong { font-size: 0.9rem; color: #1e293b; }
.seed-modal .seed-opt small { color: #64748b; font-size: 0.78rem; }
.seed-modal .seed-opt:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.seed-warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.seed-warning i { flex-shrink: 0; margin-top: 2px; }

.seed-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 6px;
}
.seed-progress-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}
.seed-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 10px;
    transition: width 0.3s;
    width: 0%;
}

/* ---- Móvil (≤ 768px) ---- */
@media (max-width: 768px) {
    .catalog-toolbar { flex-direction: column; align-items: stretch; }
    .catalog-toolbar > input,
    .catalog-toolbar > select,
    .catalog-toolbar > button { width: 100%; flex: unset; }
    .catalog-table thead th,
    .catalog-table tbody td { padding: 8px 10px; font-size: 0.82rem; }
    #catalogs-tabs .nav-link { padding: 8px 10px; font-size: 0.82rem; }
    .tab-count { padding: 1px 5px; font-size: 0.65rem; }
    .catalog-pagination-inner { font-size: 0.8rem; }
    .catalog-pagination-inner span { padding: 0 6px; }
    .seed-modal { max-width: 95% !important; padding: 16px !important; }
    .seed-modal .seed-opt { padding: 10px; }
}

/* ====================== AJUSTES ESPECÍFICOS DE IMPRESIÓN ====================== */
@media print {
    /* La lista móvil nunca se imprime; siempre se imprime la tabla desktop */
    .sales-mobile-list,
    .mobile-detail-overlay { display: none !important; }

    #sales-list > .table-responsive { display: block !important; }
}