/* =========================================
   1. VARIABLES GLOBALES & RESET
   ================================********* */
:root {
    --primary-color: #6C5CE7;      /* Morado Principal */
    --primary-color-dark: #4A3FB5; /* Morado Oscuro */
    --bg-body: #F5F4FB;            /* Fondo lavanda clarito */
    --bg-card: #ffffff;            /* Fondo blanco */
    --text-main: #2E2A47;          /* Texto oscuro (azul-carbón) */
    --text-muted: #8D8AA6;         /* Texto secundario (gris-lavanda) */

    --radius-md: 16px;
    --radius-pill: 50px;
    --sidebar-width: 280px;        /* Ancho del menú en PC */
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    overflow-x: hidden; /* Evita el scroll horizontal */
}

/* =========================================
   2. ESTRUCTURA DEL LAYOUT (ESCRITORIO)
   ================================********* */
/* Solo aplicamos flex row si NO es la página de login */
body:not(.login-page) {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

/* Sidebar en Escritorio: Fijo a la izquierda */
#sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color-dark) 100%) !important;
    box-shadow: 4px 0 15px rgba(108, 92, 231, 0.15);
    color: white;
    flex-shrink: 0;
    overflow-y: auto;
    z-index: 1050; /* Por encima del contenido */
    transition: transform 0.3s ease-in-out;
}

/* Contenido Principal en Escritorio */

.main-content {
    flex-grow: 1;
    padding: 30px;
    width: calc(100% - var(--sidebar-width));
    overflow-y: auto;
    transition: margin-left 0.3s ease-in-out;
}

/* ---------- Modo "Pantalla Completa de Ventas": esconde el men
   lateral en CUALQUIER pantalla mientras se est vendiendo por mesas,
   para que todo el proceso (elegir mesa, vender, volver) se vea sin
   el men de lado, hasta tocar "Salir de Pantalla Completa" ---------- */
body.pantalla-completa-venta #sidebar,
body.pantalla-completa-venta .mobile-header {
    display: none !important;
}
body.pantalla-completa-venta .main-content {
    width: 100% !important;
}

/* =========================================
   3. ESTILOS VISUALES (Men, Botones, Cards)
   ================================********* */
.nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    margin-bottom: 5px;
    border-radius: var(--radius-md);
    padding: 10px 15px;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white !important;
    transform: translateX(5px);
}

.nav-pills .nav-link.active {
    background-color: white !important;
    color: var(--primary-color) !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(74, 63, 181, 0.35);
}

/* --- Etiquetas de sección del sidebar (Inventario, Ventas, Finanzas...) --- */
.sidebar-section-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.5);
    margin: 20px 4px 8px;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.nav-item + .sidebar-section-label,
li.nav-item:first-child + .sidebar-section-label {
    margin-top: 20px;
}

/* --- Pestañas de sub-navegación dentro de las páginas de Items --- */
.subnav-items {
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}
.subnav-items .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
}
.subnav-items .nav-link:hover {
    color: var(--primary-color-dark);
    border-bottom-color: rgba(108, 92, 231, 0.35);
}
.subnav-items .nav-link.active {
    color: var(--primary-color-dark);
    border-bottom-color: var(--primary-color);
    background: transparent;
}
@media (max-width: 575.98px) {
    .subnav-items .nav-link { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
}

.card {
    background-color: var(--bg-card);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.08);
    margin-bottom: 20px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
}

/* Inputs Modernos */
.form-control, .form-select {
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid #DCD9EA;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25);
}

.table thead th {
    background-color: #EFEDFB !important;
    color: var(--text-main) !important;
    border-bottom: 2px solid #E1DEF5;
}

/* =========================================
   3b. SOBRESCRITURA DE COLORES "PRIMARY" DE BOOTSTRAP
   (para que bg-primary, text-primary, border-primary,
   btn-outline-primary, etc. usen la paleta Morada)
   ================================********* */
.bg-primary { background-color: var(--primary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.mobile-header.bg-primary {
    background-color: var(--primary-color) !important;
}

/* =========================================
   4. ESTILOS LOGIN (MORADO SPLIT)
   ================================********* */
body.login-page {
    background-color: #ffffff;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-layout { display: flex; width: 100%; height: 100%; }
.login-left {
    width: 50%; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white; text-align: center; clip-path: ellipse(120% 100% at 0% 50%); z-index: 10;
}
.illustration-icon { font-size: 10rem; margin-bottom: 20px; animation: floatAnimation 4s infinite; }
.login-right { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.login-form-container { width: 100%; max-width: 400px; }
.form-control-custom { width: 100%; padding: 15px 20px; border-radius: 50px; background: #F0EEFA; border: 1px solid transparent; }
.btn-login-blue { width: 100%; padding: 15px; background: var(--primary-color); color: white; border-radius: 50px; border: none; margin-top: 10px; }
.btn-login-blue:hover { background: var(--primary-color-dark); }
@keyframes floatAnimation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* =========================================
   5. RESPONSIVE (MÓVIL Y TABLET)
   ================================********* */
/* Overlay oscuro para cuando el menú está abierto */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040; /* Debajo del sidebar, encima del contenido */
    display: none; /* Oculto por defecto */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.active { display: block; opacity: 1; }

@media (max-width: 991.98px) {
    /* 1. Cambiamos la dirección del cuerpo a columna */
    body:not(.login-page) {
        flex-direction: column;
    }

    /* 2. El Sidebar se vuelve "Flotante" y oculto a la izquierda */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px !important; /* Ancho un poco menor en móvil */
        transform: translateX(-100%); /* Oculto fuera de pantalla */
        box-shadow: none;
    }

    /* Clase para mostrar el sidebar */
    #sidebar.active {
        transform: translateX(0); /* Entra a la pantalla */
        box-shadow: 4px 0 15px rgba(0,0,0,0.3);
    }

    /* 3. El contenido ocupa el 100% */
    .main-content {
        width: 100%;
        padding: 20px 15px; /* Menos padding en móvil */
        margin-left: 0;
    }

    /* 4. Ajustes Login en Móvil */
    .login-layout { flex-direction: column; }
    .login-left { width: 100%; min-height: 35vh; clip-path: none; border-radius: 0 0 40px 40px; padding: 20px; }
    .login-right { width: 100%; min-height: 65vh; padding: 20px; }
    .illustration-icon { font-size: 5rem; }
    .login-welcome-title { font-size: 2rem; }
    .login-title { font-size: 2rem; margin-bottom: 20px; }

    /* 5. Encabezados y barras de botones (título + acción, filtros, controles
       de la cámara del escáner, etc.): permitimos que se acomoden en varias
       líneas en vez de apretarse o desbordar la pantalla en móvil/tablet. */
    .d-flex.justify-content-between,
    .d-flex.justify-content-center.gap-2,
    #capture-controls,
    #preview-controls {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Botones dentro de encabezados que quedan a la derecha: que no se
       encojan de más ni queden pegados al borde cuando bajan de línea. */
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > a.btn {
        flex-shrink: 0;
    }

    /* Las tablas envueltas en .table-responsive ya hacen scroll horizontal;
       les damos algo de aire para que no se sienta apretado al deslizar. */
    .table-responsive .table {
        margin-bottom: 0;
    }
}

/* =========================================
   6. TARJETAS DE RESUMEN Y COMPONENTES COMPARTIDOS
   (usado en Productos y en Movimientos de Inventario)
   ================================********* */
/* Tarjetas de resumen: franja de color a la izquierda + icono en círculo,
   para distinguir de un vistazo el tipo de dato sin depender solo del texto. */
.stat-card {
    border-left: 4px solid var(--text-muted);
}
.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: #EFEDFB;
    color: var(--text-muted);
}
.stat-card-neutral { border-left-color: var(--primary-color); }
.stat-card-neutral .stat-icon { background: rgba(108, 92, 231, 0.12); color: var(--primary-color-dark); }
.stat-card-success { border-left-color: #2E7D32; }
.stat-card-success .stat-icon { background: rgba(46, 125, 50, 0.12); color: #2E7D32; }
.stat-card-warning { border-left-color: #B8860B; }
.stat-card-warning .stat-icon { background: rgba(184, 134, 11, 0.12); color: #B8860B; }
.stat-card-danger { border-left-color: #B23A3A; }
.stat-card-danger .stat-icon { background: rgba(178, 58, 58, 0.12); color: #B23A3A; }

/* Separador sutil entre "buscar y saltar" y "filtrar la tabla" en escritorio,
   para dejar claro que son dos acciones distintas dentro de la misma tarjeta. */
@media (min-width: 768px) {
    .buscador-col:first-child {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        padding-right: 1.5rem;
    }
    .buscador-col:last-child {
        padding-left: 1.5rem;
    }
}

/* El menú de "Acciones" por fila reemplaza los botones-icono sueltos:
   texto claro en vez de adivinar qué hace cada ícono. */
.dropdown-menu form {
    margin: 0;
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
    background-color: #f8d7da;
    color: #842029 !important;
}

/* Evita que los números grandes ($1,234.56) se salgan de la tarjeta en
   pantallas angostas: el texto puede achicarse o partirse, nunca desbordar.
   Se aplica a TODAS las tarjetas (.card-body), no solo a .stat-card, para
   que el Dashboard también quede protegido en cualquier dispositivo. */
.card-body {
    min-width: 0;
}
.card-body > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .stat-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .card .h4 {
        font-size: 1.05rem;
    }
}

/* La tabla de productos no se aprieta para caber en la pantalla: mantiene
   un ancho mínimo legible y dentro de .table-responsive el usuario desliza
   horizontalmente en vez de ver todo amontonado. */
@media (max-width: 991.98px) {
    #tabla-productos {
        min-width: 640px;
    }
}
@media (max-width: 575.98px) {
    #tabla-productos {
        font-size: 0.85rem;
    }
}
/* =========================================
   7. CARRUSEL DE FICHAS (EDICIN MASIVA MVIL)
   ================================********* */
.carrusel-progreso {
    height: 4px;
    background: #E1DEF5;
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 12px;
}
.carrusel-progreso-barra {
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}
.carrusel-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.carrusel-controles .btn-flecha {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.carrusel-contador {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.carrusel-viewport {
    overflow: hidden;
    border-radius: var(--radius-md);
}
.carrusel-track {
    display: flex;
    transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .carrusel-track { transition: none; }
}
.ficha-masiva-movil {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ficha-masiva-movil .card-body {
    padding: 1.25rem;
}
.ficha-nombre {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.9rem;
}
.ficha-campo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ficha-campo:last-of-type {
    border-bottom: none;
}
.ficha-campo-icono {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(108, 92, 231, 0.12);
    color: var(--primary-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.95rem;
}
.ficha-campo-texto {
    min-width: 0;
}
.ficha-campo-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    display: block;
}
.ficha-campo-valor {
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* Paginación compacta de Edición Masiva */
.paginacion-masiva-info {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.paginacion-masiva-lista {
    gap: 6px;
    margin-bottom: 0;
}
.paginacion-masiva-lista .page-item .page-link {
    border-radius: var(--radius-pill);
    min-width: 38px;
    text-align: center;
    padding: 0.375rem 0.65rem;
}
.paginacion-masiva-salto .page-link {
    border: none;
    background: transparent;
    padding: 0.375rem 0.25rem;
}
/* Etiqueta de clasificación ABC (rotación de venta) */
.badge-clase-abc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin-right: 6px;
}
.badge-clase-abc-A { background: #2E7D32; } /* verde: se vende más */
.badge-clase-abc-B { background: #F9A825; } /* amarillo: rotación media */
.badge-clase-abc-C { background: #9E9E9E; } /* gris: poco movimiento */

/* =========================================
   8. TARJETAS DE PRODUCTO (Inventario / Productos)
   Lista completa y navegable en vez de depender solo de escribir en un
   buscador — pensada para tocar con el dedo, con textos grandes y
   pocas palabras técnicas.
   ================================********* */
.producto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.producto-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid #E9E6F5;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.08);
    padding: 12px;
    min-height: 88px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.producto-card:hover,
.producto-card:focus-visible {
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.18);
    outline: none;
    border-color: var(--primary-color);
}
.producto-card:active {
    transform: scale(0.98);
}
.producto-card-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #EFEDFB;
    color: var(--primary-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    overflow: hidden;
}
.producto-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.producto-card-info {
    min-width: 0;
    flex-grow: 1;
}
.producto-card-nombre {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.producto-card-detalle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.producto-card-proveedor {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.producto-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
@media (max-width: 575.98px) {
    .producto-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   9. BOTONES GRANDES PARA TRABAJADORES (.btn-touch)
   Botones ms fciles de tocar con el dedo, con ms
   espacio para no tocar el botn vecino por error.
   ================================********* */
.btn-touch {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-touch i.bi {
    font-size: 1.2rem;
}
.btn-touch:active {
    transform: scale(0.97);
}

/* Versión "grande" para LA acción más importante de una pantalla
   (ej. "Tomar Foto", "Guardar Compra"). Se usa junto con .btn-touch:
   <button class="btn btn-touch btn-touch-xl btn-primary">           */
.btn-touch-xl {
    min-height: 58px;
    padding: 14px 30px;
    font-size: 1.1rem;
    width: 100%;
}
@media (min-width: 768px) {
    .btn-touch-xl { width: auto; min-width: 260px; }
}

/* =========================================
   10. RETROALIMENTACIÓN Y CLARIDAD EN TODOS LOS BOTONES
   Estos estilos aplican en TODA la aplicación (no solo en
   pantallas que ya usan .btn-touch). La idea es que un
   trabajador que no sabe de tecnología SIEMPRE sienta que
   "el botón sí me hizo caso" y SIEMPRE vea claramente cuándo
   un botón no se puede tocar todavía. No se cambia el tamaño
   de ningún botón aquí (para no mover botones chiquitos de
   íconos dentro de tablas); el tamaño grande se agrega aparte,
   a propósito, con la clase .btn-touch en cada pantalla.
   ================================********* */

/* Se "hunde" un poquito al tocarlo, en cualquier botón de la app,
   para que el dedo sienta que el toque funcionó. */
.btn:active {
    transform: scale(0.97);
}

/* Forma redondeada consistente en todos los colores de botón
   (antes solo el morado tenía esta forma tipo "píldora"). */
.btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info,
.btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info {
    border-radius: var(--radius-pill);
}

/* Botón deshabilitado: se ve CLARAMENTE apagado, no solo un poco
   más pálido, para que nadie piense que la pantalla está trabada. */
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Aro visible al navegar con teclado/lector de pantalla. */
.btn:focus-visible {
    outline: 3px solid rgba(108, 92, 231, 0.45);
    outline-offset: 2px;
}

/* =========================================
   11. ESCÁNER DE TICKETS CON IA
   Estilos de la ventana (modal) donde se toma la foto del
   ticket y se revisan los artículos detectados.
   ================================********* */

/* --- Indicador de pasos (Foto -> Revisar -> Guardar) --- */
.escaner-pasos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
}
.escaner-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 140px;
}
.escaner-paso-circulo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EFEDFB;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid #E1DEF5;
    transition: all 0.2s ease;
}
.escaner-paso-texto {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.15;
}
.escaner-paso-linea {
    flex: 0 0 auto;
    width: 32px;
    height: 2px;
    background: #E1DEF5;
    margin-top: -18px;
}
.escaner-paso.activo .escaner-paso-circulo {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 3px 10px rgba(108, 92, 231, 0.35);
}
.escaner-paso.activo .escaner-paso-texto {
    color: var(--primary-color-dark);
}
.escaner-paso.completado .escaner-paso-circulo {
    background: #D3E6D9;
    border-color: #9FCBAE;
    color: #1F7A45;
}

/* --- Tarjeta de instrucciones sencillas arriba de la cámara --- */
.escaner-instrucciones {
    background: #F0EEFA;
    border: 1px solid #E1DEF5;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.escaner-instrucciones i {
    color: var(--primary-color);
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Botón principal de "Tomar Foto" con forma de obturador de
   cámara: un botón redondo y grande es un símbolo que cualquier
   persona reconoce, sepa o no de tecnología. --- */
.escaner-btn-disparador {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin: 0 auto;
    box-shadow: 0 4px 14px rgba(108, 92, 231, 0.3);
    transition: transform 0.08s ease;
}
.escaner-btn-disparador:active {
    transform: scale(0.93);
}

/* --- Botones de "¿Es el mismo producto?" dentro de la tabla de
   resultados: se agrandan un poco para que sea fácil tocar el
   correcto sin equivocarse (antes eran muy pequeños). --- */
#items-tbody td[id^="coincidencia-"] .btn {
    min-height: 36px !important;
    padding: 6px 14px !important;
    font-weight: 700;
}
#items-tbody td[id^="coincidencia-"] .d-flex.gap-1 {
    flex-wrap: wrap;
    gap: 6px !important;
}

/* --- Fila de artículo más alta y legible en la tabla de
   resultados del escáner, para que no se vea apretada. --- */
#modalEscaner .table td, #modalEscaner .table th {
    padding: 0.6rem 0.5rem;
    vertical-align: middle;
}
#modalEscaner .table input.form-control,
#modalEscaner .table select.form-select {
    min-height: 38px;
}

/* --- Barra fija de "Total + Guardar" al fondo de la pantalla,
   solo en celular, para no obligar a bajar hasta el final cada
   vez que se quiere guardar (mismo patrón que Registrar Compra
   Manual, para que la app se sienta igual en todos lados). --- */
.escaner-barra-guardar-movil {
    display: none;
}
@media (max-width: 767.98px) {
    .escaner-barra-guardar-movil {
        display: flex;
        position: sticky;
        bottom: -1rem;
        left: 0;
        right: 0;
        z-index: 6;
        background: var(--bg-card);
        border-top: 1px solid #E3DECB;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        padding: 0.65rem 1rem;
        margin: 0 -1rem -1rem -1rem;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .escaner-barra-guardar-movil .monto {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--text-main);
        line-height: 1.1;
    }
    .escaner-barra-guardar-movil .etiqueta {
        font-size: 0.72rem;
        color: var(--text-muted);
        display: block;
    }
    /* Deja aire abajo para que la barra fija no tape el botón de
       Guardar normal ni el resto del contenido. */
    #result-step {
        padding-bottom: 76px;
    }
}
/* =========================================
   ANIMACIONES SUAVES DE NAVEGACIÓN
   ========================================= */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.main-content {
    animation: fadeInUp 0.35s ease-out;
}

.card,
.stat-card,
.producto-card {
    animation: fadeInUp 0.3s ease-out backwards;
}

.alert {
    animation: fadeInUp 0.3s ease-out;
}