/* ═══════════════════════════════════════════
   MKV · Zona CSS  v3
   color: #76236c
═══════════════════════════════════════════ */
:root{
  --mkv-c:#76236c;
  --mkv-cl:#f5e8f4;
  --mkv-r:14px;
  --mkv-shadow:0 20px 60px rgba(0,0,0,.18);
  --mkv-f:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Barra flotante ───────────────────────── */
#mkv-bar{
  position:fixed;bottom:0;left:0;right:0;
  z-index:9900;
  background:#1e1b4b;color:#fff;
  padding:10px 16px;
  font-family:var(--mkv-f);
  box-shadow:0 -2px 16px rgba(0,0,0,.2);
  -webkit-font-smoothing:antialiased;
}
.mkv-bar-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
}
.mkv-bar-pin{font-size:16px;flex-shrink:0}
#mkv-bar-text{flex:1;font-size:13px;line-height:1.4}
#mkv-bar-text strong{font-weight:700}
.mkv-bar-vendor{color:#a5b4fc;font-size:12px}
#mkv-bar-btn{
  background:var(--mkv-c);color:#fff;border:none;
  padding:7px 18px;border-radius:20px;
  font:600 13px/1 var(--mkv-f);
  cursor:pointer;white-space:nowrap;
  transition:opacity .15s;flex-shrink:0;
}
#mkv-bar-btn:hover{opacity:.85}

/* ── Backdrop ─────────────────────────────── */
.mkv-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:10000;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ── Modal base ───────────────────────────── */
/* [hidden] puede ser sobreescrito por algunos temas — forzamos display:none */
[id="mkv-cp-modal"][hidden],
[id="mkv-vd-modal"][hidden],
[id="mkv-cp-backdrop"][hidden],
[id="mkv-vd-backdrop"][hidden] {
  display:none !important;
}

.mkv-modal{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:10001;
  width:min(440px,calc(100vw - 24px));
  max-height:calc(100vh - 32px);
  background:#fff;
  border-radius:var(--mkv-r);
  box-shadow:var(--mkv-shadow);
  padding:32px 26px 26px;
  font-family:var(--mkv-f);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mkv-modal-x{
  position:absolute;top:14px;right:14px;
  background:none;border:none;
  color:#94a3b8;cursor:pointer;
  padding:6px;border-radius:6px;
  display:flex;align-items:center;
  transition:color .15s,background .15s;
}
.mkv-modal-x:hover{color:#1e293b;background:#f1f5f9}

/* ── Modal CP ─────────────────────────────── */
.mkv-cp-icon{font-size:44px;text-align:center;margin-bottom:12px}
.mkv-cp-title{font-size:20px;font-weight:800;color:#1e293b;text-align:center;margin:0 0 6px}
.mkv-cp-sub{font-size:13px;color:#64748b;text-align:center;margin:0 0 20px;line-height:1.5}

.mkv-cp-field input{
  width:100%;box-sizing:border-box;
  padding:14px;
  border:1.5px solid #e2e8f0;border-radius:10px;
  font-size:22px;font-weight:700;
  letter-spacing:5px;text-align:center;
  font-family:var(--mkv-f);color:#1e293b;
  outline:none;transition:border-color .2s;
  margin-bottom:12px;
}
.mkv-cp-field input:focus{border-color:var(--mkv-c)}

.mkv-cp-msg{
  padding:10px 12px;border-radius:8px;
  font-size:13px;margin-bottom:10px;
  background:#fef2f2;color:#dc2626;
}

/* Sin cobertura */
.mkv-nozone{text-align:center;padding:16px 0 0;border-top:1px solid #f1f5f9;margin-top:16px}
.mkv-nozone-emoji{font-size:40px;margin-bottom:10px}
.mkv-nozone-title{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px}
.mkv-nozone-sub{font-size:13px;color:#64748b;margin:0 0 14px;line-height:1.5}

/* Con cobertura */
.mkv-zone-ok{text-align:center;padding:16px 0 0;border-top:1px solid #f1f5f9;margin-top:16px}
.mkv-zone-ok-icon{font-size:40px;margin-bottom:8px}
.mkv-zone-ok-title{font-size:15px;font-weight:700;color:#15803d;margin:0 0 14px}

/* ── Botones ──────────────────────────────── */
.mkv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 20px;border-radius:9px;
  font:600 14px/1 var(--mkv-f);
  cursor:pointer;border:none;
  text-decoration:none;
  transition:opacity .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.mkv-btn:active{transform:scale(.97)}
.mkv-btn--primary{background:var(--mkv-btn-bg,var(--mkv-c));color:#fff}
.mkv-btn--primary:hover{opacity:.88}
.mkv-btn--outline{background:#fff;color:#374151;border:1.5px solid #e2e8f0}
.mkv-btn--outline:hover{background:#f8fafc}
.mkv-btn--full{width:100%;box-sizing:border-box}
.mkv-btn--sm{padding:8px 14px;font-size:12px}
.mkv-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Modal Vendedor ───────────────────────── */
.mkv-vd-modal{
  width:min(520px,calc(100vw - 20px));
  padding:0;overflow:hidden;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 24px);
}
.mkv-vd-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  flex-shrink:0;
}
.mkv-vd-back{background:none;border:none;cursor:pointer;color:var(--mkv-c);padding:4px 8px;border-radius:6px;display:flex;align-items:center}
.mkv-vd-back:hover{background:var(--mkv-cl)}
.mkv-vd-title{flex:1;font-weight:700;font-size:15px;color:#1e293b;text-align:center}
.mkv-vd-modal .mkv-modal-x{position:static}

/* Stepper */
.mkv-stepper{display:flex;align-items:center;justify-content:center;gap:0;padding:12px 20px;flex-shrink:0}
.mkv-step-dot{
  width:28px;height:28px;border-radius:50%;
  background:#e2e8f0;color:#94a3b8;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  transition:background .2s,color .2s;
}
.mkv-step-dot--active{background:var(--mkv-c);color:#fff}
.mkv-step-dot--done{background:#16a34a;color:#fff}
.mkv-step-line{flex:1;height:2px;background:#e2e8f0;max-width:70px;transition:background .2s}
.mkv-step-line--done{background:#16a34a}

/* Paneles */
.mkv-vd-panel{padding:14px 18px 18px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.mkv-vd-panel-sub{font-size:13px;color:#64748b;margin:0;line-height:1.4}

/* Buscador */
.mkv-search-wrap input{
  width:100%;box-sizing:border-box;
  padding:10px 12px;
  border:1.5px solid #e2e8f0;border-radius:8px;
  font-size:14px;outline:none;
  font-family:var(--mkv-f);
  transition:border-color .2s;
}
.mkv-search-wrap input:focus{border-color:var(--mkv-c)}

/* Lista colonias */
.mkv-col-list{
  flex:1;min-height:160px;max-height:220px;
  overflow-y:auto;
  border:1px solid #e2e8f0;border-radius:9px;
  -webkit-overflow-scrolling:touch;
}
.mkv-col-item{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:11px 13px!important;
  width:100%!important;border:none!important;
  border-bottom:1px solid #f1f5f9!important;
  background:#fff!important;cursor:pointer!important;
  font-size:14px!important;text-align:left!important;
  transition:background .12s!important;
  box-sizing:border-box!important;
}
.mkv-col-item:last-child{border-bottom:none!important}
.mkv-col-item:hover{background:#f8fafc!important}
.mkv-col-item.sel{background:var(--mkv-cl)!important;border-left:3px solid var(--mkv-c)!important}
.mkv-col-check{
  width:20px!important;height:20px!important;min-width:20px!important;
  border-radius:50%!important;background:#e2e8f0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:11px!important;color:transparent!important;flex-shrink:0!important;
  transition:background .2s!important;
}
.mkv-col-item.sel .mkv-col-check{background:var(--mkv-c)!important;color:#fff!important}
.mkv-col-nombre{font-weight:600;color:#1e293b}
.mkv-col-muni{font-size:12px;color:#94a3b8;margin-left:auto}

/* Código input */
.mkv-code-row{display:flex;gap:8px}
.mkv-code-row input{
  flex:1;padding:10px 12px;
  border:1.5px solid #e2e8f0;border-radius:8px;
  font-size:13px;outline:none;font-family:var(--mkv-f);
  transition:border-color .2s;
}
.mkv-code-row input:focus{border-color:var(--mkv-c)}

/* Divisor */
.mkv-divider{display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:12px;margin:4px 0}
.mkv-divider::before,.mkv-divider::after{content:'';flex:1;height:1px;background:#e2e8f0}

/* Lista vendedores */
.mkv-vnd-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mkv-vnd-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border:1.5px solid #e2e8f0;border-radius:10px;
  cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s;
}
.mkv-vnd-card:hover,.mkv-vnd-card.sel{border-color:var(--mkv-c);background:var(--mkv-cl)}
.mkv-vnd-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--mkv-c);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;flex-shrink:0;
}
.mkv-vnd-info{flex:1}
.mkv-vnd-nombre{font-weight:700;font-size:14px;color:#1e293b}
.mkv-vnd-codigo{font-size:12px;color:#94a3b8}
.mkv-vnd-disc{font-size:12px;color:#15803d;font-weight:600}

/* Error */
.mkv-err{padding:9px 11px;background:#fef2f2;border-radius:7px;font-size:13px;color:#dc2626}

/* Placeholder de precio */
.mkv-price-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 13px;
  background:var(--mkv-cl);
  border:1.5px dashed var(--mkv-c);
  border-radius:20px;
  color:var(--mkv-c);font-size:13px;font-weight:600;
  text-decoration:none;
  font-family:var(--mkv-f);
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.mkv-price-btn:hover{background:#ecd5ea;text-decoration:none;color:var(--mkv-c)}

/* ── Responsive ───────────────────────────── */
@media(max-width:600px){
  .mkv-modal{padding:24px 16px 20px}
  .mkv-vd-modal{
    border-radius:var(--mkv-r) var(--mkv-r) 0 0;
    top:auto;bottom:0;
    transform:translateX(-50%);
    max-height:90vh;width:100%;
  }
  .mkv-bar-inner{flex-wrap:wrap;gap:8px}
  #mkv-bar-btn{margin-left:auto}
}

/* ── Botón "Continuar sin CP" ─────────────────── */
.mkv-skip-link{
  background:none;border:none;
  font-size:12px;color:#94a3b8;
  cursor:pointer;padding:4px 8px;
  border-radius:6px;
  font-family:var(--mkv-f);
  transition:color .15s;
  text-decoration:underline;
  text-underline-offset:2px;
}
.mkv-skip-link:hover{color:#64748b}

/* ── Modal "Saltar" ─────────────────────────────── */
.mkv-skip-modal{
  width:min(380px,calc(100vw - 24px));
  z-index:10003;
  padding:28px 24px;
  text-align:center;
}