@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

    :root {
        --negro: #0a0a0a;
        --blanco: #f8f6f1;
        --dorado: #C9A84C;
        --dorado-claro: #E8C96A;
        --plateado: #B8BCC8;
        --gris: #2a2a2a;
        --gris2: #3d3d3d;
        --borde: #2a2a2a;
        --verde: #2d7a4f;
        --rojo: #c0392b;
        --azul: #1a5276;
    }

    * { margin:0; padding:0; box-sizing:border-box; }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--negro);
        color: var(--blanco);
        min-height: 100vh;
    }

    .header {
        background: var(--negro);
        border-bottom: 1px solid var(--borde);
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .logo {
        font-family: 'Cormorant Garamond', serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--dorado);
    }
    .logo span { color: var(--blanco); font-weight: 400; font-size: 14px; letter-spacing: 2px; }

    #pantalla-login {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: var(--negro);
        padding: 20px;
    }
    .login-card {
        background: var(--gris);
        border: 1px solid var(--borde);
        border-radius: 16px;
        padding: 40px 32px;
        max-width: 380px;
        width: 100%;
        text-align: center;
    }
    .login-card h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 32px;
        color: var(--dorado);
        letter-spacing: 3px;
        margin-bottom: 6px;
    }
    .login-card p { font-size: 13px; color: var(--plateado); margin-bottom: 28px; }

    input, select, textarea {
        width: 100%;
        padding: 12px 14px;
        background: var(--gris2);
        border: 1px solid var(--borde);
        border-radius: 8px;
        color: var(--blanco);
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s;
        margin-bottom: 12px;
    }
    input:focus, select:focus { border-color: var(--dorado); }
    /* Casilla de contraseña con botón 👁️ para ver lo que se escribe */
    .campo-pass { position: relative; }
    .campo-pass input { padding-right: 46px; }
    .campo-pass .ver-pass {
        position: absolute; top: 0; right: 0; width: 44px; height: 44px;
        background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
        opacity: .6; padding: 0;
    }
    .campo-pass .ver-pass:hover, .campo-pass .ver-pass.activo { opacity: 1; }
    select option { background: var(--gris2); }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 20px;
        border: none;
        border-radius: 8px;
        font-family: 'DM Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.1s;
    }
    .btn:active { transform: scale(0.97); }
    .btn:hover { opacity: 0.85; }
    .btn-metal { transition: filter 0.2s, transform 0.1s !important; }
    .btn-metal:hover { filter: brightness(1.15) saturate(1.2); opacity: 1 !important; }
    .btn-metal:active { transform: scale(0.97); filter: brightness(0.9); }
    .acciones-menu { display:flex; flex-direction:column; gap:10px; }
    .acciones-fila2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .menu-btn {
        display:flex; align-items:center; gap:14px;
        padding:16px 18px;
        background: #111;
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 14px;
        cursor: pointer;
        font-family:'DM Sans',sans-serif;
        color: #e0e0e0;
        text-align:left;
        position:relative;
        overflow:hidden;
        transition: background 0.3s, box-shadow 0.3s, border-color 0.3s, color 0.2s;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .menu-btn::before {
        content:'';
        position:absolute; inset:0;
        background: linear-gradient(135deg, var(--mc,#C9A84C), transparent 60%);
        opacity:0.12;
        transition: opacity 0.3s;
        border-radius:14px;
    }
    .menu-btn::after {
        content:'';
        position:absolute;
        left:0; top:10%; bottom:10%;
        width:3px;
        border-radius:0 3px 3px 0;
        background: var(--mc,#C9A84C);
        box-shadow: 0 0 10px var(--mc,#C9A84C);
        transition: width 0.3s, opacity 0.3s;
    }
    .menu-btn:hover {
        background: color-mix(in srgb, var(--mc,#C9A84C) 18%, #111);
        border-color: var(--mc,#C9A84C);
        box-shadow: 0 0 20px color-mix(in srgb, var(--mc,#C9A84C) 40%, transparent), inset 0 0 30px color-mix(in srgb, var(--mc,#C9A84C) 10%, transparent);
        color: #fff;
    }
    .menu-btn:hover::before { opacity:0.25; }
    .menu-btn:hover::after { width:4px; }
    .menu-btn:active { transform:scale(0.98); }
    .menu-btn-full { width:100%; }
    .menu-ico { font-size:22px; flex-shrink:0; }
    .menu-txt { flex:1; font-size:14px; font-weight:600; }
    .menu-arr { font-size:18px; color: var(--mc,#C9A84C); opacity:0.6; transition:opacity 0.2s, transform 0.2s; }
    .menu-btn:hover .menu-arr { opacity:1; transform:translateX(3px); }
    /* — AZUL (Lote): azul acero metálico — */
    .btn[style*="4a6fa5"], .btn[style*="background:#4a6fa5"] {
        background: linear-gradient(135deg,#1a3a6b,#4a6fa5,#7BBDE8,#4a6fa5,#1a3a6b) !important;
        color: #e8f4ff !important; font-weight: 700 !important;
        border: 1px solid rgba(123,189,232,0.4) !important;
        box-shadow: 0 2px 10px rgba(74,111,165,0.4) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
        transition: filter 0.25s, box-shadow 0.25s, transform 0.1s !important;
    }
    .btn[style*="4a6fa5"]:hover, .btn[style*="background:#4a6fa5"]:hover {
        filter: brightness(1.2) !important;
        box-shadow: 0 4px 18px rgba(123,189,232,0.6) !important;
    }

    /* — DORADO: oro metálico con glow al hover — */
    .btn-dorado {
        background: linear-gradient(135deg,#7a5500,#C9A84C,#f0d060,#C9A84C,#7a5500);
        color: #1a0e00; font-weight: 700;
        text-shadow: 0 1px 2px rgba(255,220,80,0.3);
        box-shadow: 0 2px 10px rgba(201,168,76,0.3);
        border: 1px solid rgba(201,168,76,0.4);
        transition: filter 0.25s, box-shadow 0.25s, transform 0.1s !important;
    }
    .btn-dorado:hover {
        filter: brightness(1.15) saturate(1.1);
        box-shadow: 0 4px 20px rgba(201,168,76,0.6) !important;
        opacity: 1 !important;
    }
    .btn-dorado:active { transform: scale(0.97); }

    /* — GRIS: oscuro con borde sutil — */
    .btn-gris {
        background: linear-gradient(135deg,#1a1a1a,#2e2e2e,#1a1a1a);
        color: #c0c0c0; font-weight: 600;
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        transition: filter 0.2s, border-color 0.2s, transform 0.1s !important;
    }
    .btn-gris:hover {
        filter: brightness(1.3);
        border-color: rgba(255,255,255,0.25) !important;
        opacity: 1 !important;
    }
    .btn-gris:active { transform: scale(0.97); }

    /* — BLANCO — */
    .btn-blanco { background: var(--blanco); color: var(--negro); }

    /* — VERDE: siempre brillante (WhatsApp / Aprobar) — */
    .btn-verde {
        background: linear-gradient(135deg,#1a5c30,#27ae60,#2ecc71,#27ae60,#1a5c30);
        color: #fff; font-weight: 700;
        border: 1px solid rgba(46,204,113,0.5);
        box-shadow: 0 2px 12px rgba(39,174,96,0.5);
        text-shadow: 0 1px 3px rgba(0,0,0,0.4);
        transition: filter 0.2s, box-shadow 0.2s, transform 0.1s !important;
    }
    .btn-verde:hover {
        filter: brightness(1.15);
        box-shadow: 0 4px 22px rgba(46,204,113,0.7) !important;
        opacity: 1 !important;
    }
    .btn-verde:active { transform: scale(0.97); }
    .btn-rojo { background: var(--rojo); color: #fff; }
    .btn-full { width: 100%; }
    .btn-huella { margin-top: 10px; background: transparent; color: var(--dorado, #c9a84c); border: 1px solid currentColor; }

    #app { display: none; }
    .main { padding: 20px; max-width: 1400px; margin: 0 auto; }

    .card {
        background: var(--gris);
        border: 1px solid var(--borde);
        border-radius: 14px;
        padding: 20px;
        margin-bottom: 16px;
    }
    .card h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px;
        color: var(--dorado);
        margin-bottom: 16px;
        letter-spacing: 1px;
    }

    .vendedores-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
        margin-top: 16px;
    }
    .vendedor-card {
        background: var(--gris2);
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 20px 16px;
        text-align: center;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        background-clip: padding-box;
        position: relative;
    }
    .vendedor-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 13px;
        background: linear-gradient(135deg, #3a3a3a, #7a7a7a, #4a4a4a, #9a9a9a, #2a2a2a, #6a6a6a, #3a3a3a);
        z-index: -1;
        opacity: 0.9;
        transition: opacity 0.3s, background 0.3s;
    }
    .vendedor-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(150,150,150,0.25); }
    .vendedor-card:hover::before { opacity: 1; background: linear-gradient(135deg, #555, #aaa, #666, #ccc, #444, #999, #555); }
    .vendedor-avatar {
        width: 54px; height: 54px; border-radius: 50%;
        background: var(--dorado); color: var(--negro);
        font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
    }
    .vendedor-nombre { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .vendedor-stock { font-size: 11px; color: var(--plateado); }
    .btn-nuevo-vendedor {
        background: transparent; border: 2px dashed var(--borde); border-radius: 12px;
        padding: 20px 16px; text-align: center; cursor: pointer; color: var(--plateado);
        font-size: 13px; transition: border-color 0.2s; width: 100%;
    }
    .btn-nuevo-vendedor:hover { border-color: var(--dorado); color: var(--dorado); }

    .perfil-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
    .perfil-avatar {
        width: 64px; height: 64px; border-radius: 50%;
        background: var(--dorado); color: var(--negro);
        font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .perfil-info h2 { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
    .perfil-info p { font-size: 13px; color: var(--plateado); }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
    .stat-box {
        background: var(--gris2); border: 1px solid var(--borde);
        border-radius: 10px; padding: 14px; text-align: center;
    }
    .stat-num { font-size: 22px; font-weight: 700; color: var(--dorado); }
    .stat-label { font-size: 11px; color: var(--plateado); margin-top: 2px; }
    .acciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }

    .productos-entrega { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-top: 12px; }
    .prod-card {
        background: var(--gris2); border: 1px solid var(--borde);
        border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; transition: border-color 0.2s;
    }
    .prod-card.seleccionado { border-color: var(--dorado); }
    .prod-card img { width: 100%; height: 120px; object-fit: contain; background: var(--gris); display: block; transition: transform 0.3s ease; }
    .prod-card:hover img { transform: scale(1.08); }
    .prod-card:active img { transform: scale(1.04); }
    .prod-card-info { padding: 8px; }
    .prod-card-codigo { font-size: 10px; color: var(--dorado); font-weight: 600; }
    .prod-card-nombre { font-size: 11px; margin: 2px 0; }
    .prod-card-precio { font-size: 12px; font-weight: 700; color: var(--dorado-claro); }
    .prod-card-qty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--borde); }
    .qty-btn {
        background: var(--gris); border: none; color: var(--blanco);
        width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px;
        display: flex; align-items: center; justify-content: center;
    }
    .qty-num { font-size: 13px; font-weight: 700; min-width: 20px; text-align: center; }

    .carrito-entrega {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--gris); border-top: 1px solid var(--dorado);
        padding: 12px 16px; display: none; flex-direction: column; gap: 8px; z-index: 200;
        max-height: 44vh;
    }
    .carrito-entrega.visible { display: flex; }
    .carrito-info { font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
    .carrito-info strong { color: var(--dorado); font-size: 15px; }
    .carrito-preview {
        display: flex; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden;
        border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
        padding: 8px 2px; margin: 2px 0;
        scrollbar-width: thin;
    }
    .carrito-preview:empty { display: none; border: none; padding: 0; margin: 0; }
    .carrito-preview-item {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: rgba(255,255,255,0.03); border-radius: 8px; font-size: 11px;
        padding: 6px; flex-shrink: 0; width: 76px; position: relative;
    }
    .carrito-preview-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #222; }
    .carrito-preview-item .cpi-info { width: 100%; text-align: center; }
    .carrito-preview-item .cpi-codigo { color: var(--dorado); font-weight: 700; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .carrito-preview-item .cpi-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; width: 100%; }
    .carrito-preview-item .cpi-qty {
        position: absolute; top: 2px; right: 2px; font-weight: 700; color: #0a0a0a;
        background: #8ab4f0; border-radius: 10px; padding: 1px 5px; font-size: 10px;
    }
    .carrito-preview-item .cpi-quitar {
        position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.6); border: none;
        color: #e74c3c; font-size: 12px; cursor: pointer; padding: 1px 5px; line-height: 1.4;
        border-radius: 50%;
    }
    .carrito-entrega-acciones-btn {
        padding: 16px 14px !important; font-size: 15px !important; font-weight: 700 !important;
        border-radius: 10px !important;
    }

    .inv-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--gris2); border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 8px; }
    .inv-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    .inv-item-info { flex: 1; min-width: 0; }
    .inv-item-codigo { font-size: 10px; color: var(--dorado); font-weight: 600; }
    .inv-item-nombre { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inv-item-precio { font-size: 12px; color: var(--plateado); }
    .inv-item-acciones { display: flex; gap: 6px; flex-shrink: 0; }

    .modal-overlay {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
        z-index: 1000; align-items: center; justify-content: center; padding: 20px;
    }
    .modal-overlay.active { display: flex; }
    .modal-box {
        background: var(--gris); border: 1px solid var(--borde); border-radius: 16px;
        padding: 28px 24px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
        animation: modalIn 0.3s cubic-bezier(.34,1.56,.64,1);
    }
    /* Registrar Devolución: modal ancho, productos en columnas, acciones siempre visibles */
    #modal-devolucion .modal-box { max-width: 1180px; width: 96vw; }
    .dev-top { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
    .dev-top > .btn { margin-bottom: 0 !important; height: 100%; min-height: 52px; }
    .dev-top #resumen-devolucion { margin-bottom: 0 !important; }
    #lista-devolucion { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
    #lista-devolucion > div { margin-bottom: 0 !important; }
    .dev-acciones { position: sticky; bottom: -28px; margin: 16px -24px -28px !important; padding: 14px 24px 28px; background: linear-gradient(to bottom, transparent, var(--gris) 28%); }
    @media (max-width: 820px) {
        .dev-top { grid-template-columns: 1fr; }
        .dev-top > .btn { height: auto; }
    }
    @keyframes slideUpIn {
        from { transform: translateX(-50%) translateY(20px); opacity: 0; }
        to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
    }
    .hub-bar { display:grid; grid-template-columns:1fr minmax(420px,46%) 1fr; gap:14px; align-items:stretch; margin-bottom:16px; background:var(--gris); border-radius:14px; padding:14px; }
    .hub-col { display:flex; flex-direction:column; gap:8px; }
    /* Pantalla limpia: logo y botones centrados en vertical */
    #pantalla-vendedores.hub-limpio:not([style*="display: none"]) { display:grid !important; align-content:center; box-sizing:border-box; min-height:calc(100vh - 63px); }
    #pantalla-vendedores.hub-limpio .hub-bar { margin-bottom:0; }
    .hub-logo { cursor:pointer; display:flex; align-items:center; }
    .hub-logo img { width:100%; display:block; border-radius:12px; }
    @media (max-width: 1000px) {
        .hub-bar { grid-template-columns:1fr 1fr; }
        .hub-logo { grid-column:1/-1; order:-1; }
    }
    @keyframes tabAlertaPulso {
        0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,.75), 0 2px 8px rgba(231,76,60,.5); }
        50%     { box-shadow: 0 0 0 8px rgba(231,76,60,0), 0 2px 14px rgba(231,76,60,.9); }
    }
    #tab-vendedores.tab-alerta, #tab-pedidos.tab-alerta { animation: tabAlertaPulso 1.4s infinite; }
    @keyframes modalIn {
        from { transform: scale(0.85) translateY(20px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
    }
    .modal-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--dorado); margin-bottom: 18px; letter-spacing: 1px; }
    .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .modal-close { background: none; border: none; color: var(--plateado); font-size: 22px; cursor: pointer; } #cvd-confirmar:disabled { opacity: 0.35 !important; filter: grayscale(0.7) !important; cursor: not-allowed; box-shadow: none !important; }

    .mc-chip {
        padding: 7px 13px; border-radius: 20px; border: 1px solid var(--borde);
        background: transparent; color: var(--plateado); font-size: 12px; font-weight: 600;
        cursor: pointer; transition: all 0.15s; font-family: 'DM Sans', sans-serif;
    }
    .mc-chip.activo { border-color: var(--dorado); background: rgba(201,168,76,0.15); color: var(--dorado); }
    .mc-chip:hover { border-color: var(--dorado); }

    .foto-upload {
        border: 2px dashed var(--borde); border-radius: 10px; padding: 24px; text-align: center;
        cursor: pointer; transition: border-color 0.2s; margin-bottom: 12px; position: relative;
    }
    .foto-upload:hover { border-color: var(--dorado); }
    .foto-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .foto-preview { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; display: none; margin-bottom: 12px; }

    #toast {
        position: fixed; bottom: 80px; left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: var(--gris2); color: var(--blanco); padding: 10px 20px;
        border-radius: 20px; font-size: 13px; opacity: 0; transition: all 0.3s;
        z-index: 9999; white-space: nowrap; pointer-events: none;
    }
    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
    .badge-dorado { background: rgba(201,168,76,0.2); color: var(--dorado); }
    .badge-verde { background: rgba(45,122,79,0.2); color: #4caf82; }
    .badge-rojo { background: rgba(192,57,43,0.2); color: #e74c3c; }

    .corte-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gris2); border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; }
    .corte-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    .corte-item-info { flex: 1; min-width: 0; }
    .corte-item-acciones { display: flex; gap: 6px; }
    .corte-btn { padding: 5px 10px; border-radius: 6px; border: none; font-size: 11px; font-weight: 600; cursor: pointer; }
    .corte-btn-renovar { background: rgba(201,168,76,0.2); color: var(--dorado); }
    .corte-btn-devolver { background: rgba(192,57,43,0.2); color: #e74c3c; }
    .corte-btn-renovar.activo { background: var(--dorado); color: var(--negro); }
    .corte-btn-devolver.activo { background: var(--rojo); color: #fff; }

    .link-box { background: var(--gris2); border: 1px solid var(--dorado); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .link-box input { flex: 1; background: transparent; border: none; color: var(--dorado-claro); font-size: 12px; margin-bottom: 0; }

    .search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
    .search-bar input { margin-bottom: 0; flex: 1; }

    @media(max-width: 480px) {
        .stats-grid { grid-template-columns: 1fr 1fr; }
        .acciones-grid { grid-template-columns: 1fr; }
        .productos-entrega { grid-template-columns: repeat(2, 1fr); }
    }

    /* Táctil móvil — los botones +/- de cantidad median 24x24px, muy chicos
       para el dedo (mínimo recomendado ~40px). Solo aplica hasta 600px, así
       que en PC (mouse, precisión de pixel) no cambia nada. */
    @media(max-width: 600px) {
        .qty-btn { width: 38px; height: 38px; font-size: 17px; }
        .prod-card-qty { gap: 14px; padding: 8px; }
        .qty-num { font-size: 15px; min-width: 18px; text-align: center; }

        /* Pastillas de talla (entrega a vendedor): los botones +/- llevan
           tamaño inline (20px) porque en desktop van muy apretados uno junto
           a otro — pero eso también le gana al media query de arriba, así
           que hace falta !important acá para agrandarlos en móvil. La
           pastilla necesita más ancho para que los botones más grandes quepan. */
        .talla-pill { min-width: 72px !important; padding: 6px 4px !important; }
        .talla-pill-btn { width: 32px !important; height: 32px !important; font-size: 16px !important; }
        .menu-punto-btn { width: 34px !important; height: 34px !important; }

        /* iOS hace zoom automático al enfocar un campo con font-size menor a
           16px — con menos de eso, tocar "Nombre del cliente" o cualquier
           input dispara un zoom que luego queda pegado y descuadra el resto
           de la pantalla (incluido el escáner). 16px lo evita por completo. */
        input, select, textarea { font-size: 16px !important; }
    }

/* Móvil/tablet: la página no se desplaza hacia los lados — todo queda dentro del ancho de la pantalla */
html,body{ max-width:100%; overflow-x:clip; overscroll-behavior-x:none; }
@supports not (overflow:clip){ html,body{ overflow-x:hidden; } }

/* 📨 Datos de envío (barra de arriba): en el celular solo el ícono */
@media (max-width: 600px) { .txt-datos-envio { display: none; } }

/* ⚡ VENTA RÁPIDA: sub-pantalla de Venta directa (js/hub-28-venta-directa-carrito.js). z-index 900: debajo de los modales
   (1000+), la cámara (2000) y los avisos, que se abren encima. */
#vr { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #0f0f11; }
#vr[hidden] { display: none; }
.vr-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--dorado, #c9a84c); background: #08080a; }
.vr-top h1 { flex: 1; font-size: 16px; color: var(--dorado, #c9a84c); letter-spacing: 1px; margin: 0; }
.vr-tbtn { background: #222; border: 0; color: #ccc; border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.vr-pedido { border: 1.5px solid #2ecc71 !important; background: #10221a !important; }
.vr-pedido h2 { color: #2ecc71 !important; }
.vr-ped-datos { font-size: 13px; color: #ddd; line-height: 1.6; overflow-wrap: anywhere; }
.vr-ped-item { display: flex; align-items: center; gap: 8px; background: #0b1a13; border: 1px solid #2f5f3f; border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.vr-ped-item span { flex: 1; color: #e8d9a8; font-size: 13px; }
.vr-ped-item button { background: var(--dorado, #c9a84c); color: #111; border: 0; border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.vr-logo { cursor: pointer; padding-right: 10px; margin-right: 2px; border-right: 1px solid #333; white-space: nowrap; }
@media (max-width: 560px) { .vr-tbtn span { display: none; } .vr-h1-largo { display: none; } .vr-logo { font-size: 17px; } }
.vr-cuerpo { flex: 1; overflow: auto; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; align-content: start; }
@media (min-width: 900px) { .vr-cuerpo { grid-template-columns: 1.1fr 1fr; overflow: hidden; } .vr-col { overflow: auto; padding-bottom: 12px; } }
.vr-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#vr .card { margin: 0; }
.vr-card h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vr-card h2 small { color: #888; font-weight: 400; font-size: 11px; letter-spacing: 0; font-family: 'DM Sans', sans-serif; }
.vr-bus { display: flex; gap: 6px; }
#vr-q { flex: 1; min-width: 0; padding: 12px; background: #111; border: 1px solid var(--dorado, #c9a84c); border-radius: 10px; color: #fff; font-size: 16px; }
.vr-b { border: 0; border-radius: 10px; padding: 0 12px; font-weight: 700; font-size: 13px; cursor: pointer; }
.vr-azul { background: linear-gradient(135deg,#0a4a6b,#0ea5e9); color: #fff; font-size: 18px; }
.vr-gris { background: #26262a; color: #ccc; white-space: nowrap; }
.vr-oro { background: linear-gradient(135deg,#c9a84c,#a87d20); color: #111; }
#vr-res { margin-top: 8px; display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 900px) { #vr-res { grid-template-columns: 1fr 1fr; } }
#vr-res:empty { display: none; }
.vr-it { display: flex; align-items: center; gap: 10px; background: #111; border: 1px solid #26262a; border-radius: 10px; padding: 7px; cursor: pointer; min-width: 0; }
.vr-it.activo { border-color: var(--dorado, #c9a84c); }
.vr-it img, .vr-it .ph { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #2a2a2a; display: flex; align-items: center; justify-content: center; }
.vr-it .tx { flex: 1; min-width: 0; font-size: 11px; color: #999; }
.vr-it .tx b { display: block; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-it .pr { color: var(--dorado, #c9a84c); font-weight: 800; font-size: 13px; }
.vr-it .mas { width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--dorado, #c9a84c); color: #111; font-size: 18px; font-weight: 800; flex-shrink: 0; }
.vr-it .en { font-size: 11px; color: #2ecc71; }
.vr-nada { color: #888; font-size: 12px; padding: 6px 2px; }
#vr-vacio { color: #aaa; font-size: 13px; line-height: 1.6; text-align: center; padding: 22px 14px; }
.vr-pie { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dorado, #c9a84c); background: #08080a; }
.vr-t { flex: 1; min-width: 0; }
.vr-t small { display: block; color: #999; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-t b { font-size: 22px; color: var(--dorado, #c9a84c); }
.vr-ok { padding: 13px 18px; font-size: 15px; border-radius: 12px; }
.vr-ok:disabled { opacity: .5; }
/* dentro de la sub-pantalla el botón de abajo reemplaza al «Confirmar Venta» del formulario */
#vr #btn-confirmar-venta-vd { display: none; }
body.vr-abierta { overflow: hidden; }
#fab-vd, #fab-scan-vd { display: none !important; }
/* Venta directa: 🏪 Se lo lleva / 📦 Envío */
.btn-entrega-vd { flex: 1; padding: 10px 6px; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; background: #2a2a2a; color: #888; }
.btn-entrega-vd.on { background: var(--dorado, #c9a84c); color: #111; }

/* Barra de arriba en el celular: antes iba en una sola fila y los botones de la derecha (👆 Huella,
   🔄 Actualizar, Salir) quedaban cortados fuera de la pantalla. Ahora el logo va arriba y los botones
   en filas de 4 que siempre caben. */
@media (max-width: 700px) {
    .header { flex-wrap: wrap; gap: 10px; padding: 10px 12px; position: static; }
    .header-botones { width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
    .header-botones > .btn { width: 100%; min-width: 0; padding: 8px 4px !important; font-size: 12px !important; line-height: 1.2; white-space: normal; text-align: center; }
    .header-botones > #sync-indicator { grid-column: 1 / -1; margin: 0 !important; text-align: center; }
    .header-botones > #sync-indicator:empty { display: none; }
}

/* Foto del producto en las tarjetas de 📦 Stock (hub-17-stock.js) */
.stock-foto, .inv-item img.stock-foto { width: 130px; height: 130px; border-radius: 10px; }
@media (max-width: 700px) { .stock-foto, .inv-item img.stock-foto { width: 96px; height: 96px; } }

/* ✨ Foto profesional (prueba) — js/hub-35-foto-pro.js */
.fp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-par figure { margin: 0; }
.fp-par img, .fp-espera { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #1a1a1a; display: block; }
.fp-espera { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--dorado); font-size: 13px; padding: 10px; }
.fp-espera span { color: var(--plateado); font-size: 11px; }
.fp-par figcaption { font-size: 12px; color: var(--plateado); margin-top: 4px; text-align: center; }
@media (max-width: 560px) { .fp-par { grid-template-columns: 1fr; } }