/* Reset global para evitar problemas de desbordamiento */
* {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* RETROACTIVE MODE STYLES */
/* -------------------------------------------------------------------------- */
.retroactive-active-border {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3) !important;
    position: relative;
}

.retroactive-active-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px dashed #f59e0b;
    opacity: 0.5;
    border-radius: inherit;
    z-index: 10;
}

/* ... existing styles ... */

/* CARTA PRINT STYLES */
#carta-print {
    display: none;
}

/* ESTILOS DE LA FACTURA (Visibles en pantalla para PDF y en Impresión) */
body.print-carta #carta-print {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 215.9mm;
    max-width: 95vw;
    height: 92vh;
    display: block !important;
    background: white;
    color: black;
    padding: 15mm;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    z-index: 9999999 !important;
    /* Por encima de todo, incluyendo otros modales */
    overflow-y: auto !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.8), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Sombra que actúa como overlay y sombra de caja */
    border-radius: 12px;
}

/* Clase auxiliar para generación de PDF (fuera de pantalla o clonado) */
.carta-print-visible {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 215.9mm !important;
    min-height: 279.4mm !important;
    background: white !important;
    color: black !important;
    padding: 10mm !important;
    display: block !important;
    z-index: -1 !important;
}

/* Ocultar el scroll del body cuando está la factura encima */
body.print-carta {
    overflow: hidden !important;
}

.carta-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 6px;
}

.carta-logo {
    width: 30%;
}

.carta-logo img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

.carta-empresa {
    width: 40%;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
}

.carta-empresa h2 {
    margin: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #0f172a;
    margin-bottom: 1px;
}

.carta-datos {
    width: 25%;
    text-align: right;
}

.carta-box-factura {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 3px 6px;
    background: #f8fafc;
}

.carta-label {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- ESTILOS PARA PACIENTES Y SELECCIÓN MASIVA --- */
.patient-card:hover {
    border-color: var(--primary) !important;
    background-color: #f8fafc !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.paciente-checkbox {
    transition: transform 0.2s;
}

.paciente-checkbox:hover {
    transform: scale(1.2);
}

#bulk-pacientes-actions {
    animation: slideInDown 0.2s ease-out;
}

/* --- REFUERZO DE ESTILOS DE PACIENTES (CRÍTICO) --- */
.patient-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 100%;
    min-height: 200px;
    /* Asegurar altura mínima */
}

.patient-header {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.patient-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    border: 2px solid #bfdbfe;
    flex-shrink: 0;
}

.patient-body {
    padding: 18px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.patient-contact,
.patient-clinical {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.patient-footer {
    padding: 16px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* ---------------------------------------------------- */

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carta-valor {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.carta-valor.rojo {
    color: #ef4444;
    font-size: 1.2rem;
}

.carta-cliente-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    line-height: 1.3;
}

.carta-cliente-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.carta-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.carta-tabla th {
    background: #0f172a;
    color: white;
    padding: 3px 6px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.carta-tabla td {
    border-bottom: 1px solid #e2e8f0;
    padding: 3px 6px;
    color: #334155;
}

.carta-tabla td.num {
    text-align: right;
    font-feature-settings: "tnum";
}

.carta-tabla tr:nth-child(even) {
    background-color: #f8fafc;
}

.carta-footer-section {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    gap: 12px;
}

.carta-notas {
    width: 60%;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px;
    height: fit-content;
}

.carta-totales {
    width: 35%;
}

.carta-total-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1rem;
}

.carta-total-row.final {
    border-bottom: none;
    border-top: 2px solid #0f172a;
    margin-top: 3px;
    padding-top: 5px;
    font-weight: 800;
    font-size: 1.2rem;
    color: #0f172a;
}

.carta-firmas {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.carta-firma-box {
    flex: 1;
    border-top: 1px solid #94a3b8;
    padding-top: 3px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
    color: #64748b;
    transition: all 0.3s ease;
}

.carta-legal {
    margin-top: 8px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #94a3b8;
}

@media print {
    @page {
        size: auto;
        margin: 6mm;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    body.print-carta {
        overflow: visible !important;
        height: auto !important;
    }

    body.print-carta> :not(#carta-print) {
        display: none !important;
    }

    body.print-carta #carta-print {
        display: block !important;
        position: relative !important;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        margin: 0;
        padding: 4mm 6mm;
        box-sizing: border-box;
        overflow: visible;
        break-inside: avoid;
        break-after: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
    }

    body.print-carta #carta-print * {
        page-break-inside: avoid;
    }
}

/* POS UI IMPROVEMENTS */
.pos-card-factura {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--warning) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
}

.pos-card-mostrador {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--success) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
}

.pos-card-pago {
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--primary) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
}

.pos-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 11px 12px;
    font-size: 0.92rem;
    transition: all 0.2s ease !important;
    background: #ffffff;
    box-sizing: border-box !important;
}

.pos-input:focus {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}

.pos-header-label {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-label-factura {
    color: var(--warning);
}

.pos-label-mostrador {
    color: var(--success);
}

.pos-label-pago {
    color: var(--primary);
}

#view-venta .card:has(#switch-tipo-venta) {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    border-radius: 16px !important;
}

#view-venta .card:has(#switch-tipo-venta)>div:last-child {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

#view-venta .pos-input::placeholder {
    color: #94a3b8;
}

/* Buttons */
.btn-pos-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.9rem;
}

.btn-pos-primary {
    background: var(--primary);
    color: white;
}

.btn-pos-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-pos-outline {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-light);
}

.btn-pos-outline:hover {
    background: var(--bg);
    border-color: var(--text-light);
}

/* END POS UI IMPROVEMENTS */

/* ANIMACIONES PERSONALIZADAS MEJORADAS */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.cart-fly-item {
    position: fixed;
    z-index: 99999;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    /* removed backdrop-filter */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 15px rgba(14, 165, 233, 0.3);
    color: #0f172a;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
    white-space: nowrap;
}

.cart-fly-item .material-symbols-outlined {
    font-size: 1.5rem;
    color: #0ea5e9;
    filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.5));
}

.cart-fly-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-fly-qty {
    background: #0ea5e9;
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.4);
}

/* Trail effect particles */
.cart-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #0ea5e9;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    filter: blur(1px);
}

/* Impact particles */
.cart-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
}

.canasta-pulse {
    animation: premiumPulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes premiumPulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35) rotate(5deg);
    }

    70% {
        transform: scale(0.9) rotate(-3deg);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes cartRipple {
    from {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.6;
    }

    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* MODALES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

[class*="modal-overlay"],
[class*="hc-modal"],
.hc-modal-overlay,
.cot-modal-overlay,
.vendedores-modal-overlay,
.reportes-modal-overlay,
.inv-modal-overlay,
.prov-modal-overlay,
.cart-modal-overlay,
.nom-modal-overlay,
.rips-modal-overlay,
.fact-modal-overlay,
.premium-modal-overlay,
.st-modal-overlay {
    z-index: 1000000 !important;
}

.modal-overlay.modal-open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--card-bg);
    padding: 0;
    /* Padding handled by children */
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 600px;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-overlay.modal-open .modal-content {
    transform: scale(1);
}

/* HISTORIAL: barra + cajón unificado (cliente / factura) */
.historial-filterbar {
    margin-bottom: 10px;
}

/* HISTORIAL: versión compacta (más sutil) */
.filter-bar-modern.historial-filterbar {
    padding: 8px 12px;
    gap: 10px;
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
}

.historial-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 2px;
}

.historial-top-actions {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid rgba(203, 213, 225, 0.6);
    padding-top: 8px;
    flex-wrap: wrap;
}

.historial-summary-row {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid rgba(203, 213, 225, 0.6);
    padding-top: 8px;
    flex-wrap: wrap;
}

.historial-mini-card {
    flex: 1 1 170px;
    min-width: 170px;
    border: 1px solid rgba(203, 213, 225, 0.8);
    background: #f8fafc;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
}

.historial-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.historial-mini-label {
    font-weight: 900;
    font-size: 0.72rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.historial-mini-value {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historial-mini-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.historial-mini-btn {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .historial-filter-row {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
    }

    .historial-top-actions {
        justify-content: flex-end;
    }

    /* Filtros: año/mes más compactos */
    .historial-filterbar #filter-anio-historial,
    .historial-filterbar #filter-mes-historial {
        width: 90px !important;
        min-width: 90px !important;
    }

    /* Fechas: comparten fila 50%/50% */
    .historial-filterbar .input-modern-wrapper:has(#filter-fecha-inicio),
    .historial-filterbar .input-modern-wrapper:has(#filter-fecha-fin) {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }
    #filter-fecha-inicio,
    #filter-fecha-fin {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 14px !important;
    }

    /* Vendedor y búsqueda: ancho completo */
    .historial-filterbar .input-modern-wrapper:has(#filter-vendedor-historial),
    .historial-filterbar .input-modern-wrapper:has(#filter-busqueda-historial) {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Barra de resumen del día: pega debajo de la nav fija (64 px) */
    .dia-strip {
        top: 64px;
        z-index: 100;
    }

    /* Cabecera de cada venta-card: envuelve badges + tag de pago */
    .venta-card > div[style*="justify-content:space-between"][style*="margin-bottom:8px"] {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
}

@media (min-width: 1100px) {
    .historial-filterbar {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* En tablets/desktop medianos también debe mantenerse en una sola línea */
@media (min-width: 900px) {
    .historial-filterbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        gap: 10px;
    }
}

.historial-filterbar .input-modern,
.historial-filterbar .select-modern {
    min-height: 40px;
}

.historial-filterbar .input-modern {
    padding: 8px 10px 8px 36px;
    font-size: 0.9rem;
    border-radius: 10px;
}

.historial-filterbar .select-modern {
    padding: 8px 10px;
    font-size: 0.88rem;
    border-radius: 10px;
}

.historial-filterbar .input-icon {
    left: 10px;
    font-size: 1.05rem;
}

.historial-filterbar .ordenes-clear-filters-btn {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    gap: 6px;
    font-size: 0.88rem;
}

.historial-filterbar .ordenes-clear-filters-btn i {
    width: 1rem !important;
    height: 1rem !important;
}

/* HISTORIAL: evitar que Año/Mes se estiren y “amontonen” la fila */
.historial-filterbar .historial-ym-group {
    flex: 0 0 auto;
    min-width: 0;
}

.historial-filterbar #filter-anio-historial,
.historial-filterbar #filter-mes-historial {
    width: 110px;
    min-width: 110px;
    flex: 0 0 auto;
}


@media (max-width: 1200px) {

    .historial-filterbar #filter-anio-historial,
    .historial-filterbar #filter-mes-historial {
        width: 100px;
        min-width: 100px;
    }
}


.historial-clear-btn {
    white-space: nowrap;
}

.historial-filter-btn {
    background: var(--primary);
    color: white;
    border-color: transparent;
}

.historial-quickjump-panel {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    /* removed backdrop-filter */
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    margin-bottom: 14px;
}

.historial-quickjump-panel .hqj-row {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.historial-quickjump-panel .hqj-row:hover {
    background: rgba(241, 245, 249, 0.8);
}

.historial-quickjump-panel .hqj-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.historial-quickjump-panel .hqj-title {
    font-weight: 900;
    color: var(--text);
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-quickjump-panel .hqj-sub {
    font-size: 0.82rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.historial-quickjump-panel .hqj-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 900;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

/* HISTORIAL: selector de método de pago con logos (dropdown) */
.hist-pago-selector-wrap {
    position: relative;
    width: 150px;
    min-width: 150px;
    flex: 0 0 auto;
    z-index: 120;
}



.hist-pago-selector-btn {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    min-width: 150px;
    overflow: hidden;


    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.hist-pago-selector-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.hist-pago-selector-btn.is-open {
    border-color: var(--primary);
}

.hist-pago-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1rem;
}

.hist-pago-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.hist-pago-name {
    font-weight: 900;
    font-size: 0.72rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-pago-cat {
    font-size: 0.58rem;
    color: var(--text-light);
}

.hist-pago-arrow {
    font-size: 1.1rem;
    color: var(--text-light);
    flex-shrink: 0;
    margin-left: 4px;
}


#hist-pago-selector-panel {
    width: 420px;
    padding: 16px 14px;
    left: 0;
    top: calc(100% + 10px);
    bottom: auto;
    transform: none;
    z-index: 9999999;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
    background: white;
    border: 2px solid var(--primary);
    border-radius: 14px;
    position: absolute;
}

@media (max-width: 1024px) {
    #hist-pago-selector-panel {
        width: 350px;
        left: -20px;
        max-height: 320px;
        overflow-y: auto;
    }
}

/* MODIFICACIÓN PARA ESCÁNER MÓVIL */
#modal-scanner {
    z-index: 99999 !important;
    /* Encima de todo */
    background: rgba(0, 0, 0, 0.95) !important;
    /* Fondo casi negro para contraste */
}

#modal-scanner .modal-content {
    background: #1e293b;
    /* Color oscuro para el modal del scanner */
    width: 95%;
    max-width: 400px;
    /* Más angosto en móvil */
    margin: auto;
}


.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--danger);
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ANIMACIONES PARA NOTIFICACIONES */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(100px) scale(0.95);
    }
}

@keyframes progressBar {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}

:root {
    --primary: #0066cc;
    --primary-light: #dbeafe;
    --primary-dark: #0052a3;
    --secondary: #0099ff;
    --accent: #00b8ff;
    --bg: #f8fafc;
    /* Variables del editor visual del navbar */
    --brand-powered-size: 8px;
    --nav-tab-gap: 18px;
    --nav-tab-icon-size: 1.4rem;
    --nav-tab-text-size: 0.72rem;
    --nav-logo-size: 52px;
    --main-nav-min-height: 82px;
    /* Slate 50 */
    --text: #0f172a;
    /* Slate 900 */
    --text-light: #475569;
    /* Slate 600 */
    --card-bg: #ffffff;
    --border: #cbd5e1;
    /* Slate 300 */
    --success: #10b981;
    /* Emerald 500 */
    --warning: #f59e0b;
    /* Amber 500 */
    --danger: #ef4444;
    /* Red 500 */
    --danger-light: #fee2e2;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --radius: 12px;
    --font-main: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-title: 'Outfit', 'Montserrat', sans-serif;
}

[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-light: #1e3a8a;
    --primary-dark: #60a5fa;
    --secondary: #60a5fa;
    --accent: #818cf8;
    --bg: #0f172a;
    /* Slate 900 */
    --text: #f1f5f9;
    /* Slate 100 */
    --text-light: #94a3b8;
    /* Slate 400 */
    --card-bg: #1e293b;
    /* Slate 800 */
    --border: #334155;
    /* Slate 700 */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-light: #7f1d1d;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

h1,
h2,
h3,
h4,
h5,
h6,
.kpi-value,
.reports-title-info h2,
.drawer-section-label,
.nav-section span:not(.material-symbols-outlined),
.app-brand-title {
    font-family: var(--font-title) !important;
    letter-spacing: -0.025em !important;
    font-weight: 750 !important;
}

body,
input,
button,
select,
textarea,
table,
td,
th {
    font-family: var(--font-main) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    min-height: 100vh;
}

body.drawer-open {
    overflow: hidden;
    touch-action: none;
}

/* LAYOUT PRINCIPAL */
.app-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 8px 16px 16px 16px;
    width: 100%;
    box-sizing: border-box;
}

/* NAVEGACIÓN TABS */
/* NAVEGACIÓN TABS - PREMIUM REDESIGN */
.main-nav {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
    position: sticky;
    top: 0;
    z-index: 5000 !important;
    /* Sombra + glow inferior que separa la nav del contenido */
    box-shadow:
        0 4px 20px rgba(0, 80, 200, 0.25),
        0 1px 0 rgba(255,255,255,0.15),
        inset 0 -3px 0 rgba(255,255,255,0.18);
    padding: 8px 24px 8px 24px;
    display: flex;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--main-nav-min-height, 92px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 8px;
    /* Línea de acento inferior luminosa */
    border-bottom: 2px solid rgba(255,255,255,0.25);
}

[data-theme="dark"] .main-nav {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.nav-content {
    display: grid;
    grid-template-columns: 1fr minmax(min-content, max-content) 1fr;
    align-items: center;
    gap: 12px;
    min-width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
}

.brand {
    justify-self: start;
}

.nav-center {
    justify-self: center;
}

.nav-actions {
    justify-self: end;
}

/* Flechitas sutiles como indicadores de scroll */
.nav-scroll-indicator {
    position: absolute;
    top: calc(50% - 14px);
    font-size: 28px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.nav-scroll-left {
    left: 8px;
    transform: translateX(-5px);
}

.nav-scroll-right {
    right: 8px;
    transform: translateX(5px);
}

.main-nav.can-scroll-left .nav-scroll-left {
    opacity: 1;
    transform: translateX(0);
    animation: pulseLeft 2s ease-in-out infinite;
}

.main-nav.can-scroll-right .nav-scroll-right {
    opacity: 1;
    transform: translateX(0);
    animation: pulseRight 2s ease-in-out infinite;
}

@keyframes pulseLeft {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-5px);
        opacity: 0.9;
    }
}

@keyframes pulseRight {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(5px);
        opacity: 0.9;
    }
}

/* Columna: sello "powered by" arriba (fuera del cajón) + cajón con logo y nombre */
.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 800;
    color: white;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover {
    transform: scale(1.02);
}

/* Columna interna del brand: se adapta al contenido, con límites para logos anchos y cuadrados */
.brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-width: 80px;
    max-width: 280px;
    transition: max-width 0.3s ease;
    overflow: visible;
    justify-content: center;
}

.brand-powered {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--brand-powered-size, 8px);
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 1px;
}

.brand-powered img {
    height: 14px;
    width: 14px;
    border-radius: 4px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.brand-powered strong {
    color: #fff;
    font-weight: 900;
    letter-spacing: 1.6px;
}

/* Contenedor del logo: sin fondo blanco, solo centra la imagen */
.brand-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    overflow: visible;
    box-sizing: border-box;
}

.brand-logo-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Antes era 'all 0.4s', que animaba el transform/scale y hacía que el logo
       "creciera" al aplicar el zoom guardado. Solo animamos el filtro. */
    transition: filter 0.3s ease;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
    border-radius: 8px;
    padding: 0;
}

/* Estilos específicos para óptica principal (Tatiana) cuando no es custom-tenant */
body:not(.custom-tenant) .brand-logo-box {
    height: 65px;
}

body:not(.custom-tenant) .brand-logo-box img {
    max-height: 60px;
    max-width: 180px;
    padding: 0;
    border-radius: 10px;
}

body:not(.custom-tenant) .brand-inner {
    min-width: 100px;
    max-width: 320px;
    gap: 2px;
}

.brand:hover .brand-logo-box img {
    transform: rotate(-3deg) scale(1.1);
}

/* Nombre de la óptica bajo el logo */
.brand-name {
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
    max-width: 140px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
}

/* ── Posición del logo de la óptica ── */
body.nav-logo-center .nav-content {
    grid-template-columns: 1fr auto 1fr;
}
body.nav-logo-center .brand {
    justify-self: center;
}
body.nav-logo-right .brand {
    order: 3;
}
body.nav-logo-right .nav-actions {
    order: 1;
}

/* Legacy — usado en otros contextos fuera del navbar */
.brand-title {
    font-size: clamp(0.55rem, 1.8vw, 1rem);
    letter-spacing: -0.1px;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    white-space: normal;
    max-width: 140px;
    word-break: break-all;
    overflow-wrap: break-word;
    text-transform: uppercase;
}

/* Columna central: solo las pestañas, centradas verticalmente */
.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: visible;
    position: relative !important;
    z-index: 100 !important;
}
body.nav-style-classic .nav-center {
    justify-content: center !important;
    overflow: visible !important;
    align-self: stretch !important;
    scrollbar-width: none !important; /* Firefox */
    position: relative !important;
    z-index: 100 !important;
}

body.nav-style-classic .nav-center::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari/Edge */
}

@media (max-width: 768px) {
    .nav-center {
        overflow-x: auto;
    }
}

/*
  Rango "escritorio angosto" (celular con "Ver como escritorio" activado,
  tablets, ventanas de PC redimensionadas). Aquí el viewport reportado es
  > 768px (así que NO entra el layout móvil con hamburguesa) pero puede
  no ser lo bastante ancho para las pestañas + buscador del layout de
  escritorio clásico.

  La causa real medida (no solo teórica): .inline-search-pill tiene un
  width:260px fijo ("Always expanded") y .nav-actions es un track de
  grid (1fr) sin min-width:0, así que su ancho natural (buscador 260px +
  campana + chip de usuario, ~420px) no cabe cuando ya se gastó espacio
  en marca + pestañas — el grid NO lo encoge (min-width:auto por
  defecto en items de grid) y en vez de eso lo deja desbordar hacia la
  derecha. Ese desborde queda invisible porque body{overflow-x:hidden}
  (css/macos-fluid.css, sin media query) recorta cualquier cosa más
  ancha que el viewport, sin scroll posible. Resultado: buscador/avatar
  "cortados".

  El fix replica el mismo patrón que ya existe para móvil real (abajo,
  @media max-width:768px): dejar que .nav-actions y el buscador se
  encojan (min-width:0 + flex + max-width en vez de width fijo).

  Además, por si un grupo de pestañas se expande y no cabe, se habilita
  scroll horizontal real en .nav-center (antes tenía overflow:visible
  + .nav-section-items en "clip", que recorta sin poder desplazar).

  Nada de esto se activa en escritorio real (>1300px, donde todo cabe
  con espacio de sobra) ni en móvil real (≤768px, que usa el drawer
  hamburguesa y no muestra .nav-center/.nav-actions así).
*/
@media (min-width: 769px) and (max-width: 1300px) {
    /*
      El track central usaba minmax(min-content, max-content). Con
      etiquetas cortas y sin puntos de quiebre, min-content ≈ max-content
      (~750px aquí), así que ese track es efectivamente FIJO — el grid
      nunca lo encoge sin importar cuánto overflow:auto se le ponga a
      .nav-center (el min-content de la función del track no se ve
      afectado por el overflow de sus hijos). Cambiar el piso a 0 es lo
      que realmente habilita el encogimiento; overflow-x:auto en
      .nav-center ya deja ver el resto con scroll.
    */
    .nav-content {
        /* max-content como límite superior no sirve: los tracks NO
           flexibles se resuelven a su tamaño preferido ANTES que los
           1fr, así que "749px de pestañas" siempre gana la pelea por
           espacio contra nav-actions sin importar el piso del minmax.
           Usar 1fr real para el track central lo mete en la MISMA
           fase de reparto que los otros dos 1fr, así si no alcanza el
           espacio se encoge igual que ellos (y el overflow interno ya
           lo resuelve el overflow-x:auto de .nav-center). */
        grid-template-columns: 1fr minmax(0, 3fr) 1fr !important;
    }

    /* justify-self:end (regla base) hace que si el contenido de
       nav-actions no cabe en su celda, se desborde hacia la IZQUIERDA
       (se monta sobre las pestañas) en vez de respetar el ancho de la
       celda. Con stretch se acota de verdad y son sus hijos (buscador)
       los que se encogen. */
    .nav-actions {
        justify-self: stretch !important;
    }

    .nav-center,
    body.nav-style-classic .nav-center {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        justify-content: flex-start !important;
        /* Sin stretch, justify-self:center (regla base) deja que este
           elemento tome el ancho de su contenido y se salga de su
           celda del grid centrado — pisando visualmente a nav-actions.
           Con stretch, queda acotado al ancho real disponible y el
           overflow interno se resuelve con scroll, no con desborde. */
        justify-self: stretch !important;
        width: 100%;
        max-width: 100%;
    }

    .nav-section-items {
        overflow-x: visible !important;
    }

    /* .nav-items trae justify-content:center + margin:0 auto (pensado
       para cuando SÍ cabe todo). Si el contenido es más ancho que el
       contenedor y además se auto-centra, la porción que "sobra" a la
       izquierda queda recortada e inalcanzable con scroll (scrollLeft
       no puede ser negativo) — por eso la primera pestaña (Venta)
       desaparecía aunque el scroll estuviera "al principio". Con
       flex-start arranca siempre desde la primera pestaña real. */
    .nav-items {
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* Deja que nav-actions se encoja en vez de desbordar el grid */
    .nav-actions {
        min-width: 0 !important;
        flex-shrink: 1;
    }

    .inline-search-wrapper {
        flex: 0 1 auto;
        min-width: 44px !important;
        max-width: 220px !important;
    }

    .inline-search-pill {
        width: 100% !important;
        min-width: 44px !important;
    }

    /* El chip de usuario (avatar + nombre + rol + flecha) tiene un
       ancho natural de ~237px que por sí solo ya no cabe en el espacio
       que le queda a nav-actions junto al buscador y la campana —
       se salía por el borde derecho ("panel blanco y azul cortado").
       Se deja solo el avatar (compacto) y se oculta nombre/rol/flecha;
       el nombre completo sigue disponible al tocar el avatar. */
    #nav-user-chip {
        padding: 4px !important;
        gap: 0 !important;
    }

    #nav-user-chip > div:nth-child(2),
    #nav-user-arrow {
        display: none !important;
    }
}

.main-nav .powered-by {
    white-space: nowrap;
}

.main-nav .powered-by-label {
    white-space: nowrap;
}

.main-nav .powered-by-diotrisoft {
    letter-spacing: 2.4px;
}

[data-theme="dark"] .brand-title {
    background: none;
    -webkit-text-fill-color: initial;
    color: white;
}

.nav-items {
    display: flex;
    gap: var(--nav-tab-gap);
    min-width: 0;
    width: max-content;
    justify-content: center;
    align-items: stretch;
    padding-bottom: 6px;
    padding-top: 4px;
    perspective: 1000px;
    position: relative;
    z-index: 10;
    margin: 0 auto;
}

body.nav-style-classic .nav-items {
    align-self: center !important;
}

/* Selector de Óptica / Sede (interfaz principal) */
.app-optica-selector {
    margin-top: 6px;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

.app-optica-trigger {
    min-width: 220px;
    max-width: 48vw;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.96);
    font-weight: 800;
    font-size: 0.84rem;
    letter-spacing: 0.03em;
    padding: 6px 10px;
    cursor: pointer;
    text-transform: uppercase;
    /* removed backdrop-filter */
}

.app-optica-current-logo {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    padding: 2px;
    pointer-events: none;
}

.app-optica-caret {
    margin-left: auto;
    font-size: 0.86rem;
    opacity: 0.88;
    pointer-events: none;
}

.app-optica-panel {
    min-width: 240px;
    max-height: 280px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.26);
}

.app-optica-option {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    text-align: left;
    text-transform: uppercase;
}

.app-optica-option:hover {
    background: #eff6ff;
}

.app-optica-option-logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
    padding: 2px;
    border: 1px solid #dbeafe;
    pointer-events: none;
}

.app-optica-back button {
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .app-optica-trigger {
        min-width: 180px;
        font-size: 0.78rem;
    }
}


/* ============================================================
   SECCIONES DE NAVEGACIÓN — Glass containers con efectos premium
   ============================================================ */

/* Base: contenedor glass con borde visible */
.nav-section {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    position: relative;
    overflow: visible;
    /* Transición suave de todos los estados */
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: elevación + glow blanco */
.nav-section:hover {
    background: rgba(255, 255, 255, 0.17);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15),
        0 6px 22px rgba(0, 0, 0, 0.18),
        0 0 20px rgba(255,255,255,0.12) inset;
    transform: translateY(-1px);
}

/* Sección activa (tiene la tab activa dentro) */
.nav-section-collapsible.has-active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Expandida */
.nav-section-collapsible:not(.collapsed) {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.2),
        0 12px 36px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999 !important;
}

/* Colapsada: borde más tenue + pulse de invitación */
.nav-section-collapsible.collapsed {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    animation: navPillarBreath 3.5s ease-in-out infinite;
}
.nav-section-collapsible.has-active,
.nav-section-collapsible:not(.collapsed) {
    animation: none;
}
@keyframes navPillarBreath {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0);
        border-color: rgba(255,255,255,0.16);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.30);
    }
}

/* Al colapsar sin activo: redondear toggle y quitar borde separador interno */
.nav-section-collapsible.collapsed:not(.has-active) {
    border-color: rgba(255, 255, 255, 0.18);
}
.nav-section-collapsible.collapsed:not(.has-active) .nav-section-toggle {
    border-right: none !important;
    border-radius: 16px;
}


/* Sección con lógica de colapso */
.nav-section-collapsible {
    flex-direction: row;
    align-items: center;
}

/* Botón-label del grupo */
.nav-section-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    min-width: 52px;
    height: 100%;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 16px 0 0 16px;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.nav-section-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Flecha indicadora */
.nav-section-arrow {
    font-size: 0.85rem !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

/* Estado colapsado */
.nav-section-collapsible.collapsed .nav-section-arrow {
    transform: rotate(-90deg);
}

/*
  Contenedor de pestañas interno.
  overflow-x: clip es diferente a hidden: no crea scroll container
  y NO afecta el eje Y, por lo que el hover translateY de las tabs
  puede salir hacia arriba sin ser cortado.
*/
.nav-section-items {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    /* clip no crea scroll container → overflow-y queda visible */
    overflow-x: clip;
    overflow-y: visible;
    max-width: 1200px;
    min-width: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
    opacity: 1;
}


/* Colapsado SIN tab activa: ocultar todo */
.nav-section-collapsible.collapsed:not(.has-active) .nav-section-items {
    max-width: 0;
    min-width: 0;
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Colapsado CON tab activa: permitir que el contenedor fluya con el tamaño natural de la pestaña activa */
.nav-section-collapsible.collapsed.has-active .nav-section-items {
    max-width: 1200px;
    padding: 6px 8px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

/* Forzar ocultamiento absoluto de los tabs inactivos cuando la sección está colapsada */
.nav-section-collapsible.collapsed .nav-item:not(.active) {
    display: none !important;
}


/* nav-section base layout already defined above */

/* Sección con lógica de colapso */
.nav-section-collapsible {
    flex-direction: row;
    align-items: center;
}

/* Botón-label del grupo */
.nav-section-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    min-width: 52px;
    height: 100%;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 16px 0 0 16px;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.nav-section-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Flecha indicadora */
.nav-section-arrow {
    font-size: 0.85rem !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

/* Estado colapsado */
.nav-section-collapsible.collapsed .nav-section-arrow {
    transform: rotate(-90deg);
}

.nav-section-items {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    overflow-x: clip;
    overflow-y: visible;
    max-width: 1200px;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
    opacity: 1;
}

/* Cuando está colapsado */
.nav-section-collapsible.collapsed .nav-section-items {
    max-width: 0;
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Estado colapsado: ocultar border del grupo y redondear toggle */
.nav-section-collapsible.collapsed {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.nav-section-collapsible.collapsed .nav-section-toggle {
    border-right: none !important;
    border-radius: 16px;
}

/* Sección activa (tiene la tab activa dentro) - destacarla */
.nav-section-collapsible.has-active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Estado expandido: fondo semi-translúcido premium destacado */
.nav-section-collapsible:not(.collapsed) {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .nav-section-collapsible:not(.collapsed) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .nav-section {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-section-collapsible.has-active {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .nav-section-toggle {
    border-right-color: rgba(255, 255, 255, 0.07);
}

/* Animación dropdown menú usuario */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Variables de tema para el dropdown */
[data-theme="dark"] #nav-user-menu {
    --bg-card: #1e2340;
    --bg-secondary: rgba(255, 255, 255, 0.04);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --text-primary: #f0f0f8;
    --text-secondary: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.09);
}


/* Botones de acción — Glass pill premium */
.logout-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.95) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: visible;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.45);
    color: white !important;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.logout-btn:active {
    transform: translateY(0) scale(0.96);
}

[data-theme="dark"] .logout-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .logout-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    color: white !important;
}

.logout-btn .material-symbols-outlined {
    font-size: 1.35rem;
}

.nav-item {
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--nav-tab-text-size);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
    white-space: nowrap;
    min-width: 65px;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    transform-origin: center bottom;
    user-select: none;
}

.nav-item .material-symbols-outlined {
    font-size: var(--nav-tab-icon-size);
}

/* APPLE DOCK MAGNIFICATION EFFECT */
.nav-item:hover {
    color: var(--primary);
    /* Blue text on white hover card */
    background: rgba(255, 255, 255, 0.95);
    /* Bright white card */
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

[data-theme="dark"] .nav-item {
    color: #cbd5e1;
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Estado Activo Premium */
.nav-item.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-3px);
    font-weight: 800;
    border: none;
}
/* Punto indicador animado bajo el tab activo */
.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.5);
    animation: activeDot 2.5s ease-in-out infinite;
}
@keyframes activeDot {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateX(-50%) scale(0.7); }
}

[data-theme="dark"] .nav-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.nav-item .material-symbols-outlined {
    font-size: 1.25rem;
    /* Still smaller */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item:hover .material-symbols-outlined {
    transform: scale(1.1);
    /* Slight extra icon scale */
}

.nav-item.active .material-symbols-outlined {
    animation: bounceIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIcon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
    color: white;
    font-size: 0.62rem;
    font-weight: 900;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 16px rgba(225, 29, 72, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.16),
        0 0 0 1.5px rgba(255, 255, 255, 0.92);
    z-index: 20;
    border: 1px solid rgba(0, 0, 0, 0.08);
    pointer-events: none;
    /* Evita interferir con el click y asegura que se mantenga el cursor pointer del padre */
    transform: translateZ(0);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}

.nav-badge::before {
    content: "";
    position: absolute;
    inset: 2px 2px auto 2px;
    height: 46%;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    opacity: 0.55;
}

[data-theme="dark"] .nav-badge {
    box-shadow:
        0 8px 16px rgba(225, 29, 72, 0.16),
        0 3px 10px rgba(0, 0, 0, 0.45),
        0 0 0 1.5px rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: no-preference) {
    .nav-badge {
        animation: navBadgeBreath 3.2s ease-in-out infinite;
    }
}

@keyframes navBadgeBreath {
    0% {
        transform: translateZ(0) scale(1);
        filter: saturate(1);
    }

    50% {
        transform: translateZ(0) scale(1.03);
        filter: saturate(1.05);
    }

    100% {
        transform: translateZ(0) scale(1);
        filter: saturate(1);
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.user-badge {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-badge .material-symbols-outlined {
    font-size: 1.3rem;
}

.logout-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.logout-btn .material-symbols-outlined {
    font-size: 1.3rem;
}

.view-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 1100px) {
    .logout-btn span:not(.material-symbols-outlined) {
        display: none;
    }

    .user-badge span:not(.material-symbols-outlined) {
        display: none;
    }

    .logout-btn {
        padding: 8px;
        min-width: auto;
    }
}

.text-link-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.text-link-btn:hover {
    background: rgba(0, 102, 204, 0.08);
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #64748b;
    font-size: 0.85rem;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
}

.stat-accent-primary {
    border-left: 4px solid var(--primary);
}

.stat-accent-indigo {
    border-left: 4px solid var(--accent);
}

.stat-accent-success {
    border-left: 4px solid var(--success);
}

.stat-accent-warning {
    border-left: 4px solid var(--warning);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.quick-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.quick-icon {
    color: var(--primary);
}

.sedes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 12px;
    padding: 8px 4px;
}

.sede-card {
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sede-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -8px var(--primary-light), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--primary);
}

.sede-card.active {
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(255,255,255,0.95) 100%);
    border-color: var(--primary);
    box-shadow: 0 10px 25px -8px var(--primary-light);
}

.sede-card.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}

.sede-card-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.sede-card:hover .sede-card-logo {
    transform: scale(1.05);
    border-color: var(--primary-light);
}

.sede-card-name {
    font-weight: 800;
    color: #1e293b;
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 0.3px;
    flex: 1;
}

.sede-card-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.6rem;
    background: #10b981;
    color: #fff;
    padding: 2px 6px;
    border-radius: 99px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.sede-card-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px var(--primary-light);
    margin-left: auto;
}

.sede-card-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px var(--primary-light);
}

.sede-card-btn.active-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    cursor: default;
    box-shadow: none;
    margin-left: auto;
}

.sede-card-btn.active-btn:hover {
    transform: none;
    box-shadow: none;
    opacity: 1;
}

.promo-banner {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.promo-title {
    font-size: 1.2rem;
    font-weight: 800;
}

.promo-sub {
    font-size: 0.9rem;
    opacity: 0.9;
}

.section-subtitle {
    text-align: center;
    color: #64748b;
    margin: 30px 0 16px 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-accent-primary {
    border-left: 3px solid var(--primary);
}

.card-accent-indigo {
    border-left: 3px solid var(--accent);
}

.card-accent-success {
    border-left: 3px solid var(--success);
}

.card-soft {
    background: var(--card-bg);
    border: 1px solid var(--border);
}

.filter-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--card-bg);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--border);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-warning {
    background: var(--warning);
    color: white;
}

/* VISTAS */
.tab-view {
    display: none !important;
    animation: fadeTab 0.15s ease-out;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 16px 20px 16px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

@keyframes fadeTab {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-view.active {
    display: block !important;
}

@media (min-width: 1801px) {

    .app-container,
    .tab-view {
        max-width: none;
    }

    #software-info-footer {
        max-width: none !important;
    }
}

#view-historial {
    margin-top: -110px;
    padding-top: 110px;
}

body.custom-tenant #view-historial {
    margin-top: -94px;
    padding-top: 94px;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HEADER */
.header-info {
    text-align: center;
    padding: 24px 20px;
    background: var(--card-bg);
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.logo-img {
    max-width: 260px;
    max-height: 120px;
    width: auto;
    height: auto;
    margin-bottom: 8px;
    padding: 0;
    background: transparent;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
    transition: transform 0.3s ease;
    cursor: pointer;
    object-fit: contain;
}

.logo-img:hover {
    transform: scale(1.05);
}

.header-title {
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    display: none;
}

/* IMPRESIÓN */
#ticket-print,
#hc-print,
#orden-print {
    display: none;
}

@media print {
    .no-print {
        display: none !important;
    }

    body.print-ticket * {
        visibility: hidden;
    }

    body.print-ticket #ticket-print,
    body.print-ticket #ticket-print * {
        visibility: visible;
    }

    body.print-ticket #ticket-print {
        position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 80mm;
        max-width: 80mm;
        display: block;
        font-family: 'Courier New', monospace;
        text-align: center;
        color: black;
        font-size: 11pt !important;
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
        page-break-after: avoid;
        page-break-inside: avoid;
        page-break-before: avoid;
    }

    .ticket-logo {
        max-width: 35mm;
        max-height: 24mm;
        filter: grayscale(100%);
        display: block;
        margin: 0 auto 3mm;
        object-fit: contain;
    }

    .ticket-header {
        font-weight: bold;
        font-size: 12pt !important;
        margin-bottom: 3mm;
        line-height: 1.4;
    }

    .ticket-nit {
        font-size: 10pt !important;
        margin-bottom: 3mm;
        font-weight: normal;
    }

    .ticket-factura-num {
        font-size: 14pt !important;
        font-weight: bold;
        border: 2px solid #000;
        padding: 2mm;
        margin: 3mm 0;
        display: inline-block;
    }

    .ticket-divider {
        border-top: 1px dashed #000;
        margin: 2mm 0;
    }

    .ticket-body {
        margin: 3mm 0;
        text-align: left;
        font-size: 10pt !important;
    }

    .ticket-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1mm;
        width: 100%;
        font-size: 10pt !important;
    }

    .ticket-row span:last-child {
        text-align: right;
        flex-shrink: 0;
        margin-left: 3mm;
    }

    .ticket-bold {
        font-weight: bold;
        word-break: break-word;
        margin: 2mm 0;
        font-size: 11pt !important;
    }

    .ticket-big {
        font-size: 13pt !important;
        font-weight: bold;
        margin-top: 3mm;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
        padding: 2mm 0;
    }

    .ticket-footer {
        font-weight: bold;
        margin-top: 4mm;
        font-size: 10pt !important;
    }

    body.print-hc * {
        visibility: hidden;
    }

    body.print-hc #hc-print,
    body.print-hc #hc-print * {
        visibility: visible;
    }

    body.print-hc #hc-print {
        position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 8.5in;
        min-height: 5.5in;
        max-width: 100%;
        background: white;
        color: black;
        padding: 12mm;
        box-sizing: border-box;
        display: block;
    }

    body.print-orden * {
        visibility: hidden;
    }

    body.print-orden #orden-print,
    body.print-orden #orden-print * {
        visibility: visible;
    }

    body.print-orden #orden-print {
        position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 8.5in;
        max-width: 100%;
        background: white;
        color: black;
        padding: 12mm;
        box-sizing: border-box;
        display: block;
    }
}

@page {
    margin: 0;
}

/* CARDS & CONTAINERS */
.card {
    background: var(--card-bg);
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
    border-color: var(--primary-light);
}

/* Selector de Modo dentro de Venta */
.mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.mode-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mode-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.mode-card.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.mode-card.active-job {
    border-color: #6f42c1;
    background: #f3e8ff;
    color: #6f42c1;
}

.mode-icon {
    font-size: 2rem;
}

.mode-title {
    font-weight: 700;
    font-size: 1.1rem;
}

/* FORMS */
.form-group {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.patient-form-card {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.patient-form-grid input,
.patient-form-grid select {
    padding: 8px 12px;
    font-size: 0.9rem;
    height: 38px;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    width: 100%;
    transition: all 0.2s;
}

.patient-form-grid input:focus,
.patient-form-grid select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
    outline: none;
}

.patient-form-grid textarea {
    padding: 8px;
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    min-height: 50px !important;
}

.patient-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.patient-form-title {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.patient-form-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 10px;
    padding: 8px;
    line-height: 1;
}

.patient-form-title h4 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.patient-form-subtitle {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 0.82rem;
    font-weight: 600;
}

.patient-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.patient-form-grid .col-12 {
    grid-column: span 12;
}

.patient-form-grid .col-8 {
    grid-column: span 8;
}

.patient-form-grid .col-6 {
    grid-column: span 6;
}

.patient-form-grid .col-5 {
    grid-column: span 5;
}

.patient-form-grid .col-4 {
    grid-column: span 4;
}

.patient-form-grid .col-3 {
    grid-column: span 3;
}

.patient-form-grid .col-2 {
    grid-column: span 2;
}

.patient-field label {
    display: block;
    margin: 0 0 2px 2px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.patient-field .patient-hint {
    margin-top: 2px;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.patient-inline-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.patient-inline-actions>*:first-child {
    flex: 1;
}

.patient-field.relative,
.suggest-container {
    position: relative;
    z-index: 500;
}

.patient-suggest,
.pos-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
    z-index: 600;
    max-height: 250px;
    overflow-y: auto;
}


@media (max-width: 820px) {

    .patient-form-grid .col-8,
    .patient-form-grid .col-6,
    .patient-form-grid .col-5,
    .patient-form-grid .col-4,
    .patient-form-grid .col-3,
    .patient-form-grid .col-2 {
        grid-column: span 12;
    }
}

.patient-form-section-title {
    grid-column: span 12;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 6px 0 2px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    display: flex;
    align-items: center;
    gap: 4px;
}

.patient-form-section-title span.material-symbols-outlined {
    font-size: 1rem;
    font-variation-settings: 'FILL' 1;
}

.patient-form-section-title:first-of-type {
    margin-top: 0;
}

.form-section {
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px;
    background: linear-gradient(135deg, #f5f7fb 0%, #f0f3f8 100%);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.form-section h4,
.form-section div {
    color: var(--primary-dark);
    font-weight: 600;
}

.hidden-section {
    display: none;
}

select,
input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    outline: none;
    background: var(--card-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    color: var(--text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

select:focus,
input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
    transform: translateY(-1px);
}

input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

/* BOTONES */
button {
    font-family: inherit;
}

.add-btn {
    width: 100%;
    padding: 14px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
    position: relative;
    overflow: hidden;
}

.add-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.add-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.3);
}

.add-btn:hover::before {
    width: 300px;
    height: 300px;
}

.add-btn:active {
    transform: translateY(-1px);
}

.add-btn.job-btn {
    background: var(--accent);
}

.btn-icon {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-add {
    background: var(--success);
    color: white;
}

.btn-trash {
    background: #fee2e2;
    color: var(--danger);
}

.btn-manual {
    background: var(--primary-light);
    color: var(--primary);
}

.btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    filter: brightness(0.95);
}

.btn-shortcut {
    padding: 8px 12px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-shortcut:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.shortcuts-container {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

#view-venta #card-trabajo .factura-row {
    margin-bottom: 10px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.04));
    border-color: rgba(59, 130, 246, 0.22);
}

#view-venta #num-factura {
    background: white;
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--text);
}

.btn-ai-assistant {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%);
    color: white;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.35);
    overflow: hidden;
    white-space: nowrap;
}

.btn-ai-assistant::after {
    content: '';
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.22) 52%, transparent 60%);
    transform: translateX(-45%) rotate(12deg);
    animation: aiButtonShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

.btn-ai-assistant:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 14px 28px rgba(99, 102, 241, 0.42);
    filter: saturate(1.05);
}

.btn-ai-assistant:active {
    transform: translateY(0) scale(0.99);
}

.btn-ai-assistant:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22), 0 14px 28px rgba(99, 102, 241, 0.42);
}

.btn-ai-assistant-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.btn-ai-assistant-text {
    line-height: 1;
}

.btn-ai-assistant-badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1;
}

@keyframes aiButtonShine {
    0% {
        transform: translateX(-55%) rotate(12deg);
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    50% {
        transform: translateX(35%) rotate(12deg);
        opacity: 0;
    }

    100% {
        transform: translateX(35%) rotate(12deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-ai-assistant::after {
        animation: none;
    }
}

#pago-selector-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.9) transparent;
    overscroll-behavior: contain;
}

#pago-selector-panel::-webkit-scrollbar {
    width: 10px;
}

#pago-selector-panel::-webkit-scrollbar-track {
    background: transparent;
}

#pago-selector-panel::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.75);
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.45);
}

#pago-selector-panel::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(255, 255, 255, 0.92);
    border-left: 2px solid var(--primary);
    border-top: 2px solid var(--primary);
    border-radius: 4px;
}

#pago-selector-panel .pago-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

@media (max-width: 560px) {
    #pago-selector-panel .pago-grid {
        grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
    }
}

@media (max-width: 340px) {
    #pago-selector-panel .pago-grid {
        grid-template-columns: 1fr !important;
    }
}

#pago-selector-panel .pago-option {
    text-align: center !important;
    border-radius: 12px !important;
}

/* TABLAS Y LISTAS */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    text-align: left;
    padding: 12px 16px;
    background: var(--bg);
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text);
}

tr:hover td {
    background: var(--bg);
}

tr:last-child td {
    border-bottom: none;
}

#view-inventario table {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

#view-inventario thead tr {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(168, 85, 247, 0.12)) !important;
    color: var(--text) !important;
}

#view-inventario th {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
}

#view-inventario td {
    vertical-align: middle;
}

#view-inventario tbody tr.inv-row td {
    transition: background 0.18s ease, transform 0.18s ease;
}

#view-inventario tbody tr.inv-row:hover td {
    background: var(--bg);
}

#view-inventario tbody tr.inv-row--disponible td:first-child {
    box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.55);
}

#view-inventario tbody tr.inv-row--bajo td:first-child {
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.65);
}

#view-inventario tbody tr.inv-row--critico td:first-child {
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.9);
}

#view-inventario tbody tr.inv-row--exceso td:first-child {
    box-shadow: inset 4px 0 0 rgba(59, 130, 246, 0.7);
}

#view-inventario tbody tr.inv-row--bajo td {
    background: rgba(245, 158, 11, 0.06);
}

#view-inventario tbody tr.inv-row--critico td {
    background: rgba(245, 158, 11, 0.1);
}

#view-inventario tbody tr.inv-row--exceso td {
    background: rgba(59, 130, 246, 0.06);
}

.inv-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    object-fit: cover;
    display: block;
}

.inv-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.inv-img--placeholder .inv-ico {
    width: 22px;
    height: 22px;
}

.inv-name {
    font-weight: 800;
    letter-spacing: -0.2px;
}

.inv-meta {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 600;
}

.inv-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.inv-stock {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 900;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.inv-stock-num {
    font-feature-settings: "tnum";
}

.inv-stock-label {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
}

.inv-stock--disponible {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
}

.inv-stock--bajo {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.inv-stock--critico {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
    color: #7c2d12;
}

.inv-stock--exceso {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1d4ed8;
}

.inv-provider {
    color: var(--text);
    font-weight: 700;
}

.inv-price {
    color: var(--text);
    font-weight: 900;
}

.inv-actions {
    display: inline-flex;
    gap: 8px;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.inv-ico {
    width: 20px;
    height: 20px;
    display: inline-block;
    color: currentColor;
}

.inv-title-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    margin-right: 8px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
}

.inv-title-ico .inv-ico {
    width: 20px;
    height: 20px;
}

.inv-select {
    position: relative;
    min-width: 190px;
}

.inv-select-btn {
    width: 100%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    color: var(--text);
}

.inv-select-btn:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.inv-select-leading {
    color: var(--primary);
    display: inline-flex;
    align-items: center;
}

.inv-select-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-select-caret {
    color: var(--text-light);
    transition: transform 0.12s ease;
    display: inline-flex;
    align-items: center;
}

.inv-select.open .inv-select-caret {
    transform: rotate(180deg);
}

.inv-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5000;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
    padding: 8px;
    display: none;
}

.inv-select.open .inv-select-menu {
    display: block;
}

.inv-select-item {
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 12px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text);
    font-weight: 800;
    font-size: 0.88rem;
    transition: background 0.12s ease, transform 0.12s ease;
    text-align: left;
}

.inv-select-item .inv-ico {
    color: var(--text-light);
}

.inv-select-item:hover {
    background: var(--bg);
    transform: translateY(-1px);
}

.tag-base {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag-efectivo {
    background: linear-gradient(135deg, #dcfce7 0%, #c6f6d5 100%);
    color: #15803d;
}

.tag-transferencia {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0c4a6e;
}

.tag-credito {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #6b21a8;
}

.venta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* Tira de resumen compacta — métodos de pago + KPIs */
.dia-strip {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    gap: 8px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
    position: sticky;
    top: 0;
    z-index: 20;
}
.dia-strip-pagos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    align-items: center;
}
.dia-strip-sep {
    width: 1px;
    height: 36px;
    background: #e2e8f0;
    flex-shrink: 0;
    margin: 0 8px;
}
.dia-strip-kpis {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-shrink: 0;
}
.dia-kpi {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 1px;
}
.dia-kpi > span {
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.dia-kpi > strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
}
@media (max-width: 700px) {
    .dia-strip { flex-direction: column; align-items: flex-start; }
    .dia-strip-sep { width: 100%; height: 1px; margin: 4px 0; }
    .dia-strip-kpis { gap: 12px; }
}

/* Dos secciones explícitas: ventas del día | cobros de cartera */
.dia-cols {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}

/* Ventas del día: auto-fill para más tarjetas por fila */
.dia-col-ventas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

/* Cobros de cartera: siempre una sola columna */
.dia-col-cartera {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Encabezado de sección ocupa toda la fila en auto-fill */
.dia-col-ventas > div[style*="grid-column"] {
    grid-column: 1 / -1;
}

.dia-col-empty {
    grid-column: 1 / -1;
    padding: 24px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: .82rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #e2e8f0;
}
/* Barra de cuadre de efectivo */
.dia-cuadre-ef {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.dia-cuadre-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
    white-space: nowrap;
}
.dia-cuadre-eq {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.dia-cuadre-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.dia-cuadre-item > span {
    font-size: .58rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}
.dia-cuadre-item > strong {
    font-size: .82rem;
    font-weight: 700;
    color: #0f172a;
}
.dia-cuadre-result {
    border-radius: 6px;
    padding: 3px 10px;
    border: 1px solid;
}
.dia-cuadre-result > strong {
    font-size: .88rem !important;
    font-weight: 800 !important;
}
.dia-cuadre-op {
    font-size: .85rem;
    font-weight: 800;
    color: #cbd5e1;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .dia-top-panels { grid-template-columns: 1fr; }
    .dia-cols { grid-template-columns: 1fr; }
    .dia-col-ventas { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .venta-grid {
        grid-template-columns: 1fr;
    }
}

.venta-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.venta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light);
}

.venta-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.venta-desc {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.venta-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    gap: 8px;
}

.venta-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* FACTURA BOX */
.factura-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.factura-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

#num-factura {
    width: 120px;
    text-align: center;
    font-weight: 800;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 1.05rem;
    letter-spacing: 2px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

/* CALENDARIO */
.mes-titulo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    margin: 32px 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mes-titulo::before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
}

.grid-dias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* ==========================================
// ESTILOS PARA MESES COLAPSABLES EN HISTORIAL
// ========================================== */

.mes-seccion-wrapper {
    margin-bottom: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mes-seccion-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
    user-select: none;
}

.mes-seccion-header:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.mes-icon-collapse {
    font-size: 24px;
    color: #64748b;
    margin-right: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mes-seccion-header .mes-titulo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: capitalize;
}

.mes-seccion-content {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
}

.card-dia {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
    position: relative;
}

.card-dia:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.dia-fecha-card {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.dia-total-card {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
    background: var(--primary-light);
    padding: 8px;
    border-radius: 8px;
    letter-spacing: 1px;
}

/* MODALES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* removed backdrop-filter */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    overscroll-behavior: contain;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.modal-overlay.modal-open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--card-bg);
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    border-radius: 20px;
    padding: 32px;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 102, 204, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.modal-open .modal-content {
    transform: scale(1);
}

/* Modal de comisiones - ancho mayor para pantallas grandes */
#modal-comisiones .modal-content {
    max-width: 1700px !important;
    width: 98vw !important;
    max-height: 95vh !important;
}

#modal-temas .modal-content {
    max-width: 620px;
    padding: 22px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.theme-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-align: left;
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.theme-card.theme-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light), var(--shadow);
}

.theme-swatches {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.theme-name {
    font-weight: 800;
    color: var(--text);
    font-size: 0.95rem;
}

.theme-desc {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 4px;
}

#modal-exito-venta .modal-content {
    max-width: 480px !important;
    padding: 0 !important;
    border-radius: 28px;
    border: none;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.4);
    background: #fff;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#modal-exito-venta.modal-open .modal-content {
    animation: modalExitoIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Contenedor premium del modal */
.modal-exito-premium {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Header con gradiente */
.modal-exito-header {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    padding: 20px 24px 20px;
    text-align: center;
    position: relative;
    overflow: visible;
    /* Allow sparkles to breathe */
    z-index: 10;
}

.modal-exito-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
    opacity: 0.3;
    animation: patternMove 20s linear infinite;
    z-index: -1;
}

@keyframes patternMove {
    from {
        transform: translateX(0) translateY(0);
    }

    to {
        transform: translateX(100px) translateY(100px);
    }
}

/* Icono contenedor */
.modal-exito-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
    z-index: 5;
}

.modal-exito-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    /* removed backdrop-filter */
    border: 3px solid rgba(255, 255, 255, 0.5);
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Sparkles alrededor del icono */
.modal-exito-sparkles {
    position: absolute;
    inset: -10px;
    pointer-events: none;
}

.modal-exito-sparkles span {
    position: absolute;
    font-size: 1.2rem;
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: var(--delay);
}

.modal-exito-sparkles span:nth-child(1) {
    top: 0;
    left: 20%;
}

.modal-exito-sparkles span:nth-child(2) {
    top: 10%;
    right: 15%;
}

.modal-exito-sparkles span:nth-child(3) {
    bottom: 0;
    left: 50%;
}

@keyframes sparkleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}

/* Títulos */
.modal-exito-title {
    margin: 0 0 2px 0;
    color: white;
    font-size: 1.3rem;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 5;
    line-height: 1.2;
}

.modal-exito-subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    z-index: 5;
}

/* Timer */
.modal-exito-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    /* removed backdrop-filter */
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 12px;
    border-radius: 999px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-exito-timer strong {
    font-size: 1.1rem;
}

/* Progress bar */
.modal-exito-progress {
    height: 4px;
    background: rgba(16, 185, 129, 0.15);
    overflow: hidden;
    margin: 0;
}

#modal-exito-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    transform-origin: left center;
    transition: width 0.1s linear;
}

/* Body del modal */
.modal-exito-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.modal-exito-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* Sección de acciones */
.action-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-label .material-symbols-outlined {
    font-size: 1.1rem;
    color: #94a3b8;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 420px),
(max-height: 720px) {
    #modal-exito-venta .modal-content {
        border-radius: 20px;
        max-height: 92vh;
    }

    .modal-exito-header {
        padding: 18px 16px 18px;
    }

    .modal-exito-icon {
        width: 64px;
        height: 64px;
    }

    .modal-exito-title {
        font-size: 1.25rem;
    }

    .modal-exito-subtitle {
        font-size: 0.85rem;
    }

    .modal-exito-timer {
        margin-top: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .modal-exito-body {
        padding: 16px;
    }

    .modal-exito-actions {
        gap: 14px;
        margin-bottom: 14px;
    }

    .action-section {
        gap: 10px;
    }

    .action-buttons {
        gap: 10px;
    }

    .btn-action {
        padding: 12px 10px;
        border-radius: 14px;
        gap: 6px;
    }

    .btn-action .material-symbols-outlined {
        font-size: 1.7rem;
    }

    .btn-title {
        font-size: 0.82rem;
    }

    .btn-desc {
        font-size: 0.65rem;
    }

    .btn-action-accent {
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 14px;
    }

    .btn-action-accent .material-symbols-outlined {
        font-size: 1.9rem !important;
    }

    .btn-action-close {
        padding: 12px;
        border-radius: 14px;
    }
}

/* Botones de acción modernos */
.btn-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-action:hover::before {
    opacity: 1;
}

.btn-action .material-symbols-outlined {
    font-size: 1.7rem;
    transition: transform 0.3s;
}

.btn-action:hover .material-symbols-outlined {
    transform: scale(1.1);
}

.btn-text {
    text-align: center;
}

.btn-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.btn-desc {
    font-size: 0.7rem;
    opacity: 0.8;
    font-weight: 500;
}

/* Variantes de botones */
.btn-action-primary {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: white;
    box-shadow: 0 2px 8px rgba(51, 65, 85, 0.3);
}

.btn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(51, 65, 85, 0.4);
}

.btn-action-success {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-action-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.btn-action-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.btn-action-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.btn-action-accent {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    color: #4f46e5;
    border: 2px solid #c4b5fd !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    gap: 12px !important;
}

.btn-action-accent .material-symbols-outlined {
    font-size: 1.9rem !important;
    color: #6366f1;
}

.btn-action-accent:hover {
    background: #ede9fe;
    border-color: #8b5cf6 !important;
    transform: translateY(-2px);
}

.btn-action-close {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action-close:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

@keyframes modalExitoIn {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.btn-close-modal {
    background: var(--primary-light);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
}

.btn-close-modal:hover {
    background: var(--primary);
    color: white;
    transform: rotate(90deg);
}

.btn-mini {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    margin-left: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
    font-size: 1rem;
}

.btn-mini.btn-wa {
    border-radius: 999px;
}

.wa-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.btn-mini:hover {
    background: #e2e8f0;
}

.private-total-container {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: white;
    padding: 32px;
    border-radius: 20px;
    text-align: center;
    margin-top: 40px;
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(0, 102, 204, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.private-total-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s infinite;
}

.private-total-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 102, 204, 0.4);
}

@keyframes shimmer {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, 20px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* LOGIN - STUNNING TWO-COLUMN CLINICAL PLATFORM */
#login-screen {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: radial-gradient(circle at 10% 20%, rgba(239, 246, 255, 0.7) 0%, rgba(255, 255, 255, 1) 100%) !important;
    font-family: var(--font-main);
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

/* Cuando el login-screen esté visible (controlado por JS), aplicar flex */
#login-screen[style*="display: flex"],
#login-screen[style*="display:flex"] {
    display: flex !important;
}

.login-container {
    width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (min-width: 992px) {
    /* The same hero image is used twice: as a soft full-bleed backdrop
       behind everything (so its wave pattern continues under/around the
       floating card, no hard seam), and as the crisp, never-cropped
       graphic in its own panel on the left (same sizing that already
       proved zero-crop/zero-gap: min(60vw, 100vh) = a perfect square
       matching the source image). The login card floats over both, offset
       from the screen edge with real margin, like a raised panel. */
    .login-container {
        display: flex !important;
        position: relative !important;
        height: 100vh !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: clamp(40px, 6vw, 120px) !important;
        box-sizing: border-box !important;
        background-image: url('img/imagen login.png') !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    #login-screen .login-hero-panel {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: min(60vw, 100vh) !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    #login-screen .login-box {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 !important;
        border-radius: 28px !important;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
        padding: 40px 36px !important;
    }

    #login-screen #login-form-content {
        width: 100% !important;
        max-width: 440px !important;
    }
}

/* HERO LEFT PANEL styling — full-bleed at any window size (maximized or
   not), zero letterbox bars of any color. object-position is anchored to
   the top so the logo/robot head (the recognizable part) never gets cut;
   only the less critical footer strip can lose a sliver on very short
   windows, which is far less noticeable than a bar or a cropped head. */
.login-hero-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: #0b1c3f !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.hero-login-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
    display: block !important;
    user-select: none !important;
    pointer-events: none !important; /* prevent drag */
}

/* On mobile/tablet: show the hero image as a full-bleed rounded banner that
   fills its space (no letterboxing), with the login card floating over it
   for a modern app-like feel, instead of hiding the image entirely. */
@media (max-width: 991px) {
    .login-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    #login-screen .login-hero-panel {
        position: relative !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        height: 36vh !important;
        min-height: 210px !important;
        max-height: 320px !important;
        padding: 0 !important;
        border-radius: 0 0 32px 32px !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16) !important;
        z-index: 1 !important;
    }

    #login-screen .login-hero-panel::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(4, 12, 33, 0) 55%, rgba(255, 255, 255, 0.96) 100%) !important;
        pointer-events: none !important;
    }

    #login-screen .hero-login-img {
        object-fit: cover !important;
        object-position: 50% 15% !important;
        border-radius: 0 0 32px 32px !important;
    }

    #login-screen .login-box {
        position: relative !important;
        z-index: 2 !important;
        margin: -32px auto 24px auto !important;
        border-radius: 28px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16) !important;
    }
}

@media (max-width: 480px) {
    #login-screen .login-hero-panel {
        height: 30vh !important;
        min-height: 180px !important;
        max-height: 240px !important;
    }

    #login-screen .login-box {
        margin: -26px auto 20px auto !important;
        border-radius: 24px !important;
    }
}

.hero-brand-header {
    max-width: 580px;
}

.hero-tag {
    display: inline-block;
    background: var(--primary-light, #eff6ff);
    color: var(--primary, #2563eb);
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-title) !important;
    font-size: 2.2rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.03em !important;
}

.hero-title span {
    color: var(--primary, #2563eb);
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.hero-subtitle {
    font-size: 0.98rem;
    line-height: 1.5;
    color: #475569;
    font-weight: 500;
}

/* Floating overlapping cards mimicking Facebook styling */
.hero-visual-container {
    position: relative;
    height: 270px;
    width: 100%;
}

.floating-card {
    position: absolute;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    animation: floatAnim 6s ease-in-out infinite;
}

/* Animations for premium float */
@keyframes floatAnim {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(0.5deg);
    }
}

.floating-card.card-glass {
    left: 10px;
    top: 10px;
    width: 280px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    z-index: 3;
}

.floating-card.card-glass .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-light, #eff6ff);
    color: var(--primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-card.card-glass .card-icon span {
    font-size: 1.4rem;
}

.floating-card.card-patient {
    left: 150px;
    top: 90px;
    width: 290px;
    z-index: 2;
    animation-delay: 2s;
    background: #ffffff;
}

.floating-card.card-patient .patient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.floating-card.card-patient .card-badge {
    background: #10b981;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 99px;
    margin-left: auto;
}

.floating-card.card-chart {
    left: 30px;
    top: 170px;
    width: 220px;
    z-index: 1;
    animation-delay: 4s;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
}

.floating-card.card-chart .card-header-icon {
    color: #06b6d4;
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.floating-card.card-chart .chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 40px;
    width: 100%;
    margin-bottom: 8px;
}

.floating-card.card-chart .chart-bars .bar {
    width: 12px;
    background: linear-gradient(to top, #06b6d4, #2563eb);
    border-radius: 4px 4px 0 0;
}

.floating-card.card-chart .chart-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #10b981;
    margin: 0;
}

.floating-card h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.floating-card p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* Premium Login Box Overrides */
.login-box {
    margin: auto !important;
    background: #ffffff !important;
    padding: 32px 30px !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 440px !important;
    box-sizing: border-box !important;
    animation: slideInUp 0.6s ease;
}

/* Premium Scoped Login Inputs and Select styles */
.login-box input[type="email"],
.login-box input[type="password"] {
    width: 100% !important;
    padding: 14px 16px 14px 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login-box input[type="email"]:focus,
.login-box input[type="password"]:focus {
    border-color: var(--primary, #2563eb) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08) !important;
}

.login-optica-select-wrap {
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login-optica-select-wrap:focus-within {
    border-color: var(--primary, #2563eb) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08) !important;
}

#login-optica-select {
    font-weight: 600 !important;
    color: #0f172a !important;
}

.login-box h2 {
    color: var(--primary);
    margin-top: 0;
    font-size: 1.75rem;
    margin-bottom: 4px;
}

.login-box p {
    color: #6b8bb5;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

.login-tenant-context {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--primary-light);
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
    margin: 6px 0 14px;
    user-select: none;
}

.login-tenant-context .material-symbols-outlined {
    font-size: 1.05rem;
    color: var(--primary);
}

.login-tenant-context strong {
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.login-optica-selector {
    width: 100%;
    text-align: left;
    margin: 0 0 12px;
}

.login-optica-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.login-optica-select-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.login-optica-select-wrap .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--primary);
}

#login-optica-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

#login-optica-select:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

#btn-login {
    width: 100% !important;
    padding: 16px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    cursor: pointer !important;
}

/* UTILS */
.abono-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f3e8ff 0%, #f0e6ff 100%);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    border: 2px solid #e9d5ff;
    box-shadow: 0 4px 8px rgba(111, 66, 193, 0.1);
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.slider {
    background: linear-gradient(135deg, #6f42c1 0%, #9966ff 100%);
}

input:checked+.slider:before {
    transform: translateX(22px);
}

#alerta-deuda {
    display: none;
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    border-left: none;
    margin-bottom: 12px;
    cursor: default;
    animation: none;
    box-shadow: none;
}

@keyframes debtBubbleIn {
    0% {
        opacity: 0;
        transform: translateY(-26px) scale(0.38);
    }

    35% {
        opacity: 1;
        transform: translateY(-8px) scale(1.12);
    }

    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.035);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes debtBubbleFloat {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes debtBubblePop {
    0% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(-1px) scale(1.06);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.debt-alert-premium {
    position: relative;
    overflow: visible;
    transform-origin: 44px 24px;
    animation: debtBubbleIn 560ms cubic-bezier(0.22, 1, 0.36, 1), debtBubbleFloat 3600ms ease-in-out 560ms infinite;
    will-change: transform, opacity;
}

.debt-alert-premium::after {
    content: none;
}

.debt-alert-premium.debt-alert-pop {
    animation: debtBubblePop 240ms cubic-bezier(0.2, 0, 0, 1), debtBubbleFloat 3600ms ease-in-out 560ms infinite;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 149, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0);
    }
}

/* ESTADO GUARDADO */
.success-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--success), #00d966);
    color: white;
    padding: 16px 24px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 179, 89, 0.3);
    animation: slideInRight 0.4s ease, slideOutRight 0.4s ease 3.6s;
    font-weight: 600;
    z-index: 30000;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* LOADING STATE */
.btn-loading {
    position: relative;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -100%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
}

@keyframes respiracion {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes cobraVida {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    15% {
        transform: scale(1.3) rotate(-10deg);
        filter: brightness(1.5);
    }

    30% {
        transform: scale(0.9) rotate(10deg);
        filter: brightness(1.8);
    }

    45% {
        transform: scale(1.4) rotate(-5deg);
        filter: brightness(2);
    }

    60% {
        transform: scale(0.95) rotate(5deg);
        filter: brightness(1.5);
    }

    75% {
        transform: scale(1.2) rotate(-3deg);
        filter: brightness(1.3);
    }

    85% {
        transform: scale(1.05) rotate(2deg);
        filter: brightness(1.1);
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes pulsoResplandor {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 153, 255, 0.5), 0 0 40px rgba(0, 153, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(0, 153, 255, 0.8), 0 0 80px rgba(0, 153, 255, 0.5), 0 0 120px rgba(102, 126, 234, 0.4);
    }
}

.logo-cobrando-vida {
    animation: cobraVida 2s ease-in-out, pulsoResplandor 2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.respirando {
    animation: respiracion 4s ease-in-out;
}

/* ========================================
   RESPONSIVE & MOBILE OPTIMIZATION
   ======================================== */

/* Ocultar elementos mobile en desktop por defecto */
.mobile-bottom-nav,
.mobile-drawer,
.btn-hamburger,
.drawer-overlay {
    display: none;
}

@media (max-width: 768px) {
    .login-box {
        padding: 32px 20px;
        max-width: 90%;
    }

    /* Ocultar elementos desktop en móvil */
    .brand-title,
    .nav-item span,
    .nav-actions span:not(.material-symbols-outlined) {
        display: none !important;
    }

    /* Mostrar controles móviles */
    .btn-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        border: none;
        color: white;
        padding: 6px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        margin-top: 10px !important;
        /* Espacio para el badge que está encima */
    }

    /* REPARAR CONTENIDOS QUE REQUIEREN ALEJARSE (Grids 1 columna en móvil) */
    .tab-view:not(#view-venta)>div[style*="grid-template-columns"],
    #view-inventario>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    #view-venta .sales-main-grid {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Sales Sub-tabs Mobile */
.sales-mobile-nav {
    display: none;
    /* Desktop */
}

@media (max-width: 768px) {

    /* UI HEADER TWEAKS */
    .btn-ai-assistant-text {
        display: none !important;
    }

    .btn-ai-assistant {
        padding: 8px !important;
        width: auto !important;
    }

    .view-title {
        font-size: 1.2rem !important;
    }

    #view-venta>div:first-child {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .sales-mobile-nav {
        display: flex !important;
        background: white;
        padding: 6px;
        border-radius: 14px;
        margin-bottom: 16px;
        gap: 6px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
    }

    .sales-tab-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        border: none;
        background: transparent;
        color: var(--text-light);
        font-size: 0.85rem;
        font-weight: 700;
        border-radius: 10px;
        transition: all 0.2s;
    }

    .sales-tab-btn.active {
        background: var(--primary);
        color: white;
    }

    .sales-tab-btn .material-symbols-outlined {
        font-size: 1.2rem;
    }

    #view-venta>.sales-main-grid {
        display: block !important;
    }

    .sales-panel {
        display: none !important;
    }

    .sales-panel.active-mobile {
        display: flex !important;
        flex-direction: column !important;
        animation: fadeIn 0.3s ease;
        width: 100% !important;
    }

    /* FIX SALES LAYOUT OVERLAP */
    .sales-main-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 12px !important;
    }

    #view-venta .form-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    /* Fix specific row for quantity and price - Better spacing */
    #view-venta .form-group:has(#cantidad-producto) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
    }

    /* Container for both Cant + Price */
    #view-venta .form-group:has(#cantidad-producto)>div:first-child {
        display: flex !important;
        flex: 1 !important;
        gap: 10px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Individual columns inside (Cant / Price) */
    #view-venta .form-group:has(#cantidad-producto)>div:first-child>div:nth-child(1) {
        width: 80px !important;
        flex: none !important;
    }

    #view-venta .form-group:has(#cantidad-producto)>div:first-child>div:nth-child(2) {
        flex: 1 !important;
    }

    #cantidad-producto,
    #precio-unitario {
        height: 50px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }

    #view-venta label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
        display: block !important;
    }

    #btn-add-canasta {
        width: 55px !important;
        height: 55px !important;
        flex: none !important;
        background: var(--success) !important;
        color: white !important;
        border-radius: 12px !important;
    }

    /* Input row for products - Keep helper buttons compact */
    #view-venta .form-group:has(#desc-manual) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #view-venta .form-group:has(#desc-manual)>div:last-of-type {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-top: 5px !important;
        width: 100% !important;
    }

    /* The buttons in this row should stay small and not stretch */
    #view-venta .form-group:has(#desc-manual)>div:last-of-type>* {
        width: auto !important;
        height: 42px !important;
        flex: none !important;
        margin: 0 !important;
    }

    #view-venta .form-group:has(#desc-manual)>div:last-of-type .pos-input,
    #wrapper-inventario-manual {
        min-width: 42px !important;
        padding: 0 8px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: var(--primary) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    /* MENU BUTTON Specific Styling - Make it visible */
    #btn-toggle-menu-prods {
        background: #ffffff !important;
        border: 1px solid var(--primary) !important;
        color: var(--primary) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    }

    #wrapper-inventario-manual {
        background: var(--primary-light) !important;
        border-color: #bfdbfe !important;
        gap: 4px !important;
        width: auto !important;
        flex: 1 !important;
        height: 36px !important;
    }

    #wrapper-inventario-manual label {
        font-size: 0.65rem !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    #wrapper-inventario-manual input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }

    /* Specific style for the PLUS (+) button */
    #view-venta .btn-add-manual-prod,
    #view-venta .form-group:has(#desc-manual) button.pos-input:has(.material-symbols-outlined) {
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
    }

    /* Correct contrast for the icons */
    #view-venta .form-group:has(#desc-manual) button.pos-input .material-symbols-outlined {
        color: inherit !important;
        font-size: 18px !important;
    }

    /* MENU BUTTON Specific Styling - Make it popping */
    #btn-toggle-menu-prods {
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3) !important;
    }

    /* Re-adjusting Cantidad and price to be less "chunky" */
    #cantidad-producto,
    #precio-unitario {
        height: 44px !important;
        font-size: 1rem !important;
    }

    #btn-add-canasta {
        width: 50px !important;
        height: 50px !important;
    }

    #wrapper-inventario-manual {
        padding: 0 4px !important;
        border-radius: 8px !important;
    }

    #desc-manual {
        width: 100% !important;
    }

    /* Fix internal layouts of panels */
    .pos-card-pago,
    .pos-card-factura,
    .pos-card-mostrador {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #view-venta input,
    #view-venta select,
    #view-venta button {
        max-width: 100% !important;
        min-width: 0 !important;
        /* Permitir que se encojan */
    }

    /* Fix sub-headers */
    .pos-header-label {
        font-size: 1rem !important;
        flex-wrap: wrap !important;
    }

    /* Fix payment selector */
    #payment-panel-container .form-group {
        flex-direction: column !important;
        gap: 12px !important;
    }

    #pago-selector-panel {
        width: calc(100vw - 40px) !important;
        max-width: 400px !important;
    }

    #dropdown-menu-productos {
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        right: 0 !important;
        left: auto !important;
        z-index: 10000 !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3) !important;
        max-height: 300px !important;
    }

    #view-venta div[style*="width: 180px"] {
        width: 100% !important;
    }

    #view-venta #monto {
        width: 100% !important;
    }

    /* Input icons alignment */
    #view-venta .material-symbols-outlined[style*="position: absolute"] {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        top: 0 !important;
        transform: none !important;
    }

    /* Fix Tipo de Venta Switch Label */
    #view-venta .card:has(#switch-tipo-venta)>div:last-child {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 8px !important;
    }

    #view-venta .card:has(#switch-tipo-venta) span {
        font-size: 0.8rem !important;
    }

    .premium-btn-grid {
        grid-template-columns: 1fr !important;
    }

    .premium-btn-grid button {
        width: 100% !important;
        height: 50px !important;
        /* Más táctil */
    }

    #btn-abrir-gasto {
        display: none !important;
    }

    .premium-toggles-inline {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Fix Carrito Headers and Items */
    #contenedor-productos-venta div[style*="grid-template-columns: 2fr 0.8fr 1fr 40px"] {
        grid-template-columns: 1fr 40px 80px 30px !important;
        padding: 8px !important;
        gap: 4px !important;
    }

    #tabla-productos-venta div[style*="grid-template-columns: 2fr 0.8fr 1fr 40px"] {
        grid-template-columns: 1fr 40px 80px 30px !important;
        padding: 10px 4px !important;
        gap: 4px !important;
    }

    #tabla-productos-venta input[type="number"] {
        width: 35px !important;
        padding: 2px !important;
    }

    /* Ajustes específicos para formularios en móvil */
    .form-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .form-group input,
    .form-group select,
    .form-group button,
    .inv-select {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Inventario en modo Card para móvil */
    #view-inventario table,
    #view-inventario thead,
    #view-inventario tbody,
    #view-inventario th,
    #view-inventario td,
    #view-inventario tr {
        display: block !important;
        width: 100% !important;
    }

    #view-inventario thead {
        display: none !important;
    }

    #view-inventario tr.inv-row {
        background: var(--card-bg) !important;
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        border: 1px solid var(--border) !important;
        position: relative !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    #view-inventario td {
        display: flex !important;
        padding: 10px 0 !important;
        border: none !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    }

    /* Layout de Imagen y Producto */
    #view-inventario td[data-label="Imagen"] {
        justify-content: center !important;
        border-bottom: none !important;
        padding-top: 15px !important;
    }

    #view-inventario td[data-label="Imagen"]::before {
        display: none !important;
    }

    #view-inventario td[data-label="Producto"] {
        display: block !important;
        text-align: center !important;
        padding-bottom: 15px !important;
        border-bottom: 2px solid var(--primary-light) !important;
        margin-bottom: 15px !important;
    }

    #view-inventario td[data-label="Producto"]::before {
        display: none !important;
    }

    #view-inventario .inv-name {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: var(--primary-dark) !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    #view-inventario .inv-meta {
        font-size: 0.85rem !important;
        color: var(--text-light) !important;
    }

    /* Etiquetas de datos dinámicas */
    #view-inventario td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    /* Botones de acción como footer de tarjeta */
    #view-inventario td[data-label="Acciones"] {
        margin-top: 15px !important;
        padding: 12px !important;
        justify-content: center !important;
        background: #f8fafc !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: -12px !important;
        border-radius: 0 0 12px 12px !important;
        border-top: 1px solid var(--border) !important;
    }

    #view-inventario td[data-label="Acciones"]::before {
        display: none !important;
    }

    #view-inventario .inv-actions {
        width: 100% !important;
        display: flex !important;
        gap: 12px !important;
    }

    #view-inventario .inv-actions .btn-mini {
        flex: 1 !important;
        height: 50px !important;
        font-size: 1.4rem !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    #view-inventario .btn-edit {
        background: white !important;
        border: 1px solid var(--primary) !important;
    }

    #view-inventario .btn-delete {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fecaca !important;
    }

    .inv-actions .btn-mini {
        padding: 8px 20px !important;
        font-size: 1.2rem !important;
    }

    /* Ajustar cards de métricas y dashboard - 2x2 en móviles para que se vean juntas */
    .metric-cards-grid,
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .metric-card {
        padding: 10px !important;
        min-height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .quick-card {
        padding: 10px !important;
        gap: 8px !important;
        min-height: 70px !important;
    }

    .quick-icon {
        font-size: 1.5rem !important;
    }

    .quick-card div div:first-child {
        font-size: 0.8rem !important;
    }

    .quick-card div div:last-child {
        display: none !important;
        /* Ocultar descripción larga en móvil para ganar espacio */
    }

    .metric-value {
        font-size: 1.3rem !important;
    }

    .metric-title {
        font-size: 0.6rem !important;
    }

    .dashboard-hero {
        padding: 4px !important;
        margin-bottom: 12px !important;
    }

    .main-nav {
        padding: max(8px, env(safe-area-inset-top)) 16px 8px;
        min-height: 64px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        justify-content: space-between;
        align-items: center;
        background: var(--primary);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        padding: 0;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .nav-items,
    .nav-center,
    .nav-powered-center {
        display: none !important;
        /* Usar drawer en móvil */
    }

    .nav-actions {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 1;
        margin-left: auto;
        min-width: 0;
    }

    .logout-btn {
        padding: 8px;
        min-width: 40px;
        margin: 0 !important;
    }

    /* Quitar user chip del encabezado — ya está en el menú hamburguesa */
    #nav-user-chip-wrapper {
        display: none !important;
    }

    .app-container {
        margin-top: 70px;
        margin-bottom: 0px !important;
        padding: 10px 4px calc(85px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .tab-view {
        min-width: 0;
        overflow-x: clip;
    }

    #view-venta {
        padding: 0 !important;
        width: 100% !important;
    }

    #view-venta .sales-main-grid {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Fix for iOS zoom and layout when typing on mobile */
    #buscar-deuda-factura,
    #rx-final-venta-container input.pos-input,
    #mcd-monto-input {
        font-size: 16px !important;
    }

    /* Fix for RX final table in mobile */
    #rx-final-venta-container {
        overflow-x: auto !important;
        padding: 8px !important;
    }

    #rx-final-venta-container table {
        min-width: 350px;
        /* Ensure inputs have enough space */
    }

    #rx-final-venta-container input.pos-input {
        min-width: 50px;
        height: 36px !important;
    }

    /* Prevent modal from being cut off by keyboard on mobile */
    .modal-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 20px 10px !important;
    }

    .modal-content {
        margin: auto !important;
        max-height: none !important;
        margin-bottom: 40px !important;
    }

    /* Force the products card to not overflow */
    .pos-card-pago {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(65px + env(safe-area-inset-bottom));
        background: var(--card-bg);
        border-top: 1px solid var(--border);
        z-index: 2000;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        padding: 0 10px env(safe-area-inset-bottom);
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-light);
        text-decoration: none;
        font-size: 0.65rem;
        font-weight: 600;
        gap: 4px;
        flex: 1;
        transition: all 0.2s ease;
    }

    .mobile-nav-item .material-symbols-outlined {
        font-size: 24px;
    }

    .mobile-nav-item.active {
        color: var(--primary);
    }

    .mobile-fab.active {
        background: linear-gradient(135deg, #004e9a, #00d2ff) !important;
        color: white !important;
        box-shadow: 0 0 15px var(--primary) !important;
    }

    /* Floating Action Button */
    .mobile-fab {
        flex: 0 0 65px !important;
        /* Prevent stretching */
        width: 65px !important;
        height: 65px !important;
        background: linear-gradient(135deg, var(--primary), #00d2ff) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        margin-top: -35px !important;
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4) !important;
        border: 5px solid var(--card-bg) !important;
        z-index: 2001;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    .mobile-fab:active {
        transform: scale(0.9) translateY(2px);
    }

    .mobile-fab .material-symbols-outlined {
        font-size: 28px !important;
        font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 48 !important;
    }

    .fab-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .fab-label {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        margin-top: -2px;
        letter-spacing: 0.5px;
    }

    /* Mobile Drawer */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
        background: var(--card-bg);
        z-index: 5000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
        display: flex !important;
        flex-direction: column;
        padding: max(20px, env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer.open {
        left: 0;
    }

    .drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        /* removed backdrop-filter */
        z-index: 4999;
        touch-action: none;
    }

    .drawer-overlay.visible {
        display: block !important;
    }

    .drawer-header {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 20px;
    }

    .drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 12px;
        color: var(--text);
        font-weight: 600;
        cursor: pointer;
        min-height: 48px;
    }

    .drawer-item.active {
        background: var(--primary-light);
        color: var(--primary);
    }

    .drawer-section-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--text-light);
        letter-spacing: 1px;
        margin: 15px 0 8px 12px;
        font-weight: 800;
    }
}

/* Otros ajustes responsivos */
@media (max-width: 1024px) {
    .dashboard-hero {
        padding: 12px;
    }

    .metric-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .promo-banner {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .venta-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   BUSCADOR GLOBAL INTELIGENTE
   ======================================== */

/* Estilos para los items de resultado */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.search-result-item:hover {
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.05) 0%, rgba(0, 152, 255, 0.05) 100%);
    transform: translateX(4px);
}

.search-result-item.selected {
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 152, 255, 0.1) 100%);
    border-left: 3px solid var(--primary);
    transform: translateX(4px);
}

.search-result-item:last-child {
    border-bottom: none;
}

/* Loading spinner para búsqueda */
.loading-spinner {
    width: 40px;
    border: 4px solid rgba(59, 130, 246, 0.25);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-sizing: border-box;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar personalizado para resultados */
#global-search-results::-webkit-scrollbar {
    width: 8px;
}

#global-search-results::-webkit-scrollbar-track {
    background: var(--bg);
}

#global-search-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

#global-search-results::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Animación de entrada del modal */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#modal-global-search .modal-content {
    animation: fadeInScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Estilos para kbd (teclas) */
kbd {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em;
}

/* Responsive para el buscador */
@media (max-width: 768px) {
    #modal-global-search .modal-content {
        max-width: 95%;
        margin-top: 40px;
    }

    #global-search-input {
        font-size: 0.9rem !important;
        padding: 12px 45px 12px 16px !important;
    }

    #global-search-results {
        max-height: 400px !important;
    }

    .search-result-item {
        padding: 10px 12px;
    }
}

/* PREMIUM ORDERS TAB REDESIGN */

.ordenes-panel-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ordenes-hero-panel {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    /* Reduced vertical padding */
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(59, 130, 246, 0.08) 48%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    align-items: center;
    flex-wrap: wrap;
}

.ordenes-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0369a1;
    margin-bottom: 4px;
    /* Reduced margin */
}

.ordenes-hero-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.5rem;
    /* Reduced font size */
    letter-spacing: -0.03em;
}

.ordenes-hero-icon {
    font-size: 1.6rem;
    /* Reduced icon size */
    color: var(--primary);
}

.ordenes-hero-subtitle {
    display: none;
    /* Hide subtitle on main view to save space */
}

.ordenes-hero-tags {
    display: none;
    /* Hide tags too */
}

.ordenes-hero-tag {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.ordenes-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.ordenes-action-btn {
    min-height: 44px;
    /* Reduced height */
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ordenes-action-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}

.ordenes-action-btn.secondary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    border-color: var(--border);
}

.ordenes-action-btn:hover,
.ordenes-refresh-btn:hover,
.ordenes-clear-filters-btn:hover {
    transform: translateY(-2px);
}

.ordenes-toolbar-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    flex-wrap: wrap;
}

/* 1. Filter Bar Styling */
.filter-bar-modern {
    display: flex;
    gap: 12px;
    align-items: center;
    background: white;
    padding: 10px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
    margin-bottom: 0;
    flex-wrap: wrap;
    flex: 1;
}

.input-modern-wrapper {
    position: relative;
    flex: 2;
    min-width: 250px;
}

.input-modern {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #f8fafc;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    color: var(--text);
}

.input-modern:focus {
    background: white;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
}

.formula-input {
    width: 100%;
    padding: 0 4px;
    border-radius: 10px;
    background: white;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
    line-height: 1.2;
}

.formula-input::placeholder {
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.8rem;
}

.formula-input:focus {
    background: white !important;
    border-width: 2px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
    font-size: 1.2rem;
}

.select-modern {
    flex: 1;
    min-width: 140px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

.select-modern:focus {
    border-color: var(--primary);
    outline: none;
}

.ordenes-refresh-btn,
.ordenes-clear-filters-btn {
    border: none;
    border-radius: 14px;
    min-height: 46px;
    padding: 0 16px;
    background: white;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ordenes-refresh-btn {
    width: 46px;
    padding: 0;
    background: var(--primary);
    color: white;
    border-color: transparent;
}

.ordenes-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.ordenes-view-btn {
    min-height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ordenes-view-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

.ordenes-view-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.95);
}

.ordenes-view-btn.is-active {
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

.ordenes-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.ordenes-stat-card {
    padding: 12px 15px;
    border-radius: 15px;
    background: white;
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.ordenes-stat-card.primary {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.ordenes-stat-card.warning {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
}

.ordenes-stat-card.accent {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.ordenes-stat-card.success {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.ordenes-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #64748b;
}

.ordenes-stat-value {
    margin-top: 4px;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}

.ordenes-stat-foot {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.75rem;
}

.ordenes-summary-bottom {
    display: grid;
    grid-template-columns: 1.4fr minmax(260px, 0.9fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 6px;
}

.ordenes-chip-group,
.ordenes-next-panel {
    background: white;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.ordenes-chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ordenes-chip-filter {
    border: 1px solid #dbeafe;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ordenes-chip-filter strong {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--primary);
    font-size: 0.8rem;
}

.ordenes-chip-filter.is-active {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #60a5fa;
    color: #0f172a;
}

.ordenes-next-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.ordenes-next-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
}

.ordenes-next-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ordenes-next-client {
    font-weight: 800;
    color: #0f172a;
}

.ordenes-next-work,
.ordenes-next-empty {
    font-size: 0.84rem;
    color: #64748b;
}

.ordenes-next-date {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0369a1;
    background: #eff6ff;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* 2. Premium Order Cards */
.orders-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 24px;
    max-width: 1380px;
    margin: 0 auto;
    align-items: start;
}

.orders-list-premium {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1380px;
    margin: 0 auto;
}

.order-card-premium {
    background: white;
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.order-card-premium+.order-card-premium {
    margin-top: 0;
}

.order-list-item {
    background: white;
    border-radius: 20px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    align-items: stretch;
}

.order-list-item.order-state-pedido {
    border-left-color: #eab308;
}

.order-list-item.order-state-laboratorio {
    border-left-color: #f97316;
}

.order-list-item.order-state-listo {
    border-left-color: #06b6d4;
}

.order-list-item.order-state-entregado {
    border-left-color: #22c55e;
}

.order-list-item.order-state-cotizado {
    border-left-color: #3b82f6;
}

.order-list-item.order-state-al-lab {
    border-left-color: #0369a1;
}

.order-list-item.order-state-en-optica {
    border-left-color: #c2410c;
}

.order-list-item.order-state-control-cal {
    border-left-color: #7e22ce;
}

.order-list-item.order-state-aprobado {
    border-left-color: #0f9d73;
}

.order-list-item.order-state-no-aprobado {
    border-left-color: #dc2626;
}

.order-list-item.order-state-garantia {
    border-left-color: #be185d;
}

.order-list-main,
.order-list-side {
    padding: 16px 18px;
}

.order-list-main {
    min-width: 0;
}

.order-list-side {
    border-left: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
}

.order-list-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.order-list-heading {
    min-width: 0;
    flex: 1;
}

.order-list-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.order-list-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.order-list-meta-item .material-symbols-outlined {
    font-size: 1.05rem;
    color: #2563eb;
}

.order-list-meta-item small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-list-meta-item strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.3;
}

.order-list-time {
    margin-bottom: 0;
    justify-content: flex-start;
}

.order-list-progress {
    margin: 0;
}

.order-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.order-card-premium::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #38bdf8);
}

.order-state-pedido::before {
    background: linear-gradient(90deg, #eab308, #facc15);
}

.order-state-laboratorio::before {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.order-state-listo::before {
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.order-state-entregado::before {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.order-card-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.08);
    border-color: #bfdbfe;
}

.oc-header {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(to right, #f8fafc, white);
    gap: 12px;
}

.oc-header-copy {
    min-width: 0;
    flex: 1;
}

.oc-header-title {
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
}

.oc-header-subtitle {
    margin-top: 4px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
}

.oc-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.oc-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 700;
}

.oc-meta-chip.info {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

.oc-meta-chip .material-symbols-outlined {
    font-size: 0.95rem;
}

.oc-id {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}

.oc-status-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.oc-status-badge:hover {
    transform: scale(1.05);
    filter: brightness(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Status variants */
.status-cotizado {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #dbeafe;
}

.status-pedido {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fef9c3;
}

.status-laboratorio {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #ffedd5;
}

.status-listo {
    background: #ecfeff;
    color: #0891b2;
    border: 1px solid #cffafe;
}

.status-entregado {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #dcfce7;
}

.status-al-lab {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.status-en-optica {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.status-control-cal {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.status-aprobado {
    background: #ecfdf5;
    color: #0f9d73;
    border: 1px solid #d1fae5;
}

.status-no-aprobado {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}

.status-garantia {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

/* Editor rápido de trazabilidad (INVIMA / lote) dentro de la tarjeta de la orden */
.oc-trz {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    cursor: default;
}

.oc-trz-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 7px;
}

.oc-trz-title .material-symbols-outlined {
    font-size: 0.95rem;
    color: #0ea5e9;
}

.oc-trz-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.oc-trz-row input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #1e293b;
    font-size: 0.78rem;
    font-weight: 600;
}

.oc-trz-row input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.oc-trz-btn {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: #0f172a;
    color: white;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.oc-trz-btn:hover:not(:disabled) {
    background: #0ea5e9;
    transform: translateY(-1px);
}

.oc-trz-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.oc-trz-btn .material-symbols-outlined {
    font-size: 1.05rem;
}

[data-theme="dark"] .oc-trz {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .oc-trz-row input {
    background: rgba(15, 23, 42, 0.8);
    color: #edf5ff;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Quick Status Picker Styles */
.status-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding: 10px;
}

.status-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-choice-btn .material-symbols-outlined {
    font-size: 1.5rem;
}

.status-choice-btn span:last-child {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.status-choice-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.btn-choice-cotizado:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.btn-choice-pedido:hover {
    border-color: #ca8a04;
    color: #ca8a04;
    background: #fefce8;
}

.btn-choice-laboratorio:hover {
    border-color: #ea580c;
    color: #ea580c;
    background: #fff7ed;
}

.btn-choice-listo:hover {
    border-color: #0891b2;
    color: #0891b2;
    background: #ecfeff;
}

.btn-choice-entregado:hover {
    border-color: #16a34a;
    color: #16a34a;
    background: #f0fdf4;
}

.swal2-popup.swal2-status-picker {
    width: 450px !important;
    border-radius: 24px !important;
    padding: 20px !important;
}

.oc-body {
    padding: 12px 18px;
    flex: 1;
}

.oc-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.oc-details-grid--primary {
    margin-bottom: 10px;
}

.oc-detail-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.oc-detail-item .material-symbols-outlined {
    font-size: 1.1rem;
    color: #2563eb;
}

.oc-detail-item small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.oc-detail-item strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.3;
}

.oc-secondary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 10px;
    color: #64748b;
}

.oc-secondary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.oc-secondary-item .material-symbols-outlined {
    font-size: 1rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.oc-secondary-item span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-secondary-item b {
    color: #475569;
}

.oc-progress-block {
    margin: 4px 0 8px;
}

.oc-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #475569;
    font-weight: 700;
}

.oc-progress-head strong {
    color: #0f172a;
}

.oc-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.oc-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
}

.oc-client {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oc-date-info {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.oc-time-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.time-tag-late {
    background: #fef2f2;
    color: #ef4444;
}

.time-tag-today {
    background: #fffbeb;
    color: #d97706;
}

.time-tag-future {
    background: #f0fdf4;
    color: #15803d;
}

.oc-footer {
    padding: 10px 18px;
    background: white;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 1400px) {
    .orders-grid-premium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.oc-provider {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.oc-actions {
    display: flex;
    gap: 8px;
}

.oc-actions--compact {
    gap: 6px;
}

.oc-actions--compact .btn-circle-action {
    width: 34px;
    height: 34px;
}

.btn-circle-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.btn-wa-premium {
    background: #25D366;
    color: white;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

.btn-wa-premium:hover {
    transform: scale(1.1) rotate(-5deg);
    background: #1ebc57;
}

.btn-call-premium {
    background: #eff6ff;
    color: #2563eb;
}

.btn-call-premium:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.btn-edit-premium {
    background: #f3f4f6;
    color: #4b5563;
}

.btn-edit-premium:hover {
    background: #e5e7eb;
    color: #1f2937;
    transform: translateY(-2px);
}

.btn-trash-premium {
    background: transparent;
    color: #9ca3af;
}

.btn-trash-premium:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* 3. Empty State */
.empty-state-orders {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 20px;
    border: 2px dashed #e2e8f0;
    color: #94a3b8;
}

/* 4. Alert Section */
.alert-section-premium {
    background: linear-gradient(135deg, #fff1f2 0%, #fff 100%);
    border: 1px solid #fecaca;
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.05);
    animation: fadeIn 0.5s ease;
}

/* ========================================
   PREMIUM SALES HISTORY & MINI-FACTURA
   ======================================== */

.mini-factura-items {
    margin: 8px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mini-factura-header {
    display: grid;
    grid-template-columns: 2.5rem 1fr 5rem 5rem;
    background: #0f172a;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-factura-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr 5rem 5rem;
    padding: 8px 10px;
    font-size: 0.8rem;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    background: white;
}

.mini-factura-row:last-child {
    border-bottom: none;
}

.mini-factura-row:nth-child(even) {
    background: #f8fafc;
}

.mini-factura-total {
    background: #f8fafc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 2px solid #e2e8f0;
}

.mini-factura-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.mini-factura-total-val {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.85rem;
}

.pago-logo {
    height: 14px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.modal-dia-header-premium {
    background: linear-gradient(135deg, var(--primary) 0%, #004a99 100%);
    padding: 14px 22px;
    border-radius: 20px 20px 0 0;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Botones dentro de la barra azul */
.btn-header-dia {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background .15s ease;
}
.btn-header-dia:hover { background: rgba(255, 255, 255, 0.25); }
.btn-header-dia-primary {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
}
.btn-header-dia-primary:hover { background: rgba(255, 255, 255, 0.38); }

/* Forzar estilo blanco en botones Gasto/Vendedor que se agregan dinámicamente */
#modal-dia-actions .btn-shortcut {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    box-shadow: none !important;
}
#modal-dia-actions .btn-shortcut:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}
#modal-dia-actions .btn-shortcut .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 768px) {
    .modal-dia-summary-premium {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    /* Header: allow wrapping so action buttons get their own row */
    .modal-dia-header-premium {
        flex-wrap: wrap !important;
        padding: 10px 14px !important;
        gap: 6px !important;
    }

    /* Title section: stretch to fill row alongside recaudo/close */
    .modal-dia-header-premium > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Truncate long date in title */
    .modal-dia-header-premium > div:first-child h3,
    .modal-dia-header-premium > div:first-child #modal-titulo {
        font-size: 0.85rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    /* Hide maximize button — useless on mobile */
    #btn-maximize-modal-dia {
        display: none !important;
    }

    /* Hide "Recaudo Total" label — keep only the amount */
    .modal-dia-header-premium > div:last-child > div > div:first-child {
        display: none !important;
    }

    .modal-dia-header-premium > div:last-child > div #modal-total {
        font-size: 0.95rem !important;
    }

    /* Action buttons: own full-width row below title */
    #modal-dia-actions {
        flex: 0 0 100% !important;
        order: 10 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 2px 0 0 !important;
        gap: 5px !important;
    }

    #modal-dia-actions button,
    #modal-dia-actions .btn-shortcut {
        flex: 1 1 calc(50% - 5px) !important;
        justify-content: center !important;
        padding: 7px 8px !important;
        font-size: 0.78rem !important;
        min-width: 0 !important;
    }

    /* Reduce modal body padding on mobile */
    #modal-body-ventas {
        padding: 12px 14px !important;
    }
}

.swal2-popup.swal-wide-popup {
    padding: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.32) !important;
    overflow: hidden;
    /* removed backdrop-filter */
}

.swal2-popup.swal-wide-popup .swal2-title {
    margin: 0 !important;
    padding: 18px 56px 18px 22px !important;
    text-align: left !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(248, 250, 252, 0.8) 100%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.swal2-popup.swal-wide-popup .swal2-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    right: 14px !important;
    top: 12px !important;
    color: #64748b !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.12) !important;
}

.swal2-popup.swal-wide-popup .swal2-close:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

.swal2-popup.swal-wide-popup .swal2-html-container {
    margin: 0 !important;
    padding: 16px 18px 20px 18px !important;
    text-align: left !important;
}

.histfac-wrap {
    display: grid;
    gap: 12px;
}

.histfac-summary {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 14px 30px -24px rgba(2, 6, 23, 0.35);
}

.histfac-kpi-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.histfac-kpi-value {
    margin-top: 4px;
    font-size: 1.05rem;
    font-weight: 950;
    color: #0f172a;
}

.histfac-kpi-right {
    text-align: right;
}

.histfac-money {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.histfac-section {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    overflow: hidden;
}

.histfac-items {
    box-shadow: 0 14px 30px -26px rgba(2, 6, 23, 0.28);
}

.histfac-items-head {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.histfac-items-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 950;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.histfac-items-title .material-symbols-outlined {
    font-size: 1.15rem;
    color: var(--primary);
}

.histfac-badge {
    min-width: 28px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #1e40af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 950;
}

.histfac-items-list {
    max-height: 140px;
    overflow: auto;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.88);
}

.histfac-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.95);
    font-size: 0.88rem;
}

.histfac-item-row:last-child {
    border-bottom: none;
}

.histfac-item-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: #0f172a;
}

.histfac-qty {
    font-weight: 950;
    color: #334155;
}

.histfac-item-name {
    color: #334155;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.histfac-item-right {
    color: #64748b;
    font-weight: 900;
    white-space: nowrap;
}

.histfac-table-wrap {
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px -28px rgba(2, 6, 23, 0.42);
    overflow: auto;
    max-height: 420px;
}

.histfac-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.histfac-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px;
    background: rgba(239, 246, 255, 0.95);
    border-bottom: 2px solid rgba(191, 219, 254, 0.95);
    color: #1e3a8a;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
}

.histfac-th-center {
    text-align: center !important;
}

.histfac-row td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95);
    background: rgba(255, 255, 255, 0.92);
}

.histfac-row:hover td {
    background: rgba(248, 250, 252, 0.95);
}

.histfac-td-date {
    font-size: 0.8rem;
    color: #334155;
    font-weight: 700;
    white-space: nowrap;
}

.histfac-td-prev {
    font-size: 0.9rem;
    font-weight: 900;
    color: #64748b;
    white-space: nowrap;
}

.histfac-paycell {
    display: grid;
    gap: 6px;
}

.histfac-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
}

.histfac-chip.chip--abono {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #b45309;
}

.histfac-chip.chip--pago {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #166534;
}

.histfac-payval {
    font-weight: 950;
    color: #0f172a;
    font-size: 0.95rem;
    white-space: nowrap;
}

.histfac-td-new {
    font-size: 0.95rem;
    font-weight: 950;
    white-space: nowrap;
}

.histfac-td-new.is-open {
    color: #dc2626;
}

.histfac-td-new.is-paid {
    color: #16a34a;
}

.histfac-paid {
    color: #16a34a;
    font-weight: 950;
}

.histfac-td-action {
    text-align: center;
    white-space: nowrap;
}

.histfac-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.95);
    background: rgba(255, 255, 255, 0.85);
    color: #1d4ed8;
    font-weight: 950;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 10px 22px -18px rgba(2, 6, 23, 0.35);
}

.histfac-btn .material-symbols-outlined {
    font-size: 1.05rem;
}

.histfac-btn:hover {
    transform: translateY(-1px);
    background: rgba(239, 246, 255, 0.95);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 18px 34px -24px rgba(2, 6, 23, 0.45);
}

.histfac-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(254, 202, 202, 0.95);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(255, 255, 255, 0.85) 60%);
    color: #991b1b;
}

.histfac-alert-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: #b91c1c;
}

.histfac-alert-left .material-symbols-outlined {
    font-size: 1.15rem;
}

.histfac-alert-right {
    font-weight: 950;
    color: #b91c1c;
}

.history-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 12px;
    /* removed backdrop-filter */
}

/* Efecto cinematográfico de eliminación */
.venta-card.card-removing {
    animation: slideOutRight 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
    border-color: #fca5a5 !important;
}

/* ========================================
   MODAL MOBILE FIXES (EVOLUTIVA & CONFIG)
   ======================================== */
@media (max-width: 768px) {

    /* Historia Evolutiva Mobile Fix */
    #modal-historia-evolutiva .evo-container {
        flex-direction: column !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    #modal-historia-evolutiva .evo-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        overflow-y: auto !important;
    }

    #modal-historia-evolutiva .evo-main {
        width: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }

    #modal-historia-evolutiva .evo-main>div:nth-child(2) {
        padding: 15px !important;
        gap: 15px !important;
    }

    #modal-historia-evolutiva .evo-main div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #modal-historia-evolutiva .evo-card {
        padding: 12px !important;
    }

    /* Ocultar columnas técnicas en móvil */
    #modal-historia-evolutiva .evo-table th:nth-child(3),
    #modal-historia-evolutiva .evo-table td:nth-child(3),
    #modal-historia-evolutiva .evo-table th:nth-child(4),
    #modal-historia-evolutiva .evo-table td:nth-child(4),
    #modal-historia-evolutiva .evo-table th:nth-child(5),
    #modal-historia-evolutiva .evo-table td:nth-child(5) {
        display: none !important;
    }

    /* Centro de Configuración Mobile Fix */
    #modal-config-empresa .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    #modal-config-empresa .modal-content>div:nth-child(2) {
        flex-direction: column !important;
        height: calc(100vh - 80px) !important;
    }

    #modal-config-empresa .modal-content>div:nth-child(2)>div:first-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 5px !important;
        background: #f8fafc !important;
        flex-shrink: 0 !important;
    }

    #modal-config-empresa .config-tab-btn {
        white-space: nowrap !important;
        padding: 10px 15px !important;
        margin-bottom: 0 !important;
        font-size: 0.8rem !important;
    }

    #modal-config-empresa .config-panel {
        padding: 15px !important;
        max-height: none !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }

    #modal-config-empresa .config-panel div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* FILTER PILLS FOR ORDERS */
.status-pills-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 4px 16px 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.status-pills-container::-webkit-scrollbar {
    display: none;
}

.status-pill {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-light);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.status-pill:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.status-pill.active {
    background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(0, 102, 204, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .status-pill {
        padding: 8px 16px;
        font-size: 0.82rem;
        border-radius: 12px;
    }
}

/* PREMIUM SWAL STYLES */
.premium-swal-popup {
    border-radius: 24px !important;
    padding: 24px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.premium-swal-title {
    font-weight: 800 !important;
    color: #1e293b !important;
    padding-top: 10px !important;
}

.premium-swal-select {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    border: 2px solid #e2e8f0 !important;
    font-size: 1rem !important;
    margin-top: 20px !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}

.premium-swal-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
    background-color: white !important;
    outline: none !important;
}

.premium-swal-confirm-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%) !important;
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    margin-right: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.premium-swal-cancel-btn {
    background: #f1f5f9 !important;
    color: #64748b !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
}

.premium-swal-confirm-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.premium-swal-cancel-btn:hover {
    background: #e2e8f0 !important;
}

/* FIX ALIGNMENT IN FILTER BAR */
.filter-bar-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-bar-modern>* {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .filter-bar-modern {
        flex-direction: column;
        align-items: stretch;
    }

    .ordenes-hero-panel,
    .ordenes-toolbar-card {
        padding: 16px;
    }

    .ordenes-summary-bottom {
        grid-template-columns: 1fr;
    }

    .ordenes-hero-actions {
        width: 100%;
    }

    .ordenes-action-btn {
        width: 100%;
    }

    .ordenes-view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .ordenes-view-btn {
        flex: 1;
        justify-content: center;
    }

    .oc-details-grid {
        grid-template-columns: 1fr;
    }

    .oc-secondary-meta {
        flex-direction: column;
        gap: 6px;
    }

    .order-list-item {
        grid-template-columns: 1fr;
    }

    .order-list-side {
        border-left: none;
        border-top: 1px solid #eef2f7;
    }

    .order-list-top,
    .order-list-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .order-list-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* PACIENTE OBLIGATORIO ANIMATION */
@keyframes pulse-warning-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
        transform: scale(1);
    }
}

.animate-pulse-warning {
    animation: pulse-warning-glow 2s infinite;
}

/* SALES VOICE SUBTLE BUTTON SYSTEM */
.sales-voice-field-wrap .sales-voice-btn-subtle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.sales-voice-field-wrap:hover .sales-voice-btn-subtle,
.sales-voice-field-wrap:focus-within .sales-voice-btn-subtle,
.sales-voice-field-wrap .sales-voice-btn-subtle.is-listening {
    opacity: 1;
    pointer-events: auto;
}

.sales-voice-field-wrap .sales-voice-btn-subtle:hover {
    background: #f1f5f9;
    color: #6366f1;
}

.sales-voice-field-wrap .sales-voice-btn-subtle.is-listening {
    color: #ef4444;
    background: #fef2f2;
    animation: sales-mic-pulse 1.5s infinite;
}

@keyframes sales-mic-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

#venta-notas.voice-previewing {
    border-color: #6366f1 !important;
    background: #f8faff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* --- FIX DE CURSOR GLOBAL --- */
@media screen {

    body,
    .premium-panel-container,
    .main-nav,
    .view-content,
    .modal-overlay,
    .tab-view,
    .st-dashboard-header {
        cursor: auto !important;
    }
}

.premium-swal-confirm-btn {
    background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%) !important;
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    margin-right: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.premium-swal-cancel-btn {
    background: #f1f5f9 !important;
    color: #64748b !important;
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
}

.premium-swal-confirm-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.premium-swal-cancel-btn:hover {
    background: #e2e8f0 !important;
}

/* FIX ALIGNMENT IN FILTER BAR */
.filter-bar-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-bar-modern>* {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .filter-bar-modern {
        flex-direction: column;
        align-items: stretch;
    }

    .ordenes-hero-panel,
    .ordenes-toolbar-card {
        padding: 16px;
    }

    .ordenes-summary-bottom {
        grid-template-columns: 1fr;
    }

    .ordenes-hero-actions {
        width: 100%;
    }

    .ordenes-action-btn {
        width: 100%;
    }

    .ordenes-view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .ordenes-view-btn {
        flex: 1;
        justify-content: center;
    }

    .oc-details-grid {
        grid-template-columns: 1fr;
    }

    .oc-secondary-meta {
        flex-direction: column;
        gap: 6px;
    }

    .order-list-item {
        grid-template-columns: 1fr;
    }

    .order-list-side {
        border-left: none;
        border-top: 1px solid #eef2f7;
    }

    .order-list-top,
    .order-list-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .order-list-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* PACIENTE OBLIGATORIO ANIMATION */
@keyframes pulse-warning-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
        transform: scale(1);
    }
}

.animate-pulse-warning {
    animation: pulse-warning-glow 2s infinite;
}

/* SALES VOICE SUBTLE BUTTON SYSTEM */
.sales-voice-field-wrap .sales-voice-btn-subtle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.sales-voice-field-wrap:hover .sales-voice-btn-subtle,
.sales-voice-field-wrap:focus-within .sales-voice-btn-subtle,
.sales-voice-field-wrap .sales-voice-btn-subtle.is-listening {
    opacity: 1;
    pointer-events: auto;
}

.sales-voice-field-wrap .sales-voice-btn-subtle:hover {
    background: #f1f5f9;
    color: #6366f1;
}

.sales-voice-field-wrap .sales-voice-btn-subtle.is-listening {
    color: #ef4444;
    background: #fef2f2;
    animation: sales-mic-pulse 1.5s infinite;
}

@keyframes sales-mic-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

#venta-notas.voice-previewing {
    border-color: #6366f1 !important;
    background: #f8faff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* --- FIX DE CURSOR GLOBAL --- */
@media screen {

    body,
    .premium-panel-container,
    .main-nav,
    .view-content,
    .modal-overlay,
    .tab-view,
    .st-dashboard-header {
        cursor: auto !important;
    }

    button,
    a,
    .btn,
    .nav-item,
    [role="button"],
    .st-card,
    .st-quick-pill,
    .material-symbols-outlined {
        cursor: pointer !important;
    }

    input,
    textarea,
    select {
        cursor: text !important;
    }
}

/* --- FIX RESPONSIVO RX EXTERNAS MODO MOVIL --- */
@media screen and (max-width: 768px) {

    /* Recuperar el mayor espacio lateral posible eliminando márgenes muertos */
    #form-receta-externa-card {
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
    }

    #form-receta-externa-card>div:nth-child(2) {
        padding: 10px 4px !important;
    }

    #form-receta-externa-card>div:nth-child(2)>div[style*="padding: 16px"] {
        padding: 10px 8px !important;
    }

    #rx-ext-crear-paciente-rapido {
        padding: 12px 8px !important;
    }

    #rx-ext-refraccion-container .draggable-section {
        padding: 12px 6px !important;
    }

    .rx-ext-paciente-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .rx-ext-refraccion-grid.header-row {
        display: none !important;
    }

    .rx-ext-refraccion-grid:not(.header-row) {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px 8px !important;
        padding: 12px 8px !important;
    }

    .rx-ext-refraccion-grid .rx-eyelabel-mobile {
        grid-column: span 3;
        text-align: center !important;
        font-size: 1.1rem !important;
        color: var(--primary) !important;
        border-bottom: 2px dashed #cbd5e1;
        padding-bottom: 8px;
        margin-bottom: 6px;
    }

    .rx-ext-refraccion-grid .rx-field-label-mobile {
        display: block !important;
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 4px;
        text-align: center;
        font-weight: 800;
        text-transform: uppercase;
    }

    .rx-ext-actions-mobile {
        flex-direction: column;
        gap: 16px;
    }

    .rx-ext-actions-mobile button {
        width: 100%;
        justify-content: center;
    }

    #view-recetas_externas {
        padding: 0 !important;
    }

    #view-recetas_externas .rx-ext-form-body {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* OptiMentor móvil — robot oculto; toca el ícono circular para llamarlo */
    #opti-mentor-container,
    #opti-mentor-wrapper,
    .opti-mentor-wrapper {
        display: none !important;
    }
    #mentor-show-fab {
        bottom: 86px !important;
        left: 16px !important;
        animation: mentor-fab-pulse 2.5s ease-in-out infinite !important;
    }
}

/* ==========================================
   OPTIMENTOR FAB — ícono circular para llamar al robot en móvil
   ========================================== */
#mentor-show-fab {
    display: none;
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 16px rgba(124,58,237,0.45);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999997;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
#mentor-show-fab:active {
    transform: scale(0.9);
}
#mentor-show-fab .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
}
@keyframes mentor-fab-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(124,58,237,0.45), 0 0 0 0 rgba(124,58,237,0.2); }
    50%       { box-shadow: 0 6px 22px rgba(124,58,237,0.6), 0 0 0 7px rgba(124,58,237,0.0); }
}

/* ==========================================
// ESTILOS PARA MESES COLAPSABLES EN HISTORIAL
// ========================================== */

.mes-seccion-wrapper {
    margin-bottom: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mes-seccion-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
    user-select: none;
}

.mes-seccion-header:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.mes-icon-collapse {
    font-size: 24px;
    color: #64748b;
    margin-right: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mes-seccion-header .mes-titulo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: capitalize;
}

.mes-seccion-content {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
}

/* FIX PARA WHITE COLUMNS BUG */
.nav-section-toggle {
    background: transparent !important;
    box-shadow: none !important;
}



/* REFORZAMIENTO FINAL PARA EVITAR COLUMNAS BLANCAS */
.nav-section,
.nav-section-collapsible,
.nav-section-toggle {
    background-color: transparent !important;
    box-shadow: none !important;
}

.sidebar {
    overflow: visible !important;
}

.nav-items {
    overflow: visible !important;
}

/* BOTÓN EXPANDIR DÍA EN HISTORIAL */
.card-dia {
    position: relative !important;
}







/* ESTADOS EXPANDIDOS */
.card-dia.is-expanded {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    min-height: 450px !important;
    z-index: 30 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

.card-dia.is-expanded .card-dia.is-expanded .dia-detalle-expandido {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    animation: fadeIn 0.4s ease;
}

.card-dia.is-expanded .dia-detalle-expandido {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.detalle-expandido-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.lista-transacciones-scroll {
    flex: 1;
    overflow-y: auto;
    background: rgba(248, 250, 252, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.5);
    padding: 4px;
}

.lista-transacciones-scroll::-webkit-scrollbar {
    width: 4px;
}

.lista-transacciones-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Soporte para grid responsive */
.grid-dias {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}


/* Modal Dia Maximizado */
#modal-dia .modal-content.is-maximized {
    max-width: 98vw !important;
    width: 98vw !important;
    height: 95vh !important;
    max-height: 95vh !important;
    margin: 2.5vh auto !important;
    border-radius: 20px !important;
    display: flex;
    flex-direction: column;
}

#modal-dia .modal-content.is-maximized #modal-body-ventas {
    flex: 1;
    max-height: none !important;
    overflow-y: auto;
}

/* Transacciones Detalladas en Card */
.transaccion-item-card {
    transition: background 0.2s;
    cursor: default;
}

.transaccion-item-card:hover {
    background: rgba(0, 0, 0, 0.02);
}

.transaccion-item-card i {
    opacity: 0.7;
}

[data-permission-hidden="true"] {
    display: none !important;
}


/* ==========================================
   PREMIUM FLOATING DROPDOWN MENU FOR DESKTOP
   ========================================== */
@media (min-width: 769px) {

    /* Allow the dropdown to overflow outside the sticky header */
    body.nav-style-floating .main-nav {
        overflow: visible !important;
    }

    /* Ensure the parent nav-section has overflow: visible so dropdown is visible outside */
    body.nav-style-floating .main-nav .nav-section {
        position: relative !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        transition: background 0.2s, border-color 0.2s;
    }

    body.nav-style-floating .main-nav .nav-section:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Remove the old side separator line in the toggle button */
    body.nav-style-floating .main-nav .nav-section-toggle {
        border-right: none !important;
        border-radius: 14px !important;
        padding: 8px 14px !important;
        height: auto !important;
        min-height: 52px;
    }

    /* Transform the expanded panel into an elegant floating dropdown list */
    body.nav-style-floating .main-nav .nav-section-items {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(8px) !important;
        background: var(--card-bg, #ffffff) !important;
        border: 1px solid var(--border, #cbd5e1) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        /* Stack items vertically */
        gap: 4px !important;
        min-width: 0 !important;
        max-width: 0 !important;
        width: max-content !important;
        z-index: 99999 !important;

        /* Elegant frosted scale & fade transition */
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transform: translateX(-50%) translateY(12px) scale(0.96) !important;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
            max-height 0s 0.28s,
            max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            padding 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Expanded State style */
    body.nav-style-floating .main-nav .nav-section-collapsible:not(.collapsed) .nav-section-items {
        opacity: 1 !important;
        pointer-events: auto !important;
        max-height: 600px !important;
        max-width: 600px !important;
        min-width: 220px !important;
        padding: 8px !important;
        overflow: visible !important;
        transform: translateX(-50%) translateY(0px) scale(1) !important;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
            max-height 0s 0s,
            max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
            padding 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Clean vertical dropdown list items styling */
    body.nav-style-floating .main-nav .nav-section-items .nav-item {
        display: flex !important;
        flex-direction: row !important;
        /* Icon and text next to each other */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: var(--text, #0f172a) !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        transform: none !important;
        text-align: left !important;
        min-width: 0 !important;
        height: auto !important;
        transform-origin: center !important;
        transition: background 0.15s, color 0.15s !important;
    }

    /* Make text size look balanced inside the vertical menu items */
    body.nav-style-floating .main-nav .nav-section-items .nav-item span {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Dropdown item icon style */
    body.nav-style-floating .main-nav .nav-section-items .nav-item .material-symbols-outlined {
        font-size: 1.2rem !important;
        color: var(--primary, #2563eb) !important;
    }

    /* Hover effect inside the dropdown menu list */
    body.nav-style-floating .main-nav .nav-section-items .nav-item:hover {
        background: var(--primary-light, #eff6ff) !important;
        color: var(--primary, #2563eb) !important;
        transform: translateX(3px) !important;
        /* Subtle slide-in effect */
    }

    /* Dark mode support for the floating dropdown container */
    [data-theme="dark"].nav-style-floating .main-nav .nav-section-items {
        background: #1e293b !important;
        /* Slate 800 */
        border-color: #334155 !important;
        /* Slate 700 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    [data-theme="dark"].nav-style-floating .main-nav .nav-section-items .nav-item {
        color: #f1f5f9 !important;
        /* Slate 100 */
    }

    [data-theme="dark"].nav-style-floating .main-nav .nav-section-items .nav-item:hover {
        background: rgba(59, 130, 246, 0.15) !important;
        /* Primary blue tint */
        color: #60a5fa !important;
    }

    [data-theme="dark"].nav-style-floating .main-nav .nav-section-items .nav-item .material-symbols-outlined {
        color: #60a5fa !important;
    }

    /* ==========================================================
       STYLE 2: LUXURIOUS MINIMALIST SIDEBAR DOCK (nav-style-dock)
       ========================================================== */
    body.nav-style-dock .app-container {
        margin-left: 110px !important;
        width: calc(100% - 110px) !important;
        transition: margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.nav-style-dock .main-nav {
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        bottom: 16px !important;
        width: 82px !important;
        height: calc(100vh - 32px) !important;
        min-height: 0 !important;
        border-radius: 26px !important;
        flex-direction: column !important;
        padding: 24px 8px !important;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transition-delay: 0s !important; /* Colapso inmediato al retirar el cursor */
        scrollbar-width: none;
    }

    body.nav-style-dock .main-nav::-webkit-scrollbar {
        display: none;
    }

    /* Expand sidebar on hover as an elegant overlay - Con retardo táctico */
    body.nav-style-dock .main-nav:hover {
        width: 268px !important;
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28) !important;
        transition-delay: 0.25s !important; /* Retardo de 250ms para evitar despliegue accidental súper sensible */
    }

    body.nav-style-dock .main-nav .nav-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 100% !important;
        gap: 28px !important;
        width: 100% !important;
    }

    /* Brand tweaks on Sidebar: Center logo, hide text unless hovered */
    body.nav-style-dock .main-nav .brand {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.nav-style-dock .main-nav .brand #app-logo-img {
        width: 52px !important;
        height: 52px !important;
        object-fit: contain !important;
        background: transparent !important;
        padding: 0px !important;
        border-radius: 14px !important;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    body.nav-style-dock .main-nav:hover .brand #app-logo-img {
        transform: scale(1.05) rotate(-3deg) !important;
    }

    /* En el dock la tarjeta del logo se mantiene COMPACTA y centrada para no
       desbordar el sidebar (de 82px). Ignora el ancho/zoom configurables del
       nav horizontal, que aquí no aplican. */
    body.nav-style-dock .main-nav .brand-inner {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        height: 64px !important;
        padding: 6px !important;
        margin: 0 auto !important;
        background: #fff !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    /* Anular el margen que 'brand-square-long-text' aplica para el nav
       horizontal: en el dock empujaba el logo hacia afuera ("salido"). */
    body.nav-style-dock .main-nav .brand,
    body.nav-style-dock .main-nav .brand.brand-square-long-text {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* El dock SÍ respeta el modo y el zoom configurados (pero NO el ancho de
       tarjeta, que aquí queda fijo en 64px para no desbordar el sidebar). */
    body.nav-style-dock .main-nav .brand #app-logo-img {
        object-fit: var(--logo-fit, contain) !important;
        transform: scale(var(--logo-zoom, 1)) !important;
    }

    body.nav-style-dock .main-nav:hover .brand #app-logo-img {
        transform: scale(calc(var(--logo-zoom, 1) * 1.05)) rotate(-3deg) !important;
    }

    /* Target brand text wrappers dynamically */
    body.nav-style-dock .main-nav .brand div div div {
        opacity: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        height: 0 !important;
        transition: opacity 0.2s ease, max-width 0.2s ease, height 0.2s ease !important;
        white-space: nowrap !important;
    }

    body.nav-style-dock .main-nav:hover .brand div div div {
        opacity: 1 !important;
        max-width: 180px !important;
        height: auto !important;
        transition: opacity 0.2s ease, max-width 0.2s ease, height 0.2s ease !important;
        transition-delay: 0.25s !important;
    }

    /* Navigation list alignment */
    body.nav-style-dock .main-nav .nav-items {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    body.nav-style-dock .main-nav:hover .nav-items {
        align-items: stretch !important;
    }

    /* Sidebar items layout: Centered icon when collapsed, row when expanded */
    body.nav-style-dock .main-nav .nav-item,
    body.nav-style-dock .main-nav .nav-section {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.nav-style-dock .main-nav:hover .nav-item,
    body.nav-style-dock .main-nav:hover .nav-section {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* High contrast glowing active state in Sidebar */
    body.nav-style-dock .main-nav .nav-item.active {
        background: #ffffff !important;
        color: var(--primary, #0050c8) !important;
        box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
        border-color: #ffffff !important;
    }

    body.nav-style-dock .main-nav .nav-item.active span {
        color: var(--primary, #0050c8) !important;
    }

    /* Section category styling inside Sidebar */
    body.nav-style-dock .main-nav .nav-section {
        flex-direction: column !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    body.nav-style-dock .main-nav .nav-section-toggle {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #ffffff !important;
        border: none !important;
        gap: 12px !important;
        transition: all 0.2s ease !important;
    }

    body.nav-style-dock .main-nav:hover .nav-section-toggle {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 16px !important;
        justify-content: flex-start !important;
    }

    /* Hide category arrow when collapsed, show when hovered */
    body.nav-style-dock .main-nav .nav-section-arrow {
        display: none !important;
    }

    body.nav-style-dock .main-nav:hover .nav-section-arrow {
        display: inline-block !important;
        margin-left: auto !important;
        font-size: 1.1rem !important;
    }

    /* Hide text spans inside both items and sections when collapsed, fade in when expanded */
    body.nav-style-dock .main-nav .nav-item span:not(.material-symbols-outlined),
    body.nav-style-dock .main-nav .nav-section-toggle span:not(.material-symbols-outlined) {
        display: none !important;
        opacity: 0;
        transition: opacity 0.2s ease !important;
    }

    body.nav-style-dock .main-nav:hover .nav-item span:not(.material-symbols-outlined),
    body.nav-style-dock .main-nav:hover .nav-section-toggle span:not(.material-symbols-outlined) {
        display: inline-block !important;
        opacity: 1;
        transition: opacity 0.2s ease !important;
        transition-delay: 0.25s !important;
    }

    /* Icon sizes */
    body.nav-style-dock .main-nav .nav-item span.material-symbols-outlined,
    body.nav-style-dock .main-nav .nav-section-toggle span.material-symbols-outlined {
        font-size: 1.35rem !important;
    }

    body.nav-style-dock .main-nav .nav-item {
        justify-content: center !important;
    }

    body.nav-style-dock .main-nav:hover .nav-item {
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px 16px !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    /* Nested Accordion for sub-menus inside Left Sidebar */
    body.nav-style-dock .main-nav .nav-section-items {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: rgba(0, 0, 0, 0.16) !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        max-height: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, padding 0.3s !important;
    }

    body.nav-style-dock .main-nav:hover .nav-section-collapsible:not(.collapsed) .nav-section-items {
        max-height: 420px !important;
        opacity: 1 !important;
        padding: 6px !important;
        pointer-events: auto !important;
    }

    /* Sidebar Nested items list */
    body.nav-style-dock .main-nav .nav-section-items .nav-item {
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
        min-height: 38px !important;
        height: auto !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    body.nav-style-dock .main-nav .nav-section-items .nav-item:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        transform: translateX(4px) !important;
    }

    body.nav-style-dock .main-nav .nav-section-items .nav-item .material-symbols-outlined {
        color: #ffffff !important;
        font-size: 1.15rem !important;
    }

    /* Actions bottom stack (Search, Updates, Customize, Avatar) */
    body.nav-style-dock .main-nav .nav-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        align-items: center !important;
        margin-top: auto !important;
        padding-top: 18px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    body.nav-style-dock .main-nav:hover .nav-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Buscador en el dock: colapsado = solo ícono (círculo); al expandir el
       dock se muestra completo. Evita que el pill de 260px se salga del sidebar. */
    body.nav-style-dock .main-nav .inline-search-wrapper {
        width: 52px !important;
        display: flex !important;
        justify-content: center !important;
    }

    body.nav-style-dock .main-nav .inline-search-pill {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
        padding-left: 0 !important;
        justify-content: center !important;
        transition: width 0.3s ease, border-radius 0.3s ease !important;
    }

    body.nav-style-dock .main-nav .inline-search-pill input {
        display: none !important;
    }

    body.nav-style-dock .main-nav:hover .inline-search-wrapper {
        width: 100% !important;
    }

    body.nav-style-dock .main-nav:hover .inline-search-pill {
        width: 100% !important;
        height: 42px !important;
        border-radius: 999px !important;
        padding-left: 12px !important;
        justify-content: flex-start !important;
    }

    body.nav-style-dock .main-nav:hover .inline-search-pill input {
        display: block !important;
    }

    /* Hide scroll arrows in vertical dock */
    body.nav-style-dock .nav-scroll-indicator {
        display: none !important;
    }


    /* ==========================================================
       STYLE 3: HORIZONTAL MEGA MENU STRIP (nav-style-megamenu)
       ========================================================== */
    body.nav-style-megamenu .main-nav {
        overflow: visible !important;
        min-height: 86px !important;
    }

    body.nav-style-megamenu .main-nav .nav-section {
        position: static !important;
    }

    body.nav-style-megamenu .main-nav .nav-section-items {
        position: fixed !important;
        top: 92px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        transform: translateY(-8px) !important;
        border-radius: 0 0 28px 28px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(24px) !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-bottom: 4px solid var(--primary) !important;
        box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16) !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 20px !important;
        z-index: 4999 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), max-height 0s 0.28s !important;
    }

    body.nav-style-megamenu .main-nav .nav-section-collapsible:not(.collapsed) .nav-section-items {
        opacity: 1 !important;
        pointer-events: auto !important;
        max-height: 420px !important;
        padding: 30px 8% !important;
        transform: translateY(0px) !important;
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), max-height 0s 0s !important;
    }

    body.nav-style-megamenu .main-nav .nav-section-items .nav-item {
        background: rgba(15, 23, 42, 0.03) !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 16px !important;
        padding: 18px 24px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        color: var(--text, #0f172a) !important;
        /* Fixed: dark slate text color */
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.nav-style-megamenu .main-nav .nav-section-items .nav-item:hover {
        background: var(--primary-light, #eff6ff) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        /* Fixed: corporate blue text on hover */
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 28px rgba(0, 102, 204, 0.12) !important;
    }

    body.nav-style-megamenu .main-nav .nav-section-items .nav-item span {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: inherit !important;
        /* Fixed: inherits dark slate/blue from parent */
    }

    body.nav-style-megamenu .main-nav .nav-section-items .nav-item .material-symbols-outlined {
        font-size: 1.7rem !important;
        margin-bottom: 4px;
        color: var(--primary) !important;
        /* Primary blue icon */
    }

    /* Megamenu dark mode */
    [data-theme="dark"].nav-style-megamenu .main-nav .nav-section-items {
        background: rgba(30, 41, 59, 0.98) !important;
        border-top-color: rgba(255, 255, 255, 0.1) !important;
        border-bottom-color: #3b82f6 !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
    }

    [data-theme="dark"].nav-style-megamenu .main-nav .nav-section-items .nav-item {
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #f1f5f9 !important;
    }

    [data-theme="dark"].nav-style-megamenu .main-nav .nav-section-items .nav-item:hover {
        background: rgba(59, 130, 246, 0.22) !important;
        border-color: #3b82f6 !important;
    }
}

/* Reposicionar el badge de Dioptrisoft en modo Sidebar Dock para que no se corte */
body.nav-style-dock .dioptrisoft-floating-badge {
    left: auto !important;
    right: 24px !important;
    top: 16px !important;
    z-index: 100000 !important;
}

/* ==========================================================================
   SAFETY CONSTRAINTS FOR CUSTOM PAYMENT METHOD LOGOS (PREVENT OVERFLOWS)
   ========================================================================== */

/* Finanzas Legend icons */
#reporte-metodos-pago img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* POS payment options selector icons */
#pago-selector-panel .pago-icon img,
#hist-pago-selector-panel .pago-icon img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* POS selected payment icon display */
#pago-icon-display img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

/* Mixed payment breakdown field icons */
.mixto-icon img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

/* History filter/list icons */
.hist-pago-icon img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Safety constraints for custom payment method logos inside quick jump and tags */
.historial-quickjump-panel img,
.hqj-sub img,
.tag-base img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* ==========================================
   COTIZACIONES - LAYOUT RESPONSIVO
   ========================================== */
.cot-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
}

.cot-layout-grid > * {
    min-width: 0;
}

.cot-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cot-add-product-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.cot-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 5px;
}

@media (max-width: 860px) {
    .cot-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #view-cotizaciones {
        padding: 8px 4px !important;
    }
    #view-cotizaciones .st-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .cot-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .cot-form-grid .cot-col-span-2 {
        grid-column: span 1 !important;
    }
    .cot-add-product-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .cot-add-product-row .cot-add-btn {
        grid-column: span 2 !important;
        width: 100% !important;
    }
    .cot-actions-grid {
        gap: 8px !important;
    }
    .cot-actions-grid button {
        font-size: 0.82rem !important;
        padding: 10px 8px !important;
    }
}

/* ==========================================
   PANEL GASTOS - FIX SCROLL EN MOVIL
   Evita que el swipe horizontal sobre la tabla
   active la navegacion "atras" del navegador
   ========================================== */
#contabilidad-panel-gastos {
    overflow-x: hidden;
    touch-action: pan-y;
}

#contenedor-gastos-historial {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    touch-action: pan-x pan-y;
}

#contenedor-gastos-historial table {
    min-width: 600px;
}

@media (min-width: 901px) {
    body.nav-style-floating .main-nav,
    body.nav-style-floating .nav-center,
    body.nav-style-megamenu .main-nav,
    body.nav-style-megamenu .nav-center {
        overflow: visible !important;
    }
}

/* Customizer Card hover effects */
.customizer-card:hover {
    border-color: var(--primary) !important;
    background: rgba(0, 102, 204, 0.04) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"] .customizer-card:hover,
html[data-theme="dark"] .customizer-card:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════
   EXÁMENES ESPECIALES — pestaña de la Historia Clínica
   (js/modules/examenes-especiales.js)
   ════════════════════════════════════════════════════════════ */
.exesp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 7px;
}

.exesp-pill {
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    padding: 7px 11px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.74rem;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: all 0.18s;
}

.exesp-pill:hover {
    background: var(--card-bg);
    color: var(--text);
}

.exesp-pill.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 102, 204, 0.35);
}

.exesp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
}

.exesp-pill.has-data .exesp-dot { display: block; }
.exesp-pill.active .exesp-dot { background: #fff; }

.exesp-panel { display: none; animation: exespFadeUp 0.22s ease; }
.exesp-panel.active { display: block; }

@keyframes exespFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.exesp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .exesp-grid2 { grid-template-columns: 1fr; }
}

.exesp-ojo {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.exesp-ojo-tag {
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    color: var(--primary);
    display: block;
    margin-bottom: 6px;
}

.exesp-lbl {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 8px 0 4px;
}

.exesp-input {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
}

.exesp-input:focus {
    outline: 2px solid var(--primary);
    border-color: transparent;
}

.exesp-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    margin: 8px 0 0;
}

.exesp-alerta {
    display: none;
    margin-top: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    padding: 4px 9px;
    border-radius: 7px;
}

.exesp-alerta.visible { display: inline-block; }

/* ── Lienzo ocular ── */
.exesp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.exesp-tool {
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

.exesp-tool.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.exesp-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
}

.exesp-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    cursor: pointer;
    outline: 1px solid var(--border);
    display: inline-block;
}

.exesp-swatch.active { outline: 2.5px solid var(--primary); }

.exesp-rng {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-light);
}

.exesp-rng input[type=range] {
    width: 64px;
    accent-color: var(--primary);
}

.exesp-est-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
}

.exesp-est-toggle button {
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.72rem;
    background: var(--card-bg);
    color: var(--text-light);
}

.exesp-est-toggle button.active {
    background: var(--secondary);
    color: #fff;
}

.exesp-boards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 760px) {
    .exesp-boards { grid-template-columns: 1fr; }
}

.exesp-board {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
}

.exesp-bd-head b {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--primary);
}

.exesp-board svg {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-top: 6px;
}

.exesp-hide-anno .exesp-anno { display: none; }

.exesp-hallazgos {
    margin: 8px 0 0;
    padding-left: 4px;
    font-size: 0.72rem;
    list-style: none;
}

.exesp-hallazgos li { margin: 3px 0; color: var(--text-light); }

.exesp-hzdot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

#exesp-nota-flotante {
    position: fixed;
    z-index: 100000;
    display: none;
    background: var(--card-bg);
    border: 1px solid var(--primary);
    border-radius: 9px;
    padding: 7px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#exesp-nota-flotante input {
    width: 200px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.82rem;
}

/* ── Switch caso crítico ── */
.exesp-critico {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    cursor: pointer;
    user-select: none;
}

.exesp-critico input { display: none; }

.exesp-track {
    width: 42px;
    height: 23px;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.exesp-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.exesp-critico input:checked + .exesp-track { background: #ef4444; }
.exesp-critico input:checked + .exesp-track::after { left: 22px; }

.exesp-critico b { font-size: 0.8rem; color: var(--text); }
.exesp-critico input:checked ~ b { color: #ef4444; }

/* ── Pestaña Oftalmología (js/modules/oftalmologia-module.js) ── */
.oft-sec {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.oft-sec-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.oft-sec-title .material-symbols-outlined { font-size: 1.1rem; }

.oft-fila {
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 7px;
}

.oft-fila-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
}

.oft-fila-head {
    margin-bottom: 4px;
}

.oft-fila-head > div {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--primary);
    text-align: center;
}

@media (max-width: 640px) {
    .oft-fila { grid-template-columns: 1fr; gap: 4px; }
    .oft-fila-head { display: none; }
}

/* ============================================================
   NAV V3 — DISEÑO ORGANIZADO (referencia imagen objetivo)
   Nav más alta, logo como card blanca, items más espaciosos,
   flecha derecha en secciones, botones de acción como pills.
   ============================================================ */

/* 1. NAV: altura controlada */
.main-nav {
    min-height: 76px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: visible !important;
}


/* 2. BRAND CONTAINER: centrar logo con el texto de dioptrisoft y reducir ancho de columna */
.brand,
body.custom-tenant .brand,
body:not(.custom-tenant) .brand {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra horizontalmente la tarjeta blanca con el texto powered-by */
    justify-content: center !important;
    margin-top: 8px !important; /* Deja espacio arriba para el texto powered-by */
    transition: margin-left 0.3s ease !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

body.nav-logo-center .brand {
    align-items: center !important;
}

/* Si es un logo cuadrado individual con texto largo, le damos espacio a la izquierda para poder centrar el powered-by sin cortarse */
.brand.brand-square-long-text,
body.custom-tenant .brand.brand-square-long-text,
body:not(.custom-tenant) .brand.brand-square-long-text {
    margin-left: 62px !important;
}

/* POWERED BY DIOPTRISOFT: posicionado absoluto y perfectamente centrado */
.brand-powered,
body.custom-tenant .brand-powered,
body:not(.custom-tenant) .brand-powered {
    position: absolute !important;
    top: -16px !important; /* Colocado perfectamente arriba del card blanco */
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.brand-inner,
body.custom-tenant .brand-inner,
body:not(.custom-tenant) .brand-inner {
    background: white !important;
    border-radius: var(--logo-radius, 18px) !important; /* Forma configurable desde el panel admin */
    overflow: hidden !important;
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    /* NO transicionar el tamaño (width/height): al aplicar el ajuste guardado
       hacía que el logo "creciera" animándose al cargar. Solo animamos lo visual. */
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease !important;
    margin-right: 12px !important;
}

/* LOGO BOX: simple contenedor transparente dentro de la card */
.brand-logo-box,
body.custom-tenant .brand-logo-box,
body:not(.custom-tenant) .brand-logo-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Imagen del logo dentro del card */
.brand-logo-box img,
body.custom-tenant .brand-logo-box img,
body:not(.custom-tenant) .brand-logo-box img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    padding: 0 !important;
    filter: none !important;
}

/* ==================== A. DISEÑO PARA LOGO RECTANGULAR LARGO ==================== */
/* Ancho configurable desde el panel admin (default 180px). Sin padding para que
   el logo llene la tarjeta igual que en la vista previa del panel (sin borde blanco). */
.brand-inner.layout-rectangular {
    width: var(--logo-card-w, 180px) !important;
    height: 64px !important;
    padding: 0 !important;
}

.brand-inner.layout-rectangular .brand-logo-box {
    width: 100% !important;
    height: 100% !important;
}

.brand-inner.layout-rectangular .brand-logo-box img {
    width: 100% !important;
    height: 100% !important;
    /* Modo, zoom y posición configurables desde el panel admin (sirve para logos anchos) */
    object-fit: var(--logo-fit, contain) !important;
    object-position: var(--logo-pos-x, 50%) var(--logo-pos-y, 50%) !important;
    transform: scale(var(--logo-zoom, 1)) !important;
}

.brand-inner.layout-rectangular .brand-name,
body.custom-tenant .brand-inner.layout-rectangular .brand-name,
body:not(.custom-tenant) .brand-inner.layout-rectangular .brand-name {
    display: none !important;
}

/* ==================== B. DISEÑO PARA LOGO CUADRADO / ICONO ==================== */
/* El logo cuadrado tiene ancho dinámico y se acerca más a Inicio al no ocupar espacio extra */
.brand-inner:not(.layout-rectangular) {
    width: auto !important;
    min-width: 76px !important;
    max-width: 220px !important;
    height: 72px !important;
    padding: 5px 12px !important;
    justify-content: flex-start !important;
}

.brand-inner:not(.layout-rectangular) .brand-logo-box {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
}

.brand-inner:not(.layout-rectangular) .brand-logo-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--logo-fit, contain) !important; /* Configurable desde panel admin */
    object-position: var(--logo-pos-x, 50%) var(--logo-pos-y, 50%) !important;
    transform: scale(var(--logo-zoom, 1)) !important;
}

.brand-inner:not(.layout-rectangular) .brand-name,
body.custom-tenant .brand-inner:not(.layout-rectangular) .brand-name,
body:not(.custom-tenant) .brand-inner:not(.layout-rectangular) .brand-name {
    display: block !important;
    color: #0f172a !important; /* Color pizarra oscuro para máxima legibilidad sobre fondo blanco */
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 850 !important;
    font-size: 0.72rem !important; /* Tamaño compacto para encajar perfectamente */
    letter-spacing: 0.2px !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Máximo 2 líneas de texto */
    -webkit-box-orient: vertical !important;
    text-align: left !important;
}

/* Para logos cuadrados/redondos con nombre largo oculto: tarjeta RECTANGULAR
   con el logo ampliado y centrado. Se usa object-fit: contain para que un logo
   redondo se vea completo (sin recortes) y a la vez más grande/cerca que antes. */
.brand-inner:not(.layout-rectangular).long-text {
    width: var(--logo-card-w, 112px) !important;
    height: 76px !important;
    min-width: var(--logo-card-w, 112px) !important;
    max-width: var(--logo-card-w, 112px) !important;
    padding: 0 !important;
    background: white !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.brand-inner:not(.layout-rectangular).long-text .brand-logo-box {
    width: 100% !important;
    height: 100% !important;
}

.brand-inner:not(.layout-rectangular).long-text .brand-logo-box img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    /* Estos valores se ajustan desde el panel admin (Ajuste del logo) */
    object-fit: var(--logo-fit, contain) !important;
    object-position: var(--logo-pos-x, 50%) var(--logo-pos-y, 50%) !important;
    transform: scale(var(--logo-zoom, 1)) !important;
    border-radius: 12px !important;
}

.brand-inner.long-text .brand-name,
body.custom-tenant .brand-inner.long-text .brand-name,
body:not(.custom-tenant) .brand-inner.long-text .brand-name {
    display: none !important;
}

/* ── Fix móvil: logo long-text no debe sobresalir del nav (min-height:64px) ── */
@media (max-width: 768px) {
    .brand-inner:not(.layout-rectangular).long-text {
        height: 50px !important;
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        border-radius: 8px !important;
    }
}

/* 4. NAV-ITEMS: altura proporcional a la nav */
.nav-item {
    min-height: 66px !important;
    padding: 7px 13px !important;
    min-width: 68px !important;
    gap: 4px !important;
}

.nav-item .material-symbols-outlined {
    font-size: 1.4rem !important;
}

/* Tab activo: NO translate para evitar recorte — elevación visual por sombra */
.nav-item.active {
    transform: none !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 2px 8px rgba(0, 0, 0, 0.10),
        0 0 0 2px rgba(255, 255, 255, 0.35) !important;
    border-radius: 16px !important;
}

/* Items dentro de sección expandida: glass sutil sin translate */
.nav-section-collapsible:not(.collapsed) .nav-section-items .nav-item:not(.active) {
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transform: none !important;
}

/* Hover dentro de sección expandida */
.nav-section-collapsible:not(.collapsed) .nav-section-items .nav-item:not(.active):hover {
    transform: scale(1.08) translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--primary) !important;
}

/* 5. NAV-SECTION-TOGGLE: proporcional a los items */
.nav-section-toggle {
    min-height: 66px !important;
    padding: 7px 14px !important;
    min-width: 64px !important;
    font-size: 0.64rem !important;
    gap: 4px !important;
}

/* 6. Flechas: dejar comportamiento original (< colapsada, ∨ expandida) */

/* 7. BARRA DE BÚSQUEDA: pill ancho visible con "Buscar..." */
#btn-global-search {
    border-radius: 50px !important;
    padding: 10px 18px !important;
    min-height: 42px !important;
    width: 210px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    margin-right: 4px !important;
    cursor: text !important;
}

#btn-global-search::after {
    content: 'Buscar...' !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
}

#btn-global-search:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

#btn-global-search .material-symbols-outlined {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.70) !important;
    flex-shrink: 0 !important;
}

/* CAMPANA: pill circular compacta */
#btn-system-updates {
    border-radius: 50px !important;
    padding: 10px 14px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

#btn-system-updates:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

#btn-system-updates .material-symbols-outlined {
    font-size: 1.3rem !important;
}

/* ============================================================
   NAV SECTIONS V2 — EFECTOS PREMIUM (mantiene estructura
   horizontal inline, mejora hover, glow y animaciones)
   ============================================================ */

/* Toggle: hover más pronunciado, igual que nav-item */
.nav-section-toggle {
    transition: background 0.25s ease, color 0.2s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease !important;
}

.nav-section-toggle:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--primary) !important;
    transform: scale(1.08) translateY(-3px) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
    border-radius: 14px !important;
}

/* Sección con item activo: glow blanco más visible */
.nav-section-collapsible.has-active {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.50) !important;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.22),
        0 4px 20px rgba(0,0,0,0.15),
        0 0 18px rgba(255,255,255,0.18) inset !important;
    animation: none !important;
}

/* Indicador luminoso bajo el toggle cuando hay activo y está colapsado - Removido para evitar el doble punto brillante
.nav-section-collapsible.collapsed.has-active .nav-section-toggle::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: white !important;
    box-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 16px rgba(255,255,255,0.55) !important;
    animation: activeDot 2.5s ease-in-out infinite !important;
}
*/

/* Sección expandida: realzar el contenedor */
.nav-section-collapsible:not(.collapsed) {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.14),
        0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Shimmer sutil en el toggle de la sección activa */
.nav-section-collapsible.has-active .nav-section-toggle {
    background: rgba(255,255,255,0.18) !important;
    color: white !important;
    font-weight: 900 !important;
}

/* Flecha de la sección activa más visible */
.nav-section-collapsible.has-active .nav-section-arrow {
    opacity: 1 !important;
}

/* Entrada de items con micro-animación al expandir */
.nav-section-collapsible:not(.collapsed) .nav-item {
    animation: navItemFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes navItemFadeIn {
    from { opacity: 0; transform: scale(0.85) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Escalonar la entrada de cada item */
.nav-section-collapsible:not(.collapsed) .nav-item:nth-child(1) { animation-delay: 0ms; }
.nav-section-collapsible:not(.collapsed) .nav-item:nth-child(2) { animation-delay: 40ms; }
.nav-section-collapsible:not(.collapsed) .nav-item:nth-child(3) { animation-delay: 80ms; }
.nav-section-collapsible:not(.collapsed) .nav-item:nth-child(4) { animation-delay: 120ms; }
.nav-section-collapsible:not(.collapsed) .nav-item:nth-child(5) { animation-delay: 160ms; }

/* ============================================================
   WIDGET DE CLIMA INTERACTIVO (DASHBOARD GREETING)
   ============================================================ */

.dxp-weather-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 14px;
    padding: 4px 14px 4px 4px;
    cursor: pointer;
    transition: background 0.18s;
    user-select: none;
    z-index: 10;
    background: transparent;
    border: none;
    box-shadow: none;
}

.dxp-weather-widget:hover {
    background: rgba(79, 70, 229, 0.06);
}

/* Windows-style weather body */
.dxp-wth-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dxp-wth-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}

.dxp-wth-icon .weather-svg,
.dxp-wth-icon svg {
    width: 42px !important;
    height: 42px !important;
}

.dxp-wth-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dxp-wth-temp {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.5px;
    line-height: 1.1;
    font-feature-settings: "tnum";
}

.dxp-wth-city {
    font-size: 0.72rem;
    font-weight: 550;
    color: #64748b;
    letter-spacing: 0.2px;
    margin-top: 3px;
}

/* Popover de pronóstico */
.dxp-weather-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
    z-index: 999999 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dxp-weather-popover.visible,
.dxp-weather-widget:hover .dxp-weather-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
}

/* Hover bridge for seamless mouse transition */
.dxp-weather-popover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    pointer-events: auto;
}

.dxp-weather-pop-city {
    font-size: 0.76rem;
    font-weight: 700;
    color: #4f46e5;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.dxp-weather-pop-details {
    display: flex;
    gap: 12px;
    margin: 8px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px 0;
}

.dxp-weather-pop-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
}

.dxp-weather-pop-item .material-symbols-outlined {
    font-size: 1.05rem;
    color: #64748b;
}

.dxp-weather-pop-desc {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
}

/* Flecha del popover */
.dxp-weather-popover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

/* Estilos de gradientes dinámicos del widget */
.dxp-weather-sunny {
    --wx: #f59e0b;
    background: linear-gradient(135deg, rgba(254, 240, 138, 0.6) 0%, rgba(251, 191, 36, 0.18) 100%) !important;
    border-color: rgba(234, 179, 8, 0.38) !important;
}
.dxp-weather-night {
    --wx: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.24) 0%, rgba(167, 139, 250, 0.08) 100%) !important;
    border-color: rgba(139, 92, 246, 0.34) !important;
}
.dxp-weather-cloudy {
    --wx: #94a3b8;
    background: linear-gradient(135deg, rgba(226, 232, 240, 0.85) 0%, rgba(203, 213, 225, 0.32) 100%) !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
}
.dxp-weather-rainy {
    --wx: #3b82f6;
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.62) 0%, rgba(147, 197, 253, 0.26) 100%) !important;
    border-color: rgba(96, 165, 250, 0.38) !important;
}
.dxp-weather-stormy {
    --wx: #64748b;
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.26) 0%, rgba(71, 85, 105, 0.10) 100%) !important;
    border-color: rgba(71, 85, 105, 0.38) !important;
}

/* ============================================================
   WELCOME CARD DEL DASHBOARD (GREETING BANNER)
   ============================================================ */

.dxp-welcome-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
    overflow: visible;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    height: 60px;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dxp-wc-col-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    gap: 2px;
}

/* El saludo grande */
.dxp-welcome-card .dxp-hi {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #0f172a;
    text-transform: uppercase;
    line-height: 1.1;
    transition: color 0.4s;
    position: relative;
    z-index: 2;
}

.dxp-welcome-card .dxp-hi b {
    background: linear-gradient(120deg, #3b82f6, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* El subtítulo con la fecha */
.dxp-welcome-card .dxp-date-row {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.dxp-welcome-card .dxp-date {
    color: #64748b;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    transition: color 0.4s;
}

/* El clima como tarjeta interna */
.dxp-welcome-card .dxp-weather-widget {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 10px;
    padding: 4px 12px;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0;
    position: relative;
    z-index: 10;
}

.dxp-welcome-card .dxp-weather-widget:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.09) 0%, rgba(139, 92, 246, 0.09) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05);
}

.dxp-welcome-card .dxp-wth-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dxp-welcome-card .dxp-wth-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dxp-welcome-card .dxp-wth-icon svg,
.dxp-welcome-card .dxp-wth-icon .weather-svg {
    width: 28px !important;
    height: 28px !important;
}

.dxp-welcome-card .dxp-wth-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dxp-welcome-card .dxp-wth-temp {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.dxp-welcome-card .dxp-wth-city {
    font-size: 0.6rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.2px;
    text-transform: capitalize;
}

/* Z-index del clima en la card para evitar que quede tapado */
.dxp-top {
    position: relative;
    z-index: 150 !important; /* Asegurar que la fila de arriba esté sobre los KPI cards */
}

/* Ajustes de posición para el popover en la card */
.dxp-welcome-card .dxp-weather-popover {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(8px) !important;
    z-index: 999999 !important;
}

.dxp-welcome-card .dxp-weather-popover.visible,
.dxp-welcome-card .dxp-weather-widget:hover .dxp-weather-popover {
    transform: translateY(0) !important;
}

/* ============================================================
   TEMAS DINÁMICOS DE LA WELCOME CARD
   ============================================================ */

/* 1. Soleado / Día Despejado — tono muy suave para no saturar el UI */
.dxp-welcome-card.theme-sunny {
    background: linear-gradient(135deg, #ffffff 0%, #fffef8 100%) !important;
    border-color: rgba(253, 224, 71, 0.2) !important;
}
.dxp-welcome-card.theme-sunny::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.18) 0%, rgba(253, 224, 71, 0) 70%);
    border-radius: 50%;
    animation: sun-flare 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

/* 2. Noche Despejada (Light Premium Night Theme) */
.dxp-welcome-card.theme-night {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
.dxp-welcome-card.theme-night .dxp-hi {
    color: #0f172a !important;
}
.dxp-welcome-card.theme-night .dxp-hi b {
    background: linear-gradient(120deg, #4f46e5, #0ea5e9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.dxp-welcome-card.theme-night .dxp-date {
    color: var(--muted) !important;
}
.dxp-welcome-card.theme-night .dxp-date-sep {
    color: var(--soft) !important;
}
.dxp-welcome-card.theme-night::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle, #cbd5e1 0.5px, transparent 0.5px),
        radial-gradient(circle, #cbd5e1 0.8px, transparent 0.8px);
    background-size: 50px 50px, 70px 70px;
    background-position: 10px 10px, 30px 20px;
    animation: stars-twinkle 5s ease-in-out infinite alternate;
    opacity: 0.3;
    pointer-events: none;
    border-radius: 20px;
    z-index: 1;
}

/* 3. Nublado */
.dxp-welcome-card.theme-cloudy {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}
.dxp-welcome-card.theme-cloudy::before {
    display: none !important;
}

/* 4. Lluvioso */
.dxp-welcome-card.theme-rainy {
    background: linear-gradient(135deg, #f4fbf7 0%, #e0f2fe 100%) !important;
    border-color: rgba(186, 230, 253, 0.8) !important;
}
.dxp-welcome-card.theme-rainy::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(96, 165, 250, 0.15) 1px, transparent 1px);
    background-size: 18px 24px;
    animation: rain-fall 1.5s linear infinite;
    opacity: 0.8;
    pointer-events: none;
    border-radius: 20px;
    z-index: 1;
}

/* 5. Tormentas */
.dxp-welcome-card.theme-stormy {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    animation: storm-lightning 12s ease-in-out infinite;
}

/* Keyframes adicionales de la card */
@keyframes sun-flare {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.25); opacity: 0.85; }
}
@keyframes stars-twinkle {
    0% { opacity: 0.15; }
    100% { opacity: 0.45; }
}
@keyframes cloud-drift {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-20px) translateY(-5px); }
}
@keyframes rain-fall {
    0% { background-position: 0px 0px; }
    100% { background-position: 18px 72px; }
}
@keyframes storm-lightning {
    0%, 94%, 96%, 100% { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); }
    95% { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); filter: brightness(1.05); }
}

/* ============================================================
   ANIMACIONES DE LOS ICONOS DEL CLIMA
   ============================================================ */

.weather-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: saturate(1.18) drop-shadow(0 2px 3px rgba(15, 23, 42, 0.14));
}

/* 1. Sol: rotar continuamente */
.weather-svg.sunny {
    animation: weather-spin 25s linear infinite;
}
@keyframes weather-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. Luna: balanceo sutil y estrellas titilantes */
.weather-svg.night {
    animation: weather-sway 4s ease-in-out infinite alternate;
}
@keyframes weather-sway {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 3. Nubes: flotar arriba y abajo */
.weather-svg.cloudy {
    animation: weather-float 3.5s ease-in-out infinite alternate;
}
@keyframes weather-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2px); }
}

/* 4. Lluvia: gotas cayendo */
.weather-svg.rainy {
    animation: weather-float 3.5s ease-in-out infinite alternate;
}
.weather-svg.rainy .drop {
    stroke-dasharray: 2 4;
    stroke-dashoffset: 0;
    animation: weather-rain 1.2s linear infinite;
}
.weather-svg.rainy .drop-1 { animation-delay: 0s; }
.weather-svg.rainy .drop-2 { animation-delay: 0.4s; }
.weather-svg.rainy .drop-3 { animation-delay: 0.8s; }

@keyframes weather-rain {
    0% { stroke-dashoffset: 0; opacity: 0.45; }
    30% { opacity: 1; }
    100% { stroke-dashoffset: -8; opacity: 0.45; }
}

/* 5. Tormenta: relámpago parpadeante */
.weather-svg.stormy {
    animation: weather-shake 6s ease-in-out infinite alternate;
}
.weather-svg.stormy .lightning {
    animation: weather-flash 4s ease-in-out infinite;
}
@keyframes weather-shake {
    0%, 90% { transform: translateY(0); }
    93% { transform: translateY(-1px) translateX(0.5px); }
    96% { transform: translateY(1px) translateX(-0.5px); }
    100% { transform: translateY(0); }
}
@keyframes weather-flash {
    0%, 85%, 90%, 100% { opacity: 0; }
    86%, 89% { opacity: 1; }
}

/* Dot loading animation */
.dxp-weather-loading-dot {
    width: 6px;
    height: 6px;
    background: #4f46e5;
    border-radius: 50%;
    animation: weather-dot-pulse 1s infinite alternate;
}
@keyframes weather-dot-pulse {
    from { transform: scale(0.6); opacity: 0.4; }
    to { transform: scale(1.3); opacity: 1; }
}

/* ============================================================
   BUSCADOR GLOBAL INLINE MAC-STYLE
   ============================================================ */

.inline-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.inline-search-pill {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: default;
    height: 38px;
    width: 260px; /* Always expanded */
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    padding-left: 12px;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.inline-search-pill:hover,
.inline-search-pill:focus-within {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.inline-search-pill:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}

.inline-search-pill .inline-search-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.85);
}

.inline-search-pill input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: white;
    font-size: 0.9rem;
    width: 100%;
    opacity: 1; /* Always visible */
    padding: 0;
    margin: 0 0 0 8px;
    font-family: inherit;
    pointer-events: auto; /* Always interactive */
}

.inline-search-pill input:focus,
.inline-search-pill input:active,
.inline-search-pill input:-webkit-autofill {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.inline-search-pill input::selection {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.inline-search-pill input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.inline-search-pill .inline-search-close {
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.75;
    pointer-events: auto;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    color: rgba(255, 255, 255, 0.75);
    margin-right: 10px;
}

.inline-search-pill .inline-search-close:hover {
    color: white;
    opacity: 1;
    transform: scale(1.15);
}

.inline-search-wrapper .inline-search-dropdown {
    display: none !important;
}

.inline-search-pill {
    overflow: hidden;
    transform-origin: center;
    transition:
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.32s ease !important;
}

.inline-search-wrapper.search-focus-glow .inline-search-pill,
.inline-search-wrapper.active .inline-search-pill {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18),
        0 0 0 4px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.inline-search-wrapper.search-click-pop .inline-search-pill {
    animation: mac-search-pop 0.52s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.inline-search-wrapper.search-click-pop .inline-search-icon {
    animation: mac-search-lens 0.52s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.inline-search-pill .inline-search-icon {
    transition: transform 0.24s ease, color 0.24s ease, filter 0.24s ease;
}

.inline-search-pill:hover .inline-search-icon,
.inline-search-wrapper.active .inline-search-icon {
    color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.65));
    transform: scale(1.08) rotate(-8deg);
}

@keyframes mac-search-pop {
    0% { transform: scale(1); }
    42% { transform: scale(1.105); }
    70% { transform: scale(0.982); }
    100% { transform: scale(1.035); }
}

@keyframes mac-search-lens {
    0% { transform: scale(1) rotate(0deg); }
    38% { transform: scale(1.32) rotate(-16deg); }
    72% { transform: scale(0.96) rotate(5deg); }
    100% { transform: scale(1.08) rotate(-8deg); }
}

#global-search-floating-panel {
    animation: global-search-panel-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#global-search-floating-panel .search-result-item {
    transition: background-color 0.18s ease, transform 0.18s ease;
}

#global-search-floating-panel .search-result-item:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: translateX(3px);
}

#global-search-floating-panel mark {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.55), rgba(251, 191, 36, 0.35));
    color: inherit;
    border-radius: 5px;
    padding: 0 2px;
}

.global-search-flash-target {
    animation: global-search-flash-target 1.8s ease-in-out 1;
    position: relative;
    z-index: 2;
}

@keyframes global-search-flash-target {
    0%, 100% {
        box-shadow: none;
        outline: 0 solid transparent;
    }
    18%, 72% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22), 0 12px 34px rgba(37, 99, 235, 0.20);
        outline: 2px solid rgba(59, 130, 246, 0.55);
        outline-offset: 3px;
    }
}

@keyframes global-search-panel-in {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown popover */
.inline-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 440px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 99999;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inline-search-wrapper.active.has-results .inline-search-dropdown,
.inline-search-wrapper.active.has-query .inline-search-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Scrollable container for results */
.inline-search-dropdown #global-search-results {
    max-height: 380px;
    overflow-y: auto;
    background: transparent;
}

/* Search results item styling */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
    text-align: left;
}

.search-result-item:hover, .search-result-item.selected {
    background: rgba(59, 130, 246, 0.08);
}

.search-result-item.selected {
    border-left: 4px solid var(--primary, #3b82f6);
    padding-left: 12px;
}

/* Premium footer design */
.inline-search-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(248, 250, 252, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.72rem;
    color: #64748b;
    user-select: none;
}

.inline-search-footer kbd {
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: inherit;
    font-size: 0.68rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    margin-right: 2px;
}

.inline-search-footer .shortcut-hints {
    display: flex;
    gap: 12px;
}

.inline-search-footer .search-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.inline-search-footer .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    transition: background-color 0.3s;
}

.inline-search-footer .status-dot.loading {
    background: #3b82f6;
    animation: pulse-dot-search 1.2s infinite;
}

@keyframes pulse-dot-search {
    0% { transform: scale(0.85); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.5; }
}

/* Dark theme overrides */
[data-theme="dark"] .inline-search-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .inline-search-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .inline-search-dropdown {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .inline-search-dropdown #global-search-results {
    background: transparent;
}

[data-theme="dark"] .search-result-item:hover, 
[data-theme="dark"] .search-result-item.selected {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .inline-search-footer {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

[data-theme="dark"] .inline-search-footer kbd {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

/* ── Prevenir scroll horizontal en móvil ── */
@media (max-width: 768px) {
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ── Mobile nav brand overrides (must be LAST to beat high-specificity rules above) ── */
@media (max-width: 768px) {
    /* powered-by: OCULTO en nav móvil — solo visible en el drawer */
    .brand-powered,
    body.custom-tenant .brand-powered,
    body:not(.custom-tenant) .brand-powered {
        display: none !important;
    }
    /* Brand container: pegado izquierda, sin transform inline del nav-editor */
    .brand,
    body.custom-tenant .brand,
    body:not(.custom-tenant) .brand {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        position: relative !important;
    }
    /* Nav-content: cero gap, items pegados */
    .nav-content {
        gap: 0 !important;
    }
    /* Brand-inner: sin margen derecho */
    .brand-inner,
    body.custom-tenant .brand-inner,
    body:not(.custom-tenant) .brand-inner {
        margin-right: 0 !important;
    }
    /* Nav-actions toma todo el espacio restante */
    .nav-actions {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
    }
    /* Search pill ocupa el espacio disponible dentro de nav-actions */
    .inline-search-wrapper {
        flex: 1 1 0 !important;
        min-width: 60px !important;
        max-width: 200px !important;
        margin-right: 4px !important;
    }
    .inline-search-pill {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* brand-square-long-text tiene especificidad (0,2,0) vs la regla .brand (0,1,0)
       arriba — el !important no alcanza a ganar en especificidad, por lo que el
       margin-left:62px sigue aplicando y causa overflow horizontal en móvil. */
    .brand.brand-square-long-text,
    body.custom-tenant .brand.brand-square-long-text,
    body:not(.custom-tenant) .brand.brand-square-long-text {
        margin-left: 0 !important;
    }
    /* El .tab-view base tiene padding:0 16px que no se anula en móvil.
       Solo para el dashboard, lo quitamos para que el .dxp tenga más espacio. */
    #view-inicio {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* Origen verificable para citas creadas desde el portal público. */
.cita-card-origin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin: 7px 0 2px;
    padding: 4px 9px;
    border: 1px solid rgba(8, 119, 209, .2);
    border-radius: 999px;
    background: rgba(8, 119, 209, .08);
    color: #0868b7;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.cita-card-origin .material-symbols-outlined {
    font-size: 14px;
}

.cita-card-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .2);
    color: #664814;
    font-size: .72rem;
    line-height: 1.35;
}

.cita-card-detail.is-referral {
    background: rgba(16, 185, 129, .07);
    border-color: rgba(16, 185, 129, .19);
    color: #176348;
}

.cita-card-detail > .material-symbols-outlined { font-size: 16px; margin-top: 1px; }
.cita-card-detail div { display: grid; gap: 2px; }
.cita-card-detail strong { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }