/* =====================================================================
   VENETEX · Envíos Nacionales
   Todo va bajo .vx-scope para no afectar el header/footer del sitio.
   ===================================================================== */
.vx-scope{
  --vx-blue:var(--bs-primary,#06A3DA); --vx-navy:#091E3E; --vx-ink:#1d2939;
  --vx-muted:#667085; --vx-line:#e4e7ec; --vx-bg:#f4f7fb; --vx-ok:#12b76a;
  --vx-purple:#5C0ED0; --vx-yellow:#FFD000; --vx-radius:14px;
  color:var(--vx-ink);
}
.vx-scope *{box-sizing:border-box}

/* ---------- Hero (usa .bg-header del sitio + extras) ---------- */
.vx-hero-nac{position:relative;overflow:hidden;margin-bottom:0}
.vx-hero-nac::after{content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,208,0,.25),transparent 65%);pointer-events:none}
.vx-pill{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:6px 16px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.4px;margin-bottom:14px;backdrop-filter:blur(4px)}
.vx-hero-sub{font-size:clamp(16px,2vw,20px);max-width:680px;opacity:.95}
.vx-hero-nac{--vx-blue:var(--bs-primary,#06A3DA);--vx-yellow:#FFD000}
.vx-hero-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:30px auto 0;position:relative;counter-reset:paso}
.vx-paso{position:relative;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:20px 12px 16px;
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.25s}
.vx-paso:hover{background:rgba(255,255,255,.22);transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
/* flecha que une un paso con el siguiente */
.vx-paso:not(:last-child)::after{content:"";position:absolute;right:-12px;top:44px;width:10px;height:10px;border-top:2px solid rgba(255,255,255,.75);
  border-right:2px solid rgba(255,255,255,.75);transform:rotate(45deg);z-index:2}
.vx-paso-ico{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:radial-gradient(circle at 30% 25%,#fff 0%,#eef8ff 70%);color:var(--vx-blue);
  box-shadow:0 0 0 6px rgba(255,255,255,.18),0 10px 22px -8px rgba(0,0,0,.45);transition:.25s}
.vx-paso:hover .vx-paso-ico{transform:scale(1.08) rotate(-4deg)}
.vx-paso-ico svg{width:30px;height:30px}
.vx-paso-n{position:absolute;top:-4px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--vx-yellow);color:#1d2939;
  font-style:normal;font-weight:900;font-size:12.5px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid #fff}
.vx-paso b{font-size:15px;letter-spacing:.2px}
.vx-paso small{opacity:.88;font-size:12.5px}
@media(max-width:768px){.vx-hero-steps{grid-template-columns:repeat(2,1fr)}.vx-paso:nth-child(2)::after{display:none}}
@media(prefers-reduced-motion:reduce){.vx-paso,.vx-paso-ico{transition:none}}

/* ---------- Contenedor ---------- */
.vx-wrap{max-width:900px;margin:-40px auto 60px;padding:0 16px;position:relative;z-index:2}
.vx-card{background:#fff;border-radius:var(--vx-radius);box-shadow:0 18px 40px -16px rgba(9,30,62,.25);border:1px solid var(--vx-line)}
.vx-card-body{padding:28px}
@media(max-width:576px){.vx-card-body{padding:20px}}

/* ---------- Stepper ---------- */
.vx-steps{display:flex;gap:6px;padding:18px 28px;border-bottom:1px solid var(--vx-line);overflow-x:auto}
.vx-step{flex:1;min-width:110px;display:flex;align-items:center;gap:10px;color:var(--vx-muted);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.vx-step .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eef2f6;color:var(--vx-muted);font-weight:800;flex:none;transition:.25s}
.vx-step.active{color:var(--vx-ink)} .vx-step.active .n{background:var(--vx-blue);color:#fff;box-shadow:0 0 0 5px rgba(6,163,218,.18)}
.vx-step.done .n{background:var(--vx-ok);color:#fff}
.vx-pane{display:none;animation:vxfade .25s ease} .vx-pane.active{display:block}
@keyframes vxfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vx-section-title{font-size:20px;font-weight:800;margin:0 0 4px;color:var(--vx-navy)}
.vx-section-sub{color:var(--vx-muted);font-size:14.5px;margin:0 0 22px}

/* ---------- Inputs ---------- */
.vx-scope .form-label{font-weight:700;font-size:13.5px;color:#344054;margin-bottom:6px}
.vx-scope .form-label .req{color:#d92d20}
.vx-scope .form-control,.vx-scope .form-select{border-radius:10px;border:1px solid #d0d5dd;padding:10px 13px;font-size:15px;min-height:46px;background-color:#fff}
.vx-scope textarea.form-control{min-height:auto}
.vx-scope .form-control:focus,.vx-scope .form-select:focus{border-color:var(--vx-blue);box-shadow:0 0 0 4px rgba(6,163,218,.15)}
.vx-scope .form-control.is-invalid,.vx-scope .form-select.is-invalid{border-color:#f04438}
.vx-scope .input-group-text{border-radius:10px;background:#f9fafb;border-color:#d0d5dd}
.vx-scope .form-text{font-size:12.5px}
.vx-scope .btn{border-radius:10px;font-weight:700}

/* Autocompletado de dirección */
.vx-ac{position:relative}
.vx-ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--vx-line);border-radius:12px;
  box-shadow:0 14px 30px -10px rgba(9,30,62,.3);z-index:30;overflow:hidden;display:none}
.vx-ac-list.show{display:block}
.vx-ac-item{padding:10px 14px;cursor:pointer;font-size:14px;display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid #f2f4f7}
.vx-ac-item:last-child{border-bottom:0}
.vx-ac-item:hover,.vx-ac-item.on{background:#f0f9ff}
.vx-ac-item i{color:var(--vx-blue);margin-top:3px}
.vx-ac-foot{font-size:11px;color:#98a2b3;padding:6px 14px;background:#fafafa}
.vx-zip-ok{color:var(--vx-ok);font-size:12.5px;font-weight:600}

/* Upload */
.vx-drop{border:2px dashed #c6d2e1;border-radius:12px;padding:22px;text-align:center;cursor:pointer;transition:.2s;background:#fafcff}
.vx-drop:hover,.vx-drop.drag{border-color:var(--vx-blue);background:#f0f9ff}
.vx-drop.has-file{border-style:solid;border-color:var(--vx-ok);background:#f2fbf6}
.vx-drop .ico{font-size:28px;color:var(--vx-blue)}
.vx-drop.is-invalid{border-color:#f04438}

/* Tipo de envío */
.vx-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vx-choice label{border:2px solid var(--vx-line);border-radius:12px;padding:16px;cursor:pointer;display:flex;gap:12px;align-items:center;transition:.2s;font-weight:700;margin:0}
.vx-choice input{display:none}
.vx-choice input:checked+label{border-color:var(--vx-blue);background:#f0f9ff;box-shadow:0 0 0 4px rgba(6,163,218,.12)}
.vx-choice .em{font-size:26px}
.vx-choice.is-invalid label{border-color:#f04438}

/* Contador */
.vx-counter{display:flex;align-items:center;border:1px solid #d0d5dd;border-radius:10px;overflow:hidden;width:max-content}
.vx-counter button{border:0;background:#f2f4f7;width:46px;height:46px;font-size:20px;font-weight:800;color:var(--vx-ink)}
.vx-counter button:hover{background:#e4e7ec}
.vx-counter input{width:64px;text-align:center;border:0;font-weight:800;font-size:18px;background:#fff}
.vx-totals{display:flex;gap:12px;flex-wrap:wrap}
.vx-total{flex:1;min-width:140px;background:#f4f8fd;border-radius:12px;padding:12px 16px}
.vx-total small{color:var(--vx-muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.vx-total b{display:block;font-size:20px;color:var(--vx-navy)}
.vx-total.seguro{background:#f5f0ff} .vx-total.seguro b{color:var(--vx-purple)}

/* Caja */
.vx-box{border:1px solid var(--vx-line);border-radius:14px;padding:18px;margin-bottom:16px;background:#fcfdff}
.vx-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;flex-wrap:wrap}
.vx-box-tag{background:var(--vx-blue);color:#fff;font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:999px}
.vx-box-cost{font-size:13px;color:var(--vx-muted)} .vx-box-cost b{color:var(--vx-purple)}

/* ---------- Programa de protección ---------- */
.vx-prot-title{color:var(--vx-purple);font-weight:900;text-align:center;font-size:clamp(20px,3vw,26px);margin:0}
.vx-prot-title+hr{width:70px;height:3px;background:var(--vx-yellow);opacity:1;border:0;margin:8px auto 10px}
.vx-prot-sub{text-align:center;color:var(--vx-muted);font-weight:700;font-size:13.5px;margin-bottom:16px}
.vx-planes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:10px}
@media(max-width:768px){.vx-planes{grid-template-columns:1fr}}
.vx-plan{border:1px solid var(--vx-line);border-radius:16px;padding:16px;text-align:center;background:#fff;font-size:12.5px;color:#475467;display:flex;flex-direction:column}
.vx-plan.dest{border-color:var(--vx-purple)}
.vx-plan h6{color:var(--vx-purple);font-weight:800;font-size:15px;margin:0 0 4px}
.vx-plan .p{font-size:28px;font-weight:900;color:#2b2b2b;line-height:1}
.vx-plan .p small{display:block;font-size:11px;color:var(--vx-muted);font-weight:800;letter-spacing:.4px;margin-top:4px}
.vx-plan dl{text-align:left;margin:12px 0 10px}
.vx-plan dt{color:var(--vx-purple);font-size:11px;font-weight:800;text-transform:uppercase;margin-top:6px}
.vx-plan dd{margin:0}
.vx-plan .tag{margin-top:auto;border-radius:8px;padding:6px;font-weight:800;font-size:11px;text-transform:uppercase;background:var(--vx-yellow);color:#111}
.vx-plan .tag.e{background:var(--vx-purple);color:#fff}
.vx-prot-nota{text-align:center;font-size:12.5px;font-weight:700;color:var(--vx-muted);margin:6px 0 0}
.vx-prot-nota.r{color:#d92d20}

/* Selector de plan dentro de cada caja */
.vx-planpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
@media(max-width:576px){.vx-planpick{grid-template-columns:1fr}}
.vx-planpick input{display:none}
.vx-planpick label{border:2px solid var(--vx-line);border-radius:12px;padding:10px 12px;cursor:pointer;margin:0;transition:.15s;display:block;background:#fff}
.vx-planpick label b{display:block;color:var(--vx-purple);font-size:14px}
.vx-planpick label small{color:var(--vx-muted);font-size:12px}
.vx-planpick label .c{float:right;font-weight:800;color:var(--vx-ink)}
.vx-planpick input:checked+label{border-color:var(--vx-purple);background:#f7f2ff;box-shadow:0 0 0 3px rgba(92,14,208,.12)}
.vx-planpick input:disabled+label{opacity:.4;cursor:not-allowed}
.vx-planpick.is-invalid label{border-color:#f04438}
.vx-planpick [hidden]{display:none!important}
.vx-planes.vx-planes-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:768px){.vx-planes.vx-planes-2{grid-template-columns:1fr}}
.vx-aviso-premium{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:12px;background:#fffaeb;border:1px solid #fedf89;color:#7a2e0e;font-size:13px;line-height:1.4}
.vx-aviso-premium[hidden]{display:none}
.vx-aviso-premium i{color:#dc6803;font-size:18px;margin-top:2px}
.vx-plan-general{background:#f7f2ff;border:1px solid #e3d5ff;border-radius:12px;padding:12px 14px;font-size:13.5px}
.vx-plan-general b{color:var(--vx-purple)}
.vx-toggle{display:flex;align-items:center;gap:12px;background:#fffbea;border:1px solid #fde68a;border-radius:12px;
  padding:10px 14px;min-height:46px;cursor:pointer;margin:0;position:relative;user-select:none}
.vx-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.vx-sw{flex:none;width:44px;height:24px;border-radius:999px;background:#d0d5dd;position:relative;transition:.2s}
.vx-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.vx-toggle input:checked+.vx-sw{background:var(--vx-purple)}
.vx-toggle input:checked+.vx-sw::after{transform:translateX(20px)}
.vx-toggle input:focus-visible+.vx-sw{box-shadow:0 0 0 4px rgba(92,14,208,.2)}
.vx-toggle-txt{line-height:1.25;font-size:13.5px}
.vx-toggle-txt b{display:block;color:var(--vx-ink)}
.vx-toggle-txt small{color:var(--vx-muted);font-size:12px}
.vx-toggle:has(input:checked){background:#f7f2ff;border-color:#d8c4ff}
.vx-scope .form-text.ok{color:var(--vx-ok);font-weight:600}
.vx-scope .form-text.bad{color:#d92d20;font-weight:600}

/* Firma */
.vx-sign{border:1.5px solid #d0d5dd;border-radius:12px;background:#fff;position:relative;touch-action:none}
.vx-sign canvas{width:100%;height:170px;display:block;border-radius:12px;cursor:crosshair}
.vx-sign .ph{position:absolute;inset:0;display:grid;place-items:center;color:#98a2b3;pointer-events:none;font-size:14px}
.vx-sign.is-invalid{border-color:#f04438}
.vx-check{background:#f9fafb;border:1px solid var(--vx-line);border-radius:10px;padding:12px 14px 12px 40px;margin-bottom:10px;font-size:13px;color:#475467;display:block}
.vx-scope .vx-check .form-check-input{margin-left:-26px}

/* Acciones */
.vx-actions{display:flex;justify-content:space-between;gap:10px;padding:18px 28px;border-top:1px solid var(--vx-line);background:#fcfcfd;border-radius:0 0 var(--vx-radius) var(--vx-radius)}
.vx-actions .btn{padding:11px 22px}
.vx-next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.vx-next div{background:#fff;border:1px solid var(--vx-line);border-radius:12px;padding:16px;font-size:13.5px;color:#475467}
.vx-next b{display:block;color:var(--vx-ink);margin-bottom:4px}
@media(max-width:700px){.vx-next{grid-template-columns:1fr}}
.vx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* SweetAlert */
.swal2-popup{border-radius:18px!important}
.swal2-confirm,.swal2-deny,.swal2-cancel{border-radius:10px!important}
.vx-sum{text-align:left;font-size:14px}
.vx-sum table{width:100%;border-collapse:collapse;margin-top:6px}
.vx-sum td{padding:6px 4px;border-bottom:1px solid #eef0f3;vertical-align:top}
.vx-sum td:first-child{color:#667085;width:42%}
.vx-code{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:800;letter-spacing:1px;color:var(--bs-primary,#06A3DA);background:#f0f9ff;border-radius:12px;padding:12px 18px;display:inline-block;margin:6px 0}

/* =================== OPERADOR (página propia, Bootstrap 5.3) =================== */
body.vx-op{--vx-blue:#0b7fd6;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f7fb;margin:0}
.op-nav{background:#091E3E;color:#fff;padding:10px 0;position:sticky;top:0;z-index:50}
.op-nav .brand{font-weight:800;display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none}
.op-nav .brand img{height:38px;border-radius:9px;background:#fff}
.op-nav a.nl{color:#cfe3f7;text-decoration:none;font-weight:600;font-size:14px;margin-left:18px}
.op-nav a.nl:hover,.op-nav a.nl.on{color:#fff}
.op-main{padding:26px 0 60px}
.vx-op .btn-vx{background:var(--vx-blue);border-color:var(--vx-blue);color:#fff}
.vx-op .btn-vx:hover{background:#0969b2;color:#fff}
.op-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:14px}
.op-kpi span{display:block;font-size:12px;color:var(--vx-muted)}
.op-kpi span b{display:inline;font-size:inherit;color:var(--vx-ink)}
.op-kpi.destacado{background:#eef7ff;border-color:#b9dcf7}
.op-kpi.alerta b{color:#d92d20}
.op-kpi.revisar b{color:#b54708}
@keyframes vxTitila{0%,100%{box-shadow:0 0 0 0 rgba(247,144,9,.55);border-color:#f79009}50%{box-shadow:0 0 0 7px rgba(247,144,9,0);border-color:#fdb022;background:#fffaeb}}
.op-kpi.titila{animation:vxTitila 1.4s ease-in-out infinite;border-color:#f79009}
.op-revisar{display:inline-block;margin-top:3px;background:#fffaeb;border:1px solid #fdb022;color:#b54708;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 8px;animation:vxTitila 1.4s ease-in-out infinite}
.op-rec-scan{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--vx-blue);border-radius:14px;padding:10px 12px}
.op-rec-scan .ico{font-family:monospace;letter-spacing:-2px;color:var(--vx-blue);font-weight:900;font-size:20px}
.op-rec-scan input{border:0!important;box-shadow:none!important}
.op-rec-card{background:#fff;border:1px solid var(--vx-line);border-left:5px solid #f79009;border-radius:12px;padding:14px 16px;margin-bottom:10px}
.op-rec-card.hecha{border-left-color:#12b76a}
.op-rec-med{font-family:ui-monospace,Menlo,monospace;font-size:15px}
.op-rec-calc{background:#f4f8fd;border-radius:10px;padding:8px 12px;font-size:13px}
.op-rec-box{border:1px dashed #fdb022;background:#fffcf5;border-radius:12px;padding:12px 14px;margin-top:12px}
.op-rec-box.ok{border-style:solid;border-color:#a6e3c4;background:#f6fef9}
.op-rec-box.pend{border-style:solid;border-color:#f79009;animation:vxTitila 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.op-kpi.titila,.op-revisar,.op-rec-box.pend{animation:none}}
.op-alerta{display:flex;gap:14px;align-items:center;background:linear-gradient(90deg,#fff4e5,#fffbeb);border:1px solid #fbbf24;border-radius:12px;padding:12px 16px;margin-bottom:14px}
.op-alerta .ico{font-size:26px}
.op-alerta.rojo{background:linear-gradient(90deg,#fee4e2,#fff1f0);border-color:#f97066}
.op-dias{font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;display:inline-block;margin-top:2px;background:#eef2f6;color:#475467}
.op-dias.tarde{background:#fee4e2;color:#b42318}
.op-row-done{opacity:.6}
@media(max-width:600px){.op-kpis{grid-template-columns:repeat(2,1fr)}}
.op-kpi{background:#fff;border:1px solid var(--vx-line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.op-kpi:hover,.op-kpi.on{border-color:var(--vx-blue);box-shadow:0 0 0 3px rgba(11,127,214,.12)}
.op-kpi small{color:var(--vx-muted);font-weight:600;font-size:12.5px}
.op-kpi b{display:block;font-size:24px}
.op-table{background:#fff;border:1px solid var(--vx-line);border-radius:12px;overflow:hidden}
.op-table table{margin:0}
.op-table th{background:#f9fafb;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--vx-muted);font-weight:700;border-bottom:1px solid var(--vx-line)!important;white-space:nowrap}
.op-table td{vertical-align:middle;font-size:14px}
.op-table tbody tr{cursor:pointer}
.op-table tbody tr:hover{background:#f6faff}
.op-code{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--vx-blue)}
.op-prog{height:7px;border-radius:9px;background:#eef2f6;overflow:hidden;min-width:70px}
.op-prog span{display:block;height:100%;background:var(--vx-ok)}
.op-panel{background:#fff;border:1px solid var(--vx-line);border-radius:12px;padding:20px;margin-bottom:18px}
.op-panel h5{font-weight:700;font-size:15px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.op-dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:14px;margin:0}
.op-dl dt{color:var(--vx-muted);font-weight:500}
.op-dl dd{margin:0;font-weight:500;word-break:break-word}
.op-box{border:1px solid var(--vx-line);border-radius:12px;margin-bottom:14px;overflow:hidden;background:#fff}
.op-box-head{background:#f9fafb;padding:12px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--vx-line)}
.op-box-body{padding:16px}
.op-file{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed #c6d2e1;border-radius:10px;font-size:13px;min-height:44px}
.op-file.ok{border-style:solid;border-color:#a6e3c4;background:#f2fbf6}
.op-track{background:#f8fafc;border:1px solid var(--vx-line);border-radius:12px;padding:12px 14px;font-size:13.5px}
.op-track-list{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid #d0d5dd}
.op-track-list li{position:relative;padding:4px 0 6px 10px}
.op-track-list li::before{content:"";position:absolute;left:-20px;top:9px;width:10px;height:10px;border-radius:50%;background:#d0d5dd}
.op-track-list li:first-child::before{background:var(--vx-blue)}
.op-track-list span{display:block;color:var(--vx-muted);font-size:12px}
.op-track-list small{display:block;color:var(--vx-muted)}
.op-stephy{border-color:#c9e3f7;background:#f5fbff}
.op-pago{display:flex;gap:12px;align-items:center;border:1px solid var(--vx-line);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13.5px}
.op-pago-ico{width:42px;height:42px;border-radius:10px;background:#eef8ee;display:grid;place-items:center;font-size:20px;flex:none;overflow:hidden}
.op-pago-ico img{width:100%;height:100%;object-fit:cover}
.op-saldo{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
@media(max-width:576px){.op-saldo{grid-template-columns:1fr 1fr}.op-saldo>div:first-child{grid-column:1/-1}}
.op-saldo>div{background:#f8fafc;border:1px solid var(--vx-line);border-radius:10px;padding:8px 12px}
.op-saldo small{display:block;color:var(--vx-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.op-saldo b{font-size:19px}
.op-saldo .debe{color:#d92d20} .op-saldo .ok{color:#12b76a}
.op-cobros{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:768px){.op-cobros{grid-template-columns:1fr}}
.op-cobro{border:1px solid var(--vx-line);border-radius:12px;padding:12px 14px;background:#f8fafc}
.op-cobro-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.op-cobro-nums small{display:block;color:var(--vx-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.op-cobro-nums b{font-size:17px}
.op-cobro-nums .debe{color:#d92d20} .op-cobro-nums .ok{color:#12b76a}
.op-cobro-lock{background:#f2f4f7;border:1px dashed #98a2b3;border-radius:10px;padding:10px 12px;font-size:13px;color:#475467;margin:6px 0 10px}
.op-debe{margin-top:10px;font-weight:700;font-size:14px}
/* ---- Modo edición: los campos se habilitan solo al tocar "Editar" ---- */
[data-sec]:not(.editando) .solo-ed{display:none!important}
[data-sec].editando .solo-ver{display:none!important}
[data-sec].editando{outline:0}
.op-box [data-sec].editando,.op-rec-box.editando,.op-cobro.editando,[data-sec="notas"].editando,.op-stephy .editando{box-shadow:0 0 0 3px rgba(11,127,214,.22);border-radius:10px}
.vx-op [data-ed]:disabled:not([type=checkbox]):not([type=radio]){background:#f9fafb;color:#344054;opacity:1;cursor:default}
.vx-op .form-check-input[data-ed]:disabled{opacity:.85;cursor:default}
.vx-op .form-check-input[data-ed]:disabled~.form-check-label{opacity:1;cursor:default}
.op-borrador{font-size:11.5px;color:#b54708;font-weight:700}
.op-pago-form{background:#f9fafb;border:1px dashed #c6d2e1;border-radius:12px;padding:12px;margin-top:10px}
.op-match{display:inline-block;background:#fff7d6;border:1px solid #fde68a;color:#7a5a00;border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:600;margin-bottom:4px;font-family:ui-monospace,Menlo,monospace}
.op-salida{background:#fff;border:1px solid var(--vx-line);border-radius:10px;padding:10px 12px}
.op-salida.done{background:#ecfdf3;border-color:#a6e3c4}
.op-salida .form-check-input{width:2.4em;height:1.25em;cursor:pointer}
.op-salida .form-check-input:checked{background-color:#12b76a;border-color:#12b76a}
.op-seg{display:inline-block;background:#f5f0ff;color:#5C0ED0;border-radius:999px;padding:2px 10px;font-weight:700;font-size:12px}
.op-hist{font-size:13px;max-height:320px;overflow:auto}
.op-hist li{padding:7px 0;border-bottom:1px solid #f0f2f5}
.op-login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#091E3E,#06A3DA);padding:16px}

/* ---- Cambio de clave / usuarios ---- */
.op-clave-ico{font-size:40px;line-height:1;margin-bottom:6px}
.op-reglas{list-style:none;padding:0;margin:6px 0 0;color:#667085}
.op-reglas li::before{content:'○ ';color:#98a2b3}
.op-reglas li.ok{color:#067647}
.op-reglas li.ok::before{content:'✓ ';color:#12b76a;font-weight:700}
.op-users td{vertical-align:middle}
.op-users .yo{font-size:11px}
.op-users tr.inactivo td{opacity:.55}
.op-cred{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.op-cred div{background:#f2f8fe;border:1px solid #cfe5fb;border-radius:10px;padding:10px 12px}
.op-cred small{display:block;color:#667085;font-size:12px}
.op-cred b{font-size:16px;word-break:break-all}

/* ---- Etiqueta UPS propia (cliente) ---- */
.vx-scope .vx-propia{background:#f0f9ff;border:1px solid #b9e6fe;border-radius:14px;padding:14px 16px;font-size:14px}
.vx-scope .vx-propia-head{display:flex;gap:8px;align-items:center;margin-bottom:6px;color:#026aa2}
.vx-scope .vx-propia ol{padding-left:20px}
.vx-scope .vx-almacen{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:#fff;border:1px dashed #7cd4fd;border-radius:10px;padding:10px 12px}
.vx-scope .vx-almacen small{width:100%;color:#667085}
.vx-scope .vx-almacen b{flex:1;min-width:200px}
.vx-scope .vx-ups-in{display:flex;align-items:stretch}
.vx-scope .vx-ups-in .pre{display:flex;align-items:center;padding:0 12px;background:#f2f4f7;border:1px solid #d0d5dd;border-right:0;border-radius:10px 0 0 10px;color:#475467}
.vx-scope .vx-ups-in input{border-radius:0 10px 10px 0;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.vx-scope [data-ups-msg].ok{color:#067647;font-weight:600}
.vx-scope [data-ups-msg].err{color:#d92d20;font-weight:600}
.vx-scope [data-ups-msg].warn{color:#b54708}
.vx-scope #modChoice.is-invalid label{border-color:#f04438}
[data-solo-propia][hidden]{display:none!important}
.vx-op .op-propia{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;color:#026aa2;background:#e0f2fe;border:1px solid #b9e6fe;border-radius:999px;padding:1px 8px;white-space:nowrap}
.vx-op .op-propia-info{background:#f0f9ff;border:1px solid #b9e6fe;border-radius:10px;padding:8px 12px;font-size:13px;color:#065986}
.vx-op [hidden]{display:none!important}
/* ---- Cajas sin dueño ---- */
.vx-op .op-sd{border-left:4px solid #f79009}
.vx-op .op-sd.viejo{border-left-color:#d92d20;background:#fffbfa}
.vx-op .op-sd-tag{font-family:ui-monospace,monospace;font-weight:800;background:#fef0c7;color:#93370d;border-radius:6px;padding:1px 8px}
.vx-op .op-sd-box{border:1px solid #fedf89;background:#fffcf5}
.vx-op .op-nf{border:2px dashed #fdb022}
.vx-op .op-sd-res{max-height:340px;overflow:auto}
.vx-op .op-sd-caso{border:1px solid #e4e7ec;border-radius:10px;padding:8px 10px;margin-bottom:6px}
.vx-op .op-sd-caso .btn.active{background:#0b7fd6;color:#fff;border-color:#0b7fd6}
.vx-op .nl .op-nav-n{background:#f79009;color:#fff;border-radius:999px;font-size:11px;padding:0 6px;margin-left:3px}
.vx-scope .vx-mod-resumen{background:#f8fafc;border:1px solid #e4e7ec;border-radius:12px;padding:10px 14px;font-size:14px}
.vx-scope .vx-mod-resumen a{font-weight:700;margin-left:6px}
.vx-op .op-desglose{font-size:12.5px;color:#475467;background:#f8fafc;border:1px dashed #d0d5dd;border-radius:8px;padding:6px 10px;margin-bottom:8px}
.vx-op .op-desglose:empty{display:none}
/* ---- Fotos de las cajas ---- */
.vx-op .op-fotos{display:flex;flex-wrap:wrap;gap:8px}
.vx-op .op-foto{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid #d0d5dd;background:#f2f4f7}
.vx-op .op-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vx-op .op-foto-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(217,45,32,.92);color:#fff;font-size:12px;line-height:22px;padding:0}
.vx-op .op-foto-add{width:76px;height:76px;border:2px dashed #98a2b3;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:#475467;margin:0;background:#fff}
.vx-op .op-foto-add small{font-size:10.5px;line-height:1.1;text-align:center}
.vx-op .op-foto-add:hover{border-color:#0b7fd6;color:#0b7fd6}
.op-foto-pick{display:flex;flex-direction:column;gap:2px;border:2px dashed #98a2b3;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;width:100%}
.op-foto-pick:hover{border-color:#0b7fd6}
/* ---- Menú del panel en celular ---- */
@media(max-width:768px){
  .op-nav .container-xl>div:first-child{flex-wrap:wrap;row-gap:6px;width:100%}
  .op-nav .brand{width:100%;font-size:15px}
  .op-nav .brand img{height:30px}
  .op-nav a.nl{margin-left:0;margin-right:14px;font-size:13.5px;white-space:nowrap}
  .op-nav a.nl[target=_blank]{display:none}
  .op-nav .container-xl>div:last-child{width:100%;justify-content:space-between}
  .op-nav .container-xl>div:last-child a.nl{margin-right:0}
}
/* ---- Formulario en celular ---- */
@media(max-width:576px){
  .vx-scope .vx-choice{grid-template-columns:1fr}
  .vx-scope .vx-choice label{padding:12px 14px}
  .vx-scope .vx-steps{padding:14px 16px;gap:4px}
  .vx-scope .vx-step{min-width:0;flex:none;font-size:12px}
  .vx-scope .vx-step:not(.active) .t{display:none}
  .vx-scope .vx-step.active{flex:1}
}
.vx-op .op-dias.desp{background:#e8f8f0;color:#067647}
.vx-op .op-salida.despachado{background:#e8f8f0;border-color:#a6e9c5}