/* ═══════════════════════════════════════════════════════════════
   FuXion Bot — app.css
   Paleta propia (verde bosque + los 6 colores reales del catálogo
   FuXion), no la índigo/slate genérica de plantilla.
   Fuentes: Fraunces (display, orgánica) + Manrope (UI/cuerpo) +
   JetBrains Mono (datos/números)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
    --sidebar-w: 260px;
    --topbar-h: 64px;

    --color-bg:        #F5F8F4;
    --color-surface:   #FFFFFF;
    --color-border:    #E1EAE3;
    --color-text:      #16261E;
    --color-muted:     #6B8577;
    --color-primary:   #1F4B3F;
    --color-primary-h: #16362D;
    --color-success:   #4CAF6D;
    --color-warning:   #E8A33D;
    --color-danger:    #D64545;
    --color-info:      #2C8AA6;

    --sidebar-bg:      #0E1F17;
    --sidebar-text:    rgba(255,255,255,.72);
    --sidebar-active:  #2D6E5A;
    --sidebar-hover:   rgba(255,255,255,.06);

    --shadow-sm:  0 1px 3px rgba(16,38,28,.07);
    --shadow-md:  0 4px 16px rgba(16,38,28,.09);
    --shadow-lg:  0 10px 40px rgba(16,38,28,.16);

    --radius:     14px;
    --radius-sm:  9px;
    --transition: .2s ease;
}

[data-bs-theme="dark"] {
    --color-bg:      #0B1510;
    --color-surface: #12201A;
    --color-border:  #22352B;
    --color-text:    #E7F1EA;
    --color-muted:   #86A091;
    --color-primary: #4CAF6D;
    --sidebar-bg:    #060D09;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    overflow-x: hidden;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════
   SIDEBAR
   ═══════════════════════════════ */
.sidebar {
    position: fixed;
    left: 0; top: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform var(--transition);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-icon {
    width: 38px; height: 38px;
    background: var(--color-primary);
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(31,75,63,.4);
}
.brand-text {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 17px;
    color: #fff;
    letter-spacing: -.2px;
}

/* Nav */
.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
}
.nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    padding: 16px 8px 6px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition);
    position: relative;
    margin-bottom: 2px;
}
.nav-item i { font-size: 16px; flex-shrink: 0; }
.nav-item:hover {
    background: var(--sidebar-hover);
    color: #fff;
}
.nav-item.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31,75,63,.35);
}
.nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}
.nav-item.active .nav-badge { background: rgba(255,255,255,.25); }

/* Footer */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.user-avatar {
    width: 36px; height: 36px;
    background: var(--color-primary);
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: rgba(255,255,255,.4); font-size: 11px; }
.logout-btn { color: rgba(255,255,255,.4); text-decoration: none; font-size: 16px; transition: color var(--transition); }
.logout-btn:hover { color: var(--color-danger); }

/* ═══════════════════════════════
   MAIN WRAPPER
   ═══════════════════════════════ */
.main-wrapper {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition);
}

/* ═══════════════════════════════
   TOPBAR
   ═══════════════════════════════ */
.topbar {
    height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: var(--shadow-sm);
}
.sidebar-toggle {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
    display: none;
    transition: color var(--transition);
}
.sidebar-toggle:hover { color: var(--color-primary); }

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted);
    flex: 1;
}
.breadcrumb-home { color: var(--color-primary); }
.topbar-breadcrumb span:last-child { color: var(--color-text); font-weight: 600; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--color-muted);
}
.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--color-text);
    width: 160px;
    font-family: 'Manrope', sans-serif;
}

.topbar-btn {
    background: none;
    border: 1px solid var(--color-border);
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.topbar-btn:hover { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-primary); }
.notif-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

/* Notif Dropdown */
.notif-dropdown {
    width: 300px;
    padding: 0;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    overflow: hidden;
}
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
    cursor: pointer;
}
.notif-item:hover { background: var(--color-bg); }
.notif-item.unread { background: rgba(31,75,63,.04); }
.notif-item i { font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.notif-item small { color: var(--color-muted); }
.notif-footer {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
}
.notif-footer:hover { background: var(--color-bg); }

/* ═══════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════ */
.main-content {
    flex: 1;
    padding: 28px 28px 0;
}
.content-header { margin-bottom: 24px; }
.page-title {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -.3px;
}

/* ═══════════════════════════════
   CARDS
   ═══════════════════════════════ */
.card-dashboard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.card-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.card-dashboard-header h5 {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

/* KPI Cards */
.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform var(--transition), box-shadow var(--transition);
    animation: fadeInUp .4s ease both;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.kpi-icon.primary { background: rgba(31,75,63,.12); color: var(--color-primary); }
.kpi-icon.success { background: rgba(16,185,129,.12); color: var(--color-success); }
.kpi-icon.warning { background: rgba(245,158,11,.12); color: var(--color-warning); }
.kpi-icon.info    { background: rgba(6,182,212,.12);  color: var(--color-info); }
.kpi-body { flex: 1; }
.kpi-label { font-size: 12px; color: var(--color-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 600; margin: 4px 0; letter-spacing: -.5px; }
.kpi-change { font-size: 12px; font-weight: 600; }
.kpi-change.up   { color: var(--color-success); }
.kpi-change.down { color: var(--color-danger); }

/* ── Actividad ── */
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    color: #fff;
}
.activity-info { flex: 1; min-width: 0; }
.activity-user { font-weight: 600; font-size: 13px; }
.activity-action { color: var(--color-muted); font-size: 12px; }
.activity-time { font-size: 11px; color: var(--color-muted); white-space: nowrap; }

/* ── Accesos Rápidos ── */
.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--transition);
    text-align: center;
}
.quick-link i { font-size: 22px; }
.quick-link:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.quick-link:hover i { color: #fff !important; }

/* ── Progreso ── */
.progress { height: 8px; border-radius: 4px; background: var(--color-bg); }
.meta-item .progress-bar { border-radius: 4px; }

/* ═══════════════════════════════
   TABLA / DATATABLE
   ═══════════════════════════════ */
.table { color: var(--color-text); }
.table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-muted);
    border-bottom: 2px solid var(--color-border);
    padding: 12px 16px;
    white-space: nowrap;
}
.table tbody td { padding: 12px 16px; vertical-align: middle; border-color: var(--color-border); }
.table tbody tr:hover { background: rgba(31,75,63,.03); }

/* Solo Productos/Leads: permite partir texto largo sin espacios
   (mensajes de WhatsApp, nombres largos) para que el ancho se calcule
   bien. Acotado a estas 2 tablas para no afectar Ventas/Caja. */
#tablaProductos tbody td, #tablaLeads tbody td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* DataTables overrides */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
    color: var(--color-muted);
    font-size: 13px;
}
div.dataTables_wrapper div.dataTables_filter input {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 6px 12px;
}

/* ═══════════════════════════════
   BADGES DE ESTADO
   ═══════════════════════════════ */
.badge-estado {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.badge-activo    { background: rgba(16,185,129,.12); color: var(--color-success); }
.badge-inactivo  { background: rgba(113,128,150,.12); color: var(--color-muted); }
.badge-suspendido{ background: rgba(239,68,68,.12); color: var(--color-danger); }
.badge-agotado   { background: rgba(239,68,68,.12); color: var(--color-danger); }

.badge-admin     { background: rgba(31,75,63,.12); color: var(--color-primary); }
.badge-editor    { background: rgba(6,182,212,.12); color: var(--color-info); }
.badge-usuario   { background: rgba(245,158,11,.12); color: var(--color-warning); }

/* ═══════════════════════════════
   BOTONES
   ═══════════════════════════════ */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}
.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }

.btn-primary { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-primary:hover { background: var(--color-primary-h) !important; border-color: var(--color-primary-h) !important; }

.btn-accion {
    border: none;
    background: none;
    width: 30px; height: 30px;
    border-radius: 6px;
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 14px;
}
.btn-accion.edit  { color: var(--color-primary); }
.btn-accion.del   { color: var(--color-danger); }
.btn-accion:hover { transform: scale(1.15); background: var(--color-bg); }

/* ═══════════════════════════════
   MODAL
   ═══════════════════════════════ */
.modal-content {
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.modal-header { border-color: var(--color-border); padding: 20px; }
.modal-footer { border-color: var(--color-border); padding: 16px 20px; }
.form-control, .form-select {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}
.form-control:focus, .form-select:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31,75,63,.15);
    color: var(--color-text);
}
.form-label { font-weight: 600; font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; }

/* ═══════════════════════════════
   FOOTER
   ═══════════════════════════════ */
.main-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 28px;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    .main-wrapper {
        margin-left: 0;
    }
    .sidebar-toggle {
        display: grid;
    }
    .topbar-search { display: none; }
}

/* ── Overlay mobile ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}
.sidebar-overlay.visible { display: block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ═══════════════════════════════
   EXTENSIONES PROPIAS DE FUXION BOT
   (no tocan nada de arriba, solo agregan)
   ═══════════════════════════════ */

/* Puntos de color por línea de producto: son las categorías reales
   del catálogo FuXion, no decoración genérica del dashboard. */
.linea-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}
.linea-1 { background: #8DC63F; } /* Sistema Base */
.linea-2 { background: #00A99D; } /* Línea Inmunológica */
.linea-3 { background: #29ABE2; } /* Control de Peso */
.linea-4 { background: #92278F; } /* Anti-Edad */
.linea-5 { background: #EE3B34; } /* Vigor Mental */
.linea-6 { background: #1A1A1A; box-shadow: 0 0 0 2px #C6FF3D inset; } /* Sport */

/* Espectro FuXion: firma visual del panel, hecha con los 6 colores reales
   de las líneas del catálogo — no es decoración, es tu propio sistema de
   categorías. Aparece bajo el logo del sidebar. */
.espectro-fuxion {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0 18px;
}
.espectro-fuxion span { flex: 1; }
.espectro-fuxion span:nth-child(1) { background: #8DC63F; }
.espectro-fuxion span:nth-child(2) { background: #00A99D; }
.espectro-fuxion span:nth-child(3) { background: #29ABE2; }
.espectro-fuxion span:nth-child(4) { background: #92278F; }
.espectro-fuxion span:nth-child(5) { background: #EE3B34; }
.espectro-fuxion span:nth-child(6) { background: linear-gradient(90deg, #1A1A1A, #C6FF3D); }

/* Dos variantes más de kpi-icon, para las tarjetas de Ventas y Caja */
.kpi-icon.money  { background: rgba(16,185,129,.12); color: var(--color-success); }
.kpi-icon.purple { background: rgba(139,92,246,.12); color: #8b5cf6; }

/* Números monetarios: reutiliza la fuente mono que ya trae la plantilla */
.money { font-family: 'JetBrains Mono', monospace; }

/* Saldo de caja grande, mismo tratamiento que kpi-value pero más grande */
.caja-balance {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: -1px;
}
.caja-balance.positivo { color: var(--color-success); }
.caja-balance.negativo { color: var(--color-danger); }

/* Filas de presentación/línea de venta dinámicas (productos, ventas) */
.fila-dinamica {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 8px;
}

/* Nueva venta: cuadrícula propia para evitar que cantidad y precio se
   superpongan. Las columnas Bootstrap resultaban demasiado estrechas al
   sumar el prefijo monetario, gutters y el botón de eliminación. */
.item-venta {
    display: grid;
    grid-template-columns:
        minmax(210px, 5fr)
        minmax(150px, 3fr)
        minmax(78px, 1fr)
        minmax(132px, 1.7fr)
        38px;
    align-items: end;
    gap: 12px;
    min-width: 0;
}

.item-venta > * {
    min-width: 0;
}

.item-venta .field-caption {
    display: block;
    margin-bottom: 6px;
    line-height: 1.2;
}

.item-venta .select2-container,
.item-venta .input-group,
.item-venta .form-control,
.item-venta .form-select {
    width: 100% !important;
    min-width: 0;
}

.item-venta-precio .input-group {
    flex-wrap: nowrap;
}

.item-venta-precio .input-group-text {
    flex: 0 0 auto;
    padding-inline: 9px;
}

.item-venta-precio .inputPrecio {
    min-width: 0;
}

.item-venta-accion {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 34px;
    padding-bottom: 3px;
}

/* Botón exclusivo para quitar una línea de la venta.
   Es compacto, sólido y queda alineado con los campos, sin flotar sobre ellos. */
.item-venta-accion .btnQuitarItem {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid var(--color-danger);
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    display: inline-grid;
    place-items: center;
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(239, 68, 68, .22);
    transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}

.item-venta-accion .btnQuitarItem i {
    display: block;
    line-height: 1;
}

.item-venta-accion .btnQuitarItem:hover {
    color: #fff;
    filter: brightness(.9);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(239, 68, 68, .3);
}

.item-venta-accion .btnQuitarItem:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}

@media (max-width: 1199.98px) {
    .item-venta {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(78px, .42fr) minmax(132px, .7fr) 38px;
        gap: 10px;
    }
}

@media (max-width: 767.98px) {
    .item-venta {
        grid-template-columns: minmax(74px, .8fr) minmax(128px, 1.35fr) 38px;
        gap: 10px;
        padding: 12px 10px;
    }

    .item-venta-producto,
    .item-venta-presentacion {
        grid-column: 1 / -1;
    }

    .item-venta-cantidad {
        grid-column: 1;
    }

    .item-venta-precio {
        grid-column: 2;
    }

    .item-venta-accion {
        grid-column: 3;
    }
}

@media (max-width: 359.98px) {
    .item-venta {
        grid-template-columns: minmax(68px, .75fr) minmax(112px, 1.25fr) 34px;
        gap: 8px;
        padding-inline: 8px;
    }

    .item-venta-precio .input-group-text {
        padding-inline: 7px;
    }

    .item-venta-accion .btnQuitarItem {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 15px;
    }
}

/* Select2 + Bootstrap 5: igualar la altura a los inputs "sm" que ya usa
   la app (Select2 no distingue form-select-sm por su cuenta) */
.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection {
    min-height: 31px;
    font-size: .875rem;
}

/* Select2 con la paleta propia (no el índigo genérico del tema base) */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31,75,63,.15);
}
.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
.select2-container--bootstrap-5 .select2-results__option {
    color: var(--color-text);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: rgba(31,75,63,.1);
}
.select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════
   REVISIÓN RESPONSIVE GLOBAL — 2026
   Normaliza el layout completo y añade compatibilidad con las
   clases de DataTables 2 (.dt-container) y su extensión Responsive.
   ═══════════════════════════════════════════════════════════════ */

/* El contenido flexible no debe imponer un ancho mayor al viewport. */
.main-wrapper,
.main-content,
#mainContentInner,
.card-dashboard,
.row > * {
    min-width: 0;
}

.main-wrapper {
    width: calc(100% - var(--sidebar-w));
}

.main-content {
    width: 100%;
}

#mainContentInner {
    width: 100%;
    transition: opacity .16s ease;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.card-dashboard {
    position: relative;
}

.card-dashboard-header {
    gap: 16px;
}

.card-dashboard-header p,
.dynamic-section-heading p {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 5px 0 0;
}

.chart-card {
    min-height: 360px;
}

.chart-card canvas {
    max-width: 100%;
}

/* ── Barras de acciones superiores ── */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    min-width: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.toolbar-group-main {
    flex: 1;
}

.toolbar-filter {
    width: min(240px, 100%);
    min-width: 190px;
}

.btn-icon {
    width: 42px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
}

.btn,
.form-control,
.form-select,
.input-group-text {
    min-height: 40px;
}

.btn-sm,
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    min-height: 34px;
}

.btn {
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 650;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-h);
    --bs-btn-active-border-color: var(--color-primary-h);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-muted);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-bg);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary);
}

/* ── Tarjetas de tablas ── */
.table-card {
    padding: 0;
    overflow: hidden;
}

.table-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 12px;
}

.table-card-heading h2 {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.table-card-heading p {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 5px 0 0;
}

.table-responsive-container {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 20px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.table-responsive-container > .dt-container,
.table-responsive-container > .dataTables_wrapper {
    width: 100%;
    min-width: 0;
}

.table-responsive-container table.dataTable,
.table-responsive-container table.table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(31,75,63,.018);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.product-cell,
.client-cell,
.concept-cell {
    min-width: 150px;
}

.message-cell {
    min-width: 210px;
    max-width: 420px;
    line-height: 1.45;
}

.cell-secondary {
    max-width: 360px;
    margin-top: 3px;
    line-height: 1.35;
}

.actions-cell {
    min-width: 78px;
    white-space: nowrap;
}

.line-cell-inner,
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.whatsapp-link {
    color: var(--color-primary);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.whatsapp-link:hover {
    color: var(--color-primary-h);
    text-decoration: underline;
}

/* DataTables 2 y compatibilidad con nombres antiguos. */
.dt-container,
.dataTables_wrapper {
    color: var(--color-text);
    font-size: 13px;
}

.dt-toolbar,
.dt-footer,
div.dt-container .dt-layout-row {
    margin: 0 !important;
}

.dt-toolbar {
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0 14px;
    margin-bottom: 4px !important;
}

.dt-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
    margin-top: 4px !important;
}

.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dt-buttons .btn {
    margin: 0 !important;
    min-height: 34px;
    box-shadow: none !important;
}

.dt-search,
.dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.dt-search label,
.dataTables_filter label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.dt-search input,
div.dataTables_wrapper div.dataTables_filter input {
    width: min(260px, 100%);
    min-height: 36px;
    margin-left: 6px !important;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    padding: 7px 11px !important;
    outline: none;
}

.dt-search input:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(31,75,63,.12) !important;
}

.dt-info,
div.dataTables_wrapper div.dataTables_info {
    color: var(--color-muted) !important;
    padding-top: 0 !important;
}

.dt-paging,
div.dataTables_wrapper div.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}

.pagination {
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.page-link {
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px !important;
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 12px;
}

.page-link:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.active > .page-link,
.page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.disabled > .page-link,
.page-link.disabled {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-muted);
    opacity: .65;
}

/* Fila expandida del plugin Responsive. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--color-primary);
    border: 0;
    box-shadow: none;
    line-height: 15px;
}

table.dataTable > tbody > tr.child,
table.dataTable > tbody > tr.dtr-expanded + tr.child {
    background: var(--color-bg) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 130px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
}

table.dataTable > tbody > tr.child span.dtr-data {
    overflow-wrap: anywhere;
}

/* ── Filtros y estados ── */
.nav-pills-scroll {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-pills-scroll::-webkit-scrollbar {
    display: none;
}

.nav-pills {
    gap: 6px;
}

.nav-pills .nav-link {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 650;
    padding: 8px 14px;
    white-space: nowrap;
}

.nav-pills .nav-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.nav-pills .nav-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.badge-egreso {
    background: rgba(214,69,69,.12);
    color: var(--color-danger);
}

/* ── Formularios, modal y secciones dinámicas ── */
.modal-subtitle {
    color: var(--color-muted);
    font-size: 12px;
    margin-top: 4px;
}

.modal-body {
    padding: 20px;
}

.form-control,
.form-select,
.input-group-text {
    padding: 9px 12px;
}

.form-control::placeholder {
    color: var(--color-muted);
    opacity: .72;
}

.input-group-text {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
}

.surface-switch {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px 12px 46px;
}

.section-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0 18px;
}

.dynamic-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dynamic-section-heading h6,
.dynamic-section-heading h5 {
    margin: 0;
}

.dynamic-list {
    display: grid;
    gap: 10px;
}

.fila-dinamica {
    background: var(--color-bg);
    padding: 12px;
    margin-bottom: 0;
}

.field-caption {
    display: block;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    text-align: center;
}

.empty-state i {
    font-size: 28px;
}

.sale-summary {
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
}

.sale-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: 18px 0;
    padding: 14px;
}

.sale-total span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 650;
}

.sale-total strong {
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-primary);
    font-size: 20px;
}

/* ── Caja ── */
.cash-balance-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.cash-action {
    width: 100%;
    height: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 18px;
    text-align: left;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.cash-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cash-action-income:hover { border-color: var(--color-success); }
.cash-action-expense:hover { border-color: var(--color-danger); }

.cash-action-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    flex: 0 0 auto;
    font-size: 21px;
}

.cash-action-income .cash-action-icon {
    background: rgba(76,175,109,.12);
    color: var(--color-success);
}

.cash-action-expense .cash-action-icon {
    background: rgba(214,69,69,.12);
    color: var(--color-danger);
}

.cash-action strong,
.cash-action small {
    display: block;
}

.cash-action strong {
    font-size: 13px;
}

.cash-action small {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}

/* ── Select2 y SweetAlert ── */
.select2-container {
    max-width: 100%;
}

.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-top: 5px;
    padding-bottom: 5px;
}

.swal2-popup {
    border-radius: var(--radius) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.swal2-title,
.swal2-html-container {
    color: var(--color-text) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    max-width: calc(100% - 2rem);
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.swal2-html-container .table-responsive,
.swal2-html-container table {
    max-width: 100%;
}

/* ── Tema oscuro ── */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255,255,255,.018);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-color: var(--color-text);
}

/* ── Tablet ── */
@media (max-width: 1199.98px) {
    .sale-summary {
        position: static;
    }

    .chart-card {
        min-height: 330px;
    }
}

@media (max-width: 991.98px) {
    .main-wrapper {
        width: 100%;
    }

    .topbar {
        padding-inline: 18px;
    }

    .main-content {
        padding: 24px 20px 0;
    }

    .main-footer {
        padding-inline: 20px;
    }

    .toolbar-filter {
        width: 230px;
    }
}

/* ── Móvil ── */
@media (max-width: 767.98px) {
    :root {
        --topbar-h: 58px;
        --radius: 12px;
    }

    body {
        font-size: 13px;
    }

    .topbar {
        height: var(--topbar-h);
        gap: 10px;
        padding: 0 14px;
    }

    .topbar-breadcrumb {
        min-width: 0;
        overflow: hidden;
    }

    .topbar-breadcrumb span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-breadcrumb .breadcrumb-home,
    .topbar-breadcrumb .bi-chevron-right {
        display: none;
    }

    .topbar-btn {
        width: 36px;
        height: 36px;
    }

    .notif-dropdown {
        width: min(300px, calc(100vw - 24px));
    }

    .main-content {
        padding: 18px 12px 0;
    }

    .content-header {
        margin-bottom: 16px;
        min-height: 30px;
    }

    .page-title {
        font-size: 23px;
    }

    .page-toolbar {
        align-items: stretch;
        margin-bottom: 14px;
    }

    .toolbar-group-main {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-filter {
        width: 100%;
        min-width: 0;
    }

    .toolbar-primary {
        flex: 1;
    }

    .card-dashboard {
        padding: 16px;
    }

    .table-card {
        padding: 0;
        border-radius: 12px;
    }

    .table-card-heading {
        padding: 16px 14px 8px;
    }

    .table-card-heading h2 {
        font-size: 16px;
    }

    .table-responsive-container {
        padding: 0 12px 14px;
    }

    .table thead th,
    .table tbody td {
        padding: 10px 11px;
    }

    .dt-toolbar {
        padding: 10px 0 12px;
    }

    .dt-toolbar > [class*="col-"] {
        width: 100%;
    }

    .dt-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .dt-buttons .btn {
        width: 100%;
        padding-inline: 7px;
        font-size: 11px;
    }

    .dt-search,
    .dataTables_filter {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        justify-content: stretch;
    }

    .dt-search input,
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }

    .dt-info,
    div.dataTables_wrapper div.dataTables_info {
        text-align: center;
    }

    .dt-paging,
    div.dataTables_wrapper div.dataTables_paginate {
        justify-content: center;
    }

    .pagination {
        justify-content: center;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        display: block;
        min-width: 0;
        margin-bottom: 2px;
    }

    table.dataTable > tbody > tr.child span.dtr-data {
        display: block;
    }

    .card-dashboard-header,
    .dynamic-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dynamic-section-heading .btn {
        width: 100%;
    }

    .fila-dinamica {
        padding: 12px 10px;
    }

    .cash-action {
        min-height: 128px;
        flex-direction: column;
        gap: 8px;
        padding: 14px 8px;
        text-align: center;
    }

    .cash-action small {
        display: none;
    }

    .cash-action-icon {
        width: 42px;
        height: 42px;
    }

    .caja-balance {
        font-size: clamp(1.75rem, 9vw, 2.25rem);
    }

    .main-footer {
        align-items: center;
        flex-direction: column;
        gap: 4px;
        padding: 14px 12px;
        text-align: center;
    }

    .modal-dialog {
        margin: 8px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .modal-footer .btn {
        margin: 0;
        width: 100%;
    }

    .swal2-popup {
        width: calc(100% - 20px) !important;
        padding: 16px !important;
    }
}

@media (max-width: 420px) {
    .sidebar {
        width: min(86vw, var(--sidebar-w));
    }

    .page-toolbar {
        gap: 8px;
    }

    .btn-icon {
        width: 40px;
    }

    .dt-buttons .btn {
        font-size: 0;
    }

    .dt-buttons .btn i {
        font-size: 14px;
        margin-right: 0 !important;
    }

    .modal-footer {
        grid-template-columns: 1fr;
    }
}

/* Complementos del dashboard y páginas auxiliares. */
.chart-canvas {
    position: relative;
    width: 100%;
    min-height: 260px;
}

.chart-canvas-wide {
    height: 290px;
}

.chart-canvas-donut {
    height: 290px;
}

.activity-avatar.is-complete {
    background: var(--color-success);
}

.activity-avatar.is-pending {
    background: var(--color-warning);
}

.activity-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.activity-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.activity-status.is-complete { background: var(--color-success); }
.activity-status.is-pending { background: var(--color-warning); }

.empty-inline {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 12px;
    text-align: center;
}

.empty-inline i {
    font-size: 26px;
}

.empty-page-card {
    padding: clamp(28px, 6vw, 52px);
}

.empty-page-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: rgba(31,75,63,.1);
    color: var(--color-primary);
    font-size: 34px;
}

.empty-page-card h2 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    margin-bottom: 8px;
}

.empty-page-card p {
    color: var(--color-muted);
    margin: 0 auto 20px;
}

@media (max-width: 767.98px) {
    .chart-card {
        min-height: 310px;
    }

    .chart-canvas-wide,
    .chart-canvas-donut {
        height: 245px;
    }

    .activity-item {
        align-items: flex-start;
    }

    .activity-action {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 991.98px) {
    body.sidebar-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SELECTS UNIFICADOS — altura, alineación y tema oscuro
   Mantiene los <select> nativos y Select2 con las mismas medidas
   que los inputs de Bootstrap usados en el panel.
   ═══════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* Select nativo: misma caja visual que .form-control. */
.form-select {
    height: 40px;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 38px;
    line-height: 1.5;
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.form-select-sm {
    height: 34px;
    min-height: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 34px;
    font-size: 12px;
    line-height: 1.5;
}

.form-select option,
.form-select optgroup {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.form-select:disabled {
    background-color: var(--color-bg);
    color: var(--color-muted);
    opacity: .72;
}

/* El contenedor generado debe conservar exactamente el ancho del select. */
.select2-container--bootstrap-5 {
    width: 100% !important;
    max-width: 100%;
    font-family: 'Manrope', system-ui, sans-serif;
}

/* Select2 normal: 40 px, igual que .form-control. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-selection--single {
    position: relative;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    width: 100%;
    min-width: 0;
    padding: 0 38px 0 12px;
    color: var(--color-text) !important;
    line-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: var(--color-muted) !important;
    opacity: .78;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-muted) transparent transparent transparent;
}

.select2-container--bootstrap-5.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-muted) transparent;
}

/* Select2 pequeño: 34 px, igual que .form-control-sm. */
.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection,
.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single {
    height: 34px;
    min-height: 34px;
    font-size: 12px;
}

.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 34px;
    padding-left: 10px;
    line-height: 32px;
}

.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    right: 8px;
}

/* Estados interactivos y deshabilitados. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31,75,63,.15);
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: var(--color-bg);
    color: var(--color-muted);
    opacity: .72;
    cursor: not-allowed;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection__rendered {
    color: var(--color-muted) !important;
}

/* Menú desplegable, buscador y opciones en ambos temas. */
.select2-container--bootstrap-5 .select2-dropdown {
    margin-top: 4px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 8px;
    background-color: var(--color-surface);
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    height: 36px;
    min-height: 36px;
    padding: 7px 10px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    color: var(--color-text) !important;
    caret-color: var(--color-primary);
    outline: none;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31,75,63,.15);
}

.select2-container--bootstrap-5 .select2-results {
    background-color: var(--color-surface);
}

.select2-container--bootstrap-5 .select2-results__options {
    scrollbar-color: var(--color-border) var(--color-surface);
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 9px 12px;
    background-color: var(--color-surface);
    color: var(--color-text) !important;
    font-size: 13px;
    line-height: 1.35;
}

.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: rgba(31,75,63,.12);
    color: var(--color-text) !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__message {
    color: var(--color-muted) !important;
}

/* El color verde oscuro necesita una sombra distinta al activar el tema oscuro. */
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    box-shadow: 0 0 0 3px rgba(76,175,109,.18);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: rgba(76,175,109,.16);
}


/* ═══════════════════════════════════════════════════════════════
   AJUSTES DE FORMULARIOS DINÁMICOS Y SELECT2 — v4
   Igualación exacta de medidas, acciones dentro de la cuadrícula,
   botón de limpieza y contraste completo en tema oscuro.
   ═══════════════════════════════════════════════════════════════ */

/* Presentaciones de Nuevo producto: los tres campos principales
   conservan exactamente el mismo ancho. */
.fila-presentacion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 38px;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.fila-presentacion > * {
    min-width: 0;
}

.fila-presentacion .field-caption {
    display: block;
    margin-bottom: 6px;
    line-height: 1.2;
}

.fila-presentacion .form-control,
.fila-presentacion .input-group {
    width: 100%;
    min-width: 0;
}

.fila-presentacion .input-group,
.fila-presentacion .input-group > .form-control,
.fila-presentacion .input-group > .input-group-text,
.fila-presentacion > .presentacion-campo > .form-control {
    height: 34px;
    min-height: 34px;
}

.presentacion-precio .input-group {
    flex-wrap: nowrap;
}

.presentacion-precio .inputPrecio {
    min-width: 0;
}

.presentacion-accion,
.item-venta-accion {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 0;
}

.field-caption-spacer {
    visibility: hidden;
    user-select: none;
}

.presentacion-accion .btn-accion,
.item-venta-accion .btn-accion {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(214, 69, 69, .22);
    background: rgba(214, 69, 69, .08);
}

.presentacion-accion .btn-accion:hover,
.item-venta-accion .btn-accion:hover {
    background: rgba(214, 69, 69, .15);
}

/* Nueva venta: todos los controles pequeños miden 34 px exactos.
   Esto evita que Cantidad se vea más alta que los Select2 y Precio. */
.item-venta .form-control-sm,
.item-venta .form-select-sm,
.item-venta .input-group-sm,
.item-venta .input-group-sm > .form-control,
.item-venta .input-group-sm > .input-group-text,
.item-venta .form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection,
.item-venta .form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px;
}

.item-venta .inputCantidad,
.item-venta .inputPrecio {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.5;
}

.item-venta-accion {
    min-height: auto;
}

/* Botón X de Select2. Se reserva espacio entre la X y la flecha para
   que ambos controles permanezcan visibles incluso en selects pequeños. */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 66px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 34px;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted) !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    background: rgba(214, 69, 69, .12);
    color: var(--color-danger) !important;
}

.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 58px;
}

.form-select-sm.select2-hidden-accessible + .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    right: 29px;
    width: 20px;
    height: 20px;
    font-size: 16px;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    color: #c7d2cf !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    background: rgba(239, 104, 104, .16);
    color: #ff8b8b !important;
}

@media (max-width: 575.98px) {
    .fila-presentacion {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
        padding: 12px 10px;
    }

    .fila-presentacion .presentacion-campo:first-child,
    .fila-presentacion .presentacion-campo:nth-child(2) {
        grid-column: 1 / -1;
    }

    .fila-presentacion .presentacion-precio {
        grid-column: 1 / 3;
    }

    .fila-presentacion .presentacion-accion {
        grid-column: 3;
    }
}

/* ═══════════════════ Clientes, créditos y caja v2 ═══════════════════ */
.metric-compact {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.metric-compact > span {
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.metric-compact > strong {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.metric-compact > small { color: var(--color-muted); }
.metric-success { border-top: 3px solid var(--color-success); }
.metric-warning { border-top: 3px solid #e2a52b; }
.metric-danger { border-top: 3px solid var(--color-danger); }

.cash-filter-card { padding: 18px 20px; }
.cash-filter-grid {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) minmax(140px, .8fr) auto auto;
    gap: 12px;
    align-items: end;
}

.credit-toolbar { justify-content: flex-end; }
.filter-inline { display: flex; align-items: center; gap: 10px; }
.filter-inline label { color: var(--color-muted); font-size: .83rem; font-weight: 700; }
.filter-inline select { min-width: 170px; }

.badge-pendiente {
    color: #8b5a05;
    background: rgba(226, 165, 43, .15);
    border: 1px solid rgba(226, 165, 43, .32);
}

.credit-fields {
    margin: 0 -4px 16px;
    padding: 14px;
    border: 1px solid rgba(226, 165, 43, .35);
    border-radius: 12px;
    background: rgba(226, 165, 43, .06);
}

.swal-check-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px 1.7em 0;
    font-size: .9rem;
}

.swal-field-label {
    display: block;
    width: calc(100% - 3.4em);
    margin: 12px auto -5px;
    text-align: left;
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 700;
}

[data-bs-theme="dark"] .badge-pendiente { color: #ffd27b; }
[data-bs-theme="dark"] .credit-fields { background: rgba(226, 165, 43, .09); }

@media (max-width: 991.98px) {
    .cash-filter-grid { grid-template-columns: 1fr 1fr 1fr; }
    .cash-filter-grid .btn { min-height: 42px; }
}

@media (max-width: 575.98px) {
    .cash-filter-grid { grid-template-columns: 1fr 1fr; }
    .cash-filter-grid > div:nth-child(3) { grid-column: 1 / -1; }
    .cash-filter-grid .btn { width: 100%; }
    .credit-toolbar { align-items: stretch; }
    .filter-inline { width: 100%; justify-content: space-between; }
    .filter-inline select { flex: 1; min-width: 0; }
}