/* ══════════════════════════════════════════════════════════
   Detalles que Enamoran — estilos globales
   ══════════════════════════════════════════════════════════ */

:root {
    --rosa:        #e83e8c;
    --rosa-dark:   #c2185b;
    --rosa-light:  #fce8f3;
    --rosa-mid:    #f5c0de;
}

/* ── Base ──────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .92rem;
}

/* ── Botones primarios → rosa ──────────────────────────── */
.btn-primary {
    background-color: var(--rosa);
    border-color: var(--rosa);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--rosa-dark) !important;
    border-color: var(--rosa-dark) !important;
}
.btn-outline-primary {
    color: var(--rosa);
    border-color: var(--rosa);
}
.btn-outline-primary:hover {
    background-color: var(--rosa);
    border-color: var(--rosa);
    color: #fff;
}

/* ── Forms → toque rosa + transiciones ────────────────────── */
.form-control,
.form-select {
    background-color: #fdf6f9;
    border: 1px solid var(--rosa-mid);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--rosa);
    background-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(232,62,140,.22);
}
.form-control:disabled,
.form-select:disabled {
    background-color: #f3e8ee;
}
.input-group-text {
    background: var(--rosa-light);
    color: var(--rosa-dark);
    border: 1px solid var(--rosa-mid);
    font-weight: 600;
}
.form-label {
    color: #4a2536;
}
hr {
    border-top: 2px solid var(--rosa-mid);
    opacity: .5;
}

/* ── Badges extra ──────────────────────────────────────── */
.badge.bg-purple,
.bg-purple { background-color: #8a3f66 !important; }

/* Badge stock bajo */
.badge-stock-bajo {
    background-color: #ffc107;
    color: #212529;
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
    border-radius: 12px;
    border-color: var(--rosa-mid);
    background: linear-gradient(180deg, #ffffff 0%, #fdf6f9 100%);
    transition: box-shadow .2s ease;
}
.card.border-0 {
    border: 1px solid var(--rosa-mid) !important;
}
.card.shadow-sm {
    box-shadow: 0 3px 14px rgba(232,62,140,.14) !important;
}
.card.shadow-sm:hover {
    box-shadow: 0 6px 22px rgba(232,62,140,.20) !important;
}
.card-header.bg-white {
    background: linear-gradient(135deg, var(--rosa-light) 0%, #ffffff 75%) !important;
    border-bottom: 2px solid var(--rosa-mid) !important;
}

/* ── Tables ────────────────────────────────────────────── */
.table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8c7680;
}

/* ── Page loader ────────────────────────────────────────── */
#page-loader {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* ── Login ──────────────────────────────────────────────── */
body.login-body {
    background: linear-gradient(145deg, #fce8f3 0%, #fff5fb 60%, #fdf0f8 100%);
}

/* ══════════════════════════════════════════════════════════
   Caja — movimientos
   ══════════════════════════════════════════════════════════ */

/* Tarjeta hero (Total vendido) — reemplaza gradientes sueltos */
.caja-hero-rosa {
    background: linear-gradient(135deg, var(--rosa-dark), var(--rosa)) !important;
}

/* Chips de estadística (ventas / devoluciones / neto) */
.mov-stat-chip {
    background: var(--rosa-light);
    border-radius: 10px;
    margin: .35rem;
    flex: 1 1 0;
}

/* Badge de método de pago (efectivo/tarjeta/transferencia/crédito) */
.mov-metodo-badge {
    background: var(--rosa-light);
    color: var(--rosa-dark);
    border: 1px solid var(--rosa-mid);
    font-weight: 600;
}

/* Fila de movimiento: hover suave + borde izquierdo según tipo */
.mov-row {
    border-left: 3px solid transparent;
    transition: background-color .12s ease;
}
.mov-row:hover {
    background: var(--rosa-light);
}
.mov-row-venta        { border-left-color: var(--rosa); }
.mov-row-cambio        { border-left-color: #8a3f66; }
.mov-row-devolucion    { border-left-color: #c9902e; }
.mov-row-pedido        { border-left-color: #6f42c1; }
.mov-row-entrada       { border-left-color: #2f9e44; }
.mov-row-salida        { border-left-color: #b3253b; }
.mov-row-anulada       { border-left-color: #adb5bd; }

/* Ícono de movimiento envuelto en chip circular tenue */
.mov-icon-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mov-icon-venta        { background: rgba(232,62,140,.13);  color: var(--rosa); }
.mov-icon-cambio        { background: rgba(138,63,102,.14);  color: #8a3f66; }
.mov-icon-devolucion    { background: rgba(201,144,46,.15);  color: #c9902e; }
.mov-icon-pedido        { background: rgba(111,66,193,.14);  color: #6f42c1; }
.mov-icon-entrada       { background: rgba(47,158,68,.14);   color: #2f9e44; }
.mov-icon-salida        { background: rgba(179,37,59,.14);   color: #b3253b; }
.mov-icon-anulada       { background: rgba(108,117,125,.14); color: #6c757d; }

/* Badges de tipo, en la paleta de marca en vez de los *-subtle genéricos */
.mov-badge-venta        { background: rgba(232,62,140,.13);  color: var(--rosa-dark); }
.mov-badge-cambio        { background: rgba(138,63,102,.16);  color: #8a3f66; }
.mov-badge-devolucion    { background: rgba(201,144,46,.18);  color: #93690f; }
.mov-badge-pedido        { background: rgba(111,66,193,.15);  color: #6f42c1; }
.mov-badge-entrada       { background: rgba(47,158,68,.15);   color: #217a37; }
.mov-badge-salida        { background: rgba(179,37,59,.14);   color: #b3253b; }
.mov-badge-anulada       { background: rgba(108,117,125,.15); color: #6c757d; }

/* Distintivo aparte (no reemplaza al badge de tipo): la venta canjeó un cupón/vale
   de puntos — mismo cian que ya usa el badge "KIT" en el POS. */
.mov-badge-vale          { background: rgba(10,168,202,.15);  color: #0a7c94; }

/* Color del "neto" de sesión (positivo/negativo), controlado por JS */
.mov-neto-positivo { color: var(--rosa-dark) !important; }
.mov-neto-negativo { color: #b3253b !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — layout adaptable
   ══════════════════════════════════════════════════════════ */

/* Backdrop del sidebar (móvil) */
.sb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sb-backdrop.open { display: block; }

/* ── Tabletas y móviles (<992px) ───────────────────────── */
@media (max-width: 991.98px) {
    #main-sidebar { width: 200px; }
}

/* ── Móvil (<768px) ────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* ── Contenido principal ── */
    #main-content { padding: .85rem !important; }

    /* ── Nav-tabs: scroll horizontal (pedidos, ventas…) ── */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 1px;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* ── Cabeceras de página (título + botón) ── */
    .d-flex.justify-content-between.align-items-center.mb-4,
    .d-flex.align-items-center.justify-content-between.mb-4 {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* ── Dashboard: ícono encima del texto ── */
    .dash-card-body { display: flex; flex-direction: column; padding: .85rem !important; }
    .dash-card-icon { display: inline-flex; align-items: center; justify-content: center;
                      width: fit-content; }

    /* ── POS: apilar columnas verticalmente ── */
    #pos-body {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        margin: -.85rem !important;
        min-height: calc(100vh - 58px);
    }
    #pos-catalog-col {
        height: 55vh;
        min-height: 260px;
        border-bottom: 2px solid #dee2e6;
    }
    #pos-cart-col {
        width: 100% !important;
        border-left: none !important;
    }

    /* ── Tablas: scroll horizontal suave ── */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ── Paginación: wrap en varias líneas ── */
    .pagination { flex-wrap: wrap; gap: .2rem; }

    /* ── Modales: márgenes reducidos ── */
    .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }

    /* ── Botones de acción multi-botón en cabeceras ── */
    .ms-auto.d-flex.gap-2 { margin-left: 0 !important; flex-wrap: wrap; }
}

/* ── Muy pequeños (<576px) ─────────────────────────────── */
@media (max-width: 575.98px) {
    #main-content { padding: .65rem !important; }

    .card-body { padding: .85rem; }

    /* Login: menos padding interno */
    .card-body.p-4 { padding: 1.25rem !important; }

    /* Gráficas */
    canvas { max-height: 220px; }

    /* Reducir tamaño de badge en tabs */
    .nav-tabs .badge { display: none; }

    /* Buscador de devoluciones: ancho completo */
    .input-group[style*="max-width"] { max-width: 100% !important; }

    /* Número de venta en devoluciones */
    div[style*="max-width:400px"] { max-width: 100% !important; }

    /* Input cantidad en tabla devoluciones: más compacto */
    .cant-devolver { width: 60px !important; font-size: .8rem; padding: .2rem .3rem; }
}