/* index.css - Modern minimalist theme built on Bootstrap variables + small customizations */
:root{
    --bg: #f7f9fc;
    --surface: #ffffff;
    --primary: #0b3d91; /* navy */
    --primary-600: #0a3a83;
    --accent: #0b84ff;
    --muted: #6b7a93;
    --border: #e6edf9;
    --shadow: 0 6px 20px rgba(16,35,59,0.06);
}

*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif}
html,body{height:100%;margin:0;background:var(--bg);color:#10233b}

/* Layout */
.wrapper{display:flex;gap:20px;padding:20px;align-items:flex-start;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,var(--primary),var(--primary-600));color:#fff;border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.04);box-shadow:var(--shadow);transition:transform .28s ease,opacity .2s}
.sidebar.hidden{transform:translateX(-320px);opacity:0;pointer-events:none}
.brand{font-weight:700;color:#fff;padding:12px 6px;text-align:center;font-size:1.05rem}
.user-pill{background:rgba(255,255,255,0.06);padding:10px;border-radius:10px;margin-bottom:10px;color:#f0f6ff;text-align:center;font-weight:600}
.nav-link{display:block;padding:10px;border-radius:10px;color:rgba(255,255,255,0.95);margin:8px 0;text-decoration:none;cursor:pointer;transition:transform .12s, background .12s}
.nav-link.active,.nav-link:hover{background:rgba(255,255,255,0.06);transform:translateX(6px)}

.main-content{flex:1;min-height:80vh}
.toggle-btn{background:#fff;border:0;color:var(--primary);padding:8px 12px;border-radius:10px;box-shadow:0 2px 8px rgba(16,35,59,0.04)}

.card-panel{background:var(--surface);padding:16px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
h3{margin:0 0 12px 0;font-weight:700;color:var(--primary)}

/* Scanner */
#scanner{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#000;height:260px;display:flex;align-items:center;justify-content:center}
.scanner-box{width:100%;max-width:540px;height:260px;margin-top:8px;position:relative;border-radius:10px;overflow:hidden}
.scanner-guide{position:absolute;top:50%;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),rgba(11,132,255,0.2));opacity:0.95;z-index:100}

/* Inputs */
.form-control{border-radius:10px;border:1px solid var(--border);padding:10px 12px}
.form-control:focus{box-shadow:0 6px 18px rgba(11,132,255,0.06);border-color:var(--accent);outline:none}

/* Buttons */
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-600));border:none;color:#fff;padding:10px 14px;border-radius:10px}
.btn-outline-primary{border:1px solid var(--primary);color:var(--primary);background:transparent;border-radius:10px}

/* Tables */
.table{background:transparent;color:#0f2a50;border-collapse:separate;border-spacing:0 10px}
.table thead th{background:transparent;color:#0f2a50;font-weight:700;padding:12px 10px;border-bottom:0}
.table tbody tr{background:var(--surface);border-radius:10px;box-shadow:0 6px 16px rgba(16,35,59,0.04);transition:transform .12s,box-shadow .12s}
.table tbody tr td{padding:12px 10px;border-top:0;vertical-align:middle}
.table tbody tr:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(16,35,59,0.06)}

.table-responsive{overflow:auto}

.tablas{padding:14px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}

.barcode-block{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;margin:8px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#fbfdff,#f3f8ff);min-width:150px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(11,61,145,0.04)}
.barcode-block canvas{display:block;margin-top:8px}

/* Floating button */
.btn-fijo-superior-derecho{position:fixed;right:20px;top:20px;z-index:9999;border-radius:12px;box-shadow:0 8px 30px rgba(16,35,59,0.12)}

/* Grid: left (scanner/search) and right (image/results) */
.precio-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}
.precio-grid .left-col,.precio-grid .right-col{display:flex;flex-direction:column;gap:12px}
.scanner-card{padding:14px;border-radius:12px}
.image-card{padding:14px;border-radius:12px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.image-card strong{display:block;margin-bottom:10px;color:var(--muted)}
.image-card img{max-width:100%;max-height:220px;object-fit:contain;border-radius:8px}
.results-card{padding:14px;border-radius:12px}

/* Video fill */
#scanner video,.scanner-box video{width:100% !important;height:100% !important;object-fit:cover !important}

/* Small interactions */
.btn{transition:transform .12s ease,box-shadow .12s}
.btn:active{transform:translateY(1px)}

/* Off-canvas sidebar */
.sidebar-backdrop{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(2,6,23,0.45);z-index:998;opacity:0;transition:opacity .18s;pointer-events:none}
.sidebar-backdrop.visible{opacity:1;pointer-events:auto}

/* Responsive tweaks */
@media (max-width:1100px){.precio-grid{grid-template-columns:1fr 1fr}.sidebar{width:220px}}
@media (max-width:980px){
    .wrapper{flex-direction:column;padding:16px}
    .sidebar{position:fixed;left:-110%;top:14px;height:calc(100% - 28px);width:86%;max-width:360px;z-index:999;transform:translateX(-110%);transition:transform .28s ease,opacity .18s}
    .sidebar.open{transform:translateX(0);left:8px}
    .main-content{order:1}
    .precio-grid{grid-template-columns:1fr}
    .scanner-box{height:200px}
}

/* Helpers for server-generated tables */
#mostrartabla table,#mostrartabla2 table,#mostrartabla33 table{width:100%;border-collapse:collapse}
#mostrartabla table th,#mostrartabla2 table th,#mostrartabla33 table th{padding:8px;text-align:left}
#mostrartabla table td,#mostrartabla2 table td,#mostrartabla33 table td{padding:10px;border-top:1px solid rgba(11,61,145,0.04)}

/* ------------------ GENERAL SIDEBAR ------------------ */
.sidebar {
    width: 240px;
    background: #ffffff;
    color: #10233b;
    border-radius: 12px;
    padding: 20px 16px;
    box-shadow: 0 12px 40px rgba(16,35,59,0.08);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, opacity 0.2s;
}

/* ------------------ DESKTOP (≥980px) ------------------ */
@media (min-width: 980px) {
    .sidebar {
        transform: translateX(0);
        position: relative;
        opacity: 1;
    }
    .sidebar.hidden {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        position: relative;
    }

    .main-content.fullwidth {
        flex: 1;
        width: 100%;
    }
}

/* ------------------ MOBILE (<980px): OFFCANVAS ------------------ */
@media (max-width: 979px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        z-index: 999;
        max-width: 320px;
        width: 86%;
        transform: translateX(-100%);
        opacity: 0;
    }

    .sidebar.open {
        transform: translateX(0);
        left: 0;
        opacity: 1;
    }

    .sidebar-backdrop {
        display: block;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .sidebar-backdrop.visible {
        opacity: 1;
        pointer-events: all;
        z-index: 998;
    }
}

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

.username {
    font-weight: 600;
    color: var(--muted);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: rgba(11,132,255,0.1);
    color: var(--primary);
    transform: translateX(6px);
}

.sidebar .nav-link.text-danger {
    color: #dc3545;
}

.sidebar .nav-link.text-danger:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Estilos para el Modal de Carga */
.modal-cargando {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1050; /* Por encima de todo, incluyendo Bootstrap modals si los hubiere */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

.cargando-texto {
    color: white;
    margin-top: 15px;
    font-size: 1.2em;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}