/* ============================================================
   Clean It · Cotizador — estilos del front (plugin)
   Todo scopeado bajo #ckit-app para no chocar con el tema.
   La tipografía "Exo 2" la encola el plugin por separado.
   ============================================================ */
#ckit-app {
  --brand:#008CFD; --brand-dark:#0072d6; --brand-darker:#005bb0;
  --brand-light:#e6f2ff; --brand-tint:#f4f9ff;
  --wa:#25d366; --wa-dark:#1ebe5a;
  --ink:#142850; --muted:#73777f; --line:#e6e7ea; --line-strong:#d5d7db;
  --bg:#F2F2F2; --card:#ffffff; --danger:#e5544b;
  --radius:16px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(20,40,80,.06);
  --shadow-md:0 8px 24px rgba(20,40,80,.08);
  --font:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad-x:clamp(16px,2vw,34px);

  font-family:var(--font); color:var(--ink); line-height:1.45; font-size:16px;
  text-align:left; font-weight:400;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
#ckit-app, #ckit-app *, #ckit-app *::before, #ckit-app *::after { box-sizing:border-box; }
#ckit-app h1, #ckit-app h2, #ckit-app h3, #ckit-app p { margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:inherit; }
#ckit-app p { line-height:1.45; letter-spacing:normal; }
#ckit-app ul { list-style:none; margin:0; padding:0; }
#ckit-app button { font-family:inherit; }
#ckit-app input { font-family:inherit; }
#ckit-app a { text-decoration:none; }

/* ---- HEADER ---- */
#ckit-app .ck-header {
  background:var(--card); color:var(--ink); padding:0 var(--pad-x) 30px;
  box-shadow:var(--shadow-md); position:relative; border-bottom:3px solid var(--brand);
}
#ckit-app .ck-header-inner { max-width:1300px; margin:0 auto; display:flex; align-items:center; padding:16px 0 4px; }
#ckit-app .ck-brand { display:flex; align-items:center; }
#ckit-app .ck-logo { height:46px; width:auto; max-width:220px; display:block; }
#ckit-app .ck-hero { max-width:1300px; margin:0 auto; position:relative; z-index:1; }
#ckit-app .ck-hero h1 { font-size:clamp(1.55rem,3.4vw,2.35rem); font-weight:800; margin-top:8px; color:var(--ink); }
#ckit-app .ck-hero p { max-width:620px; margin:10px 0 0; color:var(--muted); font-size:.98rem; }
#ckit-app .ck-hero .ck-viatico { max-width:640px; margin-top:14px; }

/* ---- PAGE ---- */
#ckit-app .ck-page { max-width:1300px; margin:0 auto; padding:0 var(--pad-x) 40px; }

/* ---- PASO 1 ---- */
#ckit-app .ck-loc-block { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px 16px; margin-top:18px; position:relative; z-index:2; box-shadow:var(--shadow-md); }
#ckit-app .ck-loc-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#ckit-app .ck-step-badge { display:inline-block; background:var(--brand-light); color:var(--brand); font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
#ckit-app .ck-loc-head h2 { font-size:1.12rem; }
#ckit-app .ck-locs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
#ckit-app .ck-loc-card { display:flex; align-items:center; gap:11px; text-align:left; background:var(--brand-tint); border:2px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; cursor:pointer; font:inherit; color:inherit; transition:border-color .16s,background .16s,transform .1s,box-shadow .16s; }
#ckit-app .ck-loc-card:hover { border-color:var(--line-strong); transform:translateY(-1px); }
#ckit-app .ck-loc-emoji { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:1.25rem; background:#fff; box-shadow:var(--shadow-sm); flex:none; }
#ckit-app .ck-loc-label { font-weight:700; font-size:.98rem; }
#ckit-app .ck-loc-card[aria-checked="true"] { border-color:var(--brand); background:var(--brand-light); box-shadow:0 0 0 4px rgba(0,140,253,.12); }
#ckit-app .ck-loc-check { margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; color:#fff; font-size:.72rem; transition:background .15s,border-color .15s; flex:none; }
#ckit-app .ck-loc-card[aria-checked="true"] .ck-loc-check { background:var(--brand); border-color:var(--brand); }
#ckit-app .ck-loc-fields { margin-top:14px; }
#ckit-app .ck-loc-fields .ck-address { margin-bottom:0; }

/* ---- LAYOUT ---- */
#ckit-app .ck-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; margin-top:20px; align-items:start; }

/* ---- SERVICIOS ---- */
#ckit-app .ck-locked { background:var(--card); border:2px dashed var(--line-strong); border-radius:var(--radius); padding:56px 24px; text-align:center; color:var(--muted); }
#ckit-app .ck-locked-emoji { font-size:2.6rem; margin-bottom:10px; }
#ckit-app .ck-locked p { max-width:360px; margin:0 auto; font-size:1.02rem; }
#ckit-app .ck-category { margin-bottom:26px; }
#ckit-app .ck-cat-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
#ckit-app .ck-cat-emoji { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--brand-light); font-size:1.15rem; }
#ckit-app .ck-cat-head h3 { font-size:1.14rem; }
#ckit-app .ck-cat-line { flex:1; height:1px; background:var(--line); }
#ckit-app .ck-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:13px; }
#ckit-app .ck-card { position:relative; background:var(--card); border:2px solid var(--line); border-radius:var(--radius-sm); padding:15px 15px 13px; cursor:pointer; display:flex; flex-direction:column; transition:border-color .16s,box-shadow .16s,transform .1s; }
#ckit-app .ck-card:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
#ckit-app .ck-card[aria-pressed="true"] { border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,140,253,.12),var(--shadow-sm); background:linear-gradient(180deg,var(--brand-tint),#fff); }
#ckit-app .ck-name { font-weight:700; font-size:.96rem; padding-right:28px; }
#ckit-app .ck-meta { display:flex; align-items:baseline; gap:7px; margin-top:auto; padding-top:11px; }
#ckit-app .ck-price { font-weight:800; font-size:1.1rem; color:var(--brand); }
#ckit-app .ck-unit { font-size:.76rem; color:var(--muted); }
#ckit-app .ck-note { font-size:.73rem; color:var(--muted); margin-top:3px; }
#ckit-app .ck-check { position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong); background:#fff; display:grid; place-items:center; color:#fff; font-size:.78rem; transition:background .15s,border-color .15s,transform .15s; }
#ckit-app .ck-card[aria-pressed="true"] .ck-check { background:var(--brand); border-color:var(--brand); transform:scale(1.05); }
#ckit-app .ck-qty { display:flex; align-items:stretch; margin-top:12px; border:1.5px solid var(--line-strong); border-radius:10px; overflow:hidden; align-self:flex-start; animation:ck-pop .2s ease; }
#ckit-app .ck-qty button { width:34px; height:34px; border:none; background:var(--brand-light); color:var(--brand); font-size:1.2rem; line-height:1; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s; }
#ckit-app .ck-qty button:hover { background:#cfe6ff; }
#ckit-app .ck-qty button:disabled { opacity:.4; cursor:not-allowed; }
#ckit-app .ck-qty input { width:46px; height:34px; border:none; text-align:center; font:inherit; font-weight:700; color:var(--ink); background:#fff; -moz-appearance:textfield; }
#ckit-app .ck-qty input::-webkit-outer-spin-button, #ckit-app .ck-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#ckit-app .ck-qty input:focus { outline:none; }
#ckit-app .ck-qty-unit { font-size:.74rem; color:var(--muted); margin:0 9px; align-self:center; }

/* ---- CARRITO ---- */
#ckit-app .ck-cart { position:sticky; top:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); display:flex; flex-direction:column; max-height:calc(100vh - 24px); overflow:hidden; }
#ckit-app .ck-cart-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 13px; border-bottom:1px solid var(--line); }
#ckit-app .ck-cart-head h2 { font-size:1.14rem; }
#ckit-app .ck-count { background:var(--brand); color:#fff; font-weight:700; font-size:.82rem; min-width:24px; height:24px; padding:0 7px; border-radius:999px; display:grid; place-items:center; }
#ckit-app .ck-close { display:none; }
#ckit-app .ck-cart-body { overflow-y:auto; padding:6px 12px; flex:1; min-height:54px; }
#ckit-app .ck-empty { text-align:center; color:var(--muted); padding:30px 12px; }
#ckit-app .ck-empty-emoji { font-size:2rem; margin-bottom:6px; }
#ckit-app .ck-empty p { font-size:.92rem; }
#ckit-app .ck-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 8px; border-bottom:1px solid var(--line); animation:ck-slide .22s ease; }
#ckit-app .ck-item:last-child { border-bottom:none; }
#ckit-app .ck-item-main { min-width:0; }
#ckit-app .ck-item-name { font-weight:700; font-size:.92rem; }
#ckit-app .ck-item-qty { font-size:.76rem; color:var(--muted); margin-top:2px; }
#ckit-app .ck-item-right { display:flex; align-items:center; gap:8px; flex:none; }
#ckit-app .ck-item-line { font-weight:800; font-size:.95rem; color:var(--brand); white-space:nowrap; }
#ckit-app .ck-item-remove { border:none; background:none; cursor:pointer; color:var(--muted); font-size:1.2rem; line-height:1; width:26px; height:26px; border-radius:7px; flex:none; transition:background .12s,color .12s; }
#ckit-app .ck-item-remove:hover { background:#fdecea; color:var(--danger); }
#ckit-app .ck-item-viatico .ck-item-name { color:var(--muted); font-weight:600; }
#ckit-app .ck-item-viatico .ck-item-line { color:var(--ink); }

/* ---- PIE CARRITO ---- */
#ckit-app .ck-foot { border-top:1px solid var(--line); padding:14px 16px 16px; background:#fff; }
#ckit-app .ck-totals { margin-bottom:12px; }
#ckit-app .ck-total-row { display:flex; justify-content:space-between; gap:10px; font-size:.92rem; color:var(--muted); padding:3px 0; }
#ckit-app .ck-total-row span:last-child { color:var(--ink); font-weight:600; white-space:nowrap; }
#ckit-app .ck-total-row.ck-discount span { color:var(--wa-dark); }
#ckit-app .ck-total-row.ck-grand { border-top:1px dashed var(--line-strong); margin-top:6px; padding-top:9px; font-size:1.15rem; }
#ckit-app .ck-total-row.ck-grand span { color:var(--ink); font-weight:800; }
#ckit-app .ck-total-row.ck-grand span:last-child { color:var(--brand); }
#ckit-app .ck-address { margin-bottom:12px; }
#ckit-app .ck-address label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; }
#ckit-app .ck-address input { width:100%; padding:11px 13px; border:2px solid var(--line); border-radius:10px; font:inherit; color:var(--ink); background:#fff; transition:border-color .15s,box-shadow .15s; }
#ckit-app .ck-address input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,140,253,.12); }
#ckit-app .ck-barrio { margin-bottom:12px; }
#ckit-app .ck-barrio label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; }
#ckit-app .ck-barrio select { width:100%; padding:11px 13px; border:2px solid var(--line); border-radius:10px; font:inherit; color:var(--ink); background:#fff; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
#ckit-app .ck-barrio select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,140,253,.12); }
#ckit-app .ck-viatico { margin:10px 0 0; background:#fff8ec; border:1px solid #ffe3b0; color:#8a5a12; padding:9px 12px; border-radius:10px; font-size:.8rem; line-height:1.4; }
#ckit-app .ck-viatico strong { color:#7a4d0a; }

/* ---- BOTÓN WHATSAPP ---- */
#ckit-app .ck-wa { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--wa); color:#fff; font:inherit; font-weight:700; font-size:1rem; padding:14px 16px; border-radius:12px; border:none; cursor:pointer; box-shadow:0 8px 20px rgba(37,211,102,.32); transition:background .15s,transform .12s,box-shadow .15s; }
#ckit-app .ck-wa:hover { background:var(--wa-dark); transform:translateY(-1px); }
#ckit-app .ck-wa[aria-disabled="true"] { background:#cdd8dc; color:#fff; box-shadow:none; cursor:not-allowed; pointer-events:none; }
#ckit-app .ck-wa-icon { display:grid; place-items:center; }

/* ---- MOBILE ---- */
#ckit-app .ck-mbar { position:fixed; left:0; right:0; bottom:0; z-index:99999; display:flex; gap:10px; align-items:stretch; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(15,43,51,.10); }
#ckit-app .ck-mbar-sum { display:flex; align-items:center; gap:10px; border:none; background:var(--brand-light); color:var(--brand-darker); border-radius:12px; padding:0 14px; font:inherit; font-weight:700; cursor:pointer; }
#ckit-app .ck-mcount { background:var(--brand); color:#fff; min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:grid; place-items:center; font-size:.8rem; }
#ckit-app .ck-mtotal { font-size:1.02rem; }
#ckit-app .ck-mcaret { font-size:.7rem; transition:transform .2s; }
#ckit-app.ck-open .ck-mcaret { transform:rotate(180deg); }
#ckit-app .ck-wa-m { flex:1; box-shadow:none; }
#ckit-app .ck-backdrop { position:fixed; inset:0; background:rgba(15,43,51,.4); z-index:99998; opacity:0; pointer-events:none; transition:opacity .2s; }
#ckit-app.ck-open .ck-backdrop { opacity:1; pointer-events:auto; }

/* ---- ANIMACIONES ---- */
@keyframes ck-pop { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes ck-slide { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:none} }
@keyframes ck-bump { 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
#ckit-app .ck-bump { animation:ck-bump .32s ease; }

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) { #ckit-app .ck-layout { grid-template-columns:minmax(0,1fr) 320px; } }
@media (min-width:901px) { #ckit-app .ck-mbar, #ckit-app .ck-backdrop { display:none !important; } }
@media (max-width:900px) {
  #ckit-app .ck-layout { grid-template-columns:1fr; }
  #ckit-app .ck-locs { grid-template-columns:repeat(2,1fr); }
  #ckit-app .ck-cart { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:99999; max-height:82vh; border-radius:20px 20px 0 0; transform:translateY(110%); transition:transform .28s ease; }
  #ckit-app.ck-open .ck-cart { transform:translateY(0); }
  #ckit-app .ck-close { display:grid; place-items:center; border:none; background:var(--brand-light); color:var(--brand); width:30px; height:30px; border-radius:8px; font-size:1.1rem; cursor:pointer; }
  #ckit-app .ck-page { padding-bottom:92px; }
}
@media (max-width:560px) {
  /* Zonas y productos apilados (uno sobre otro), más compactos. */
  #ckit-app .ck-locs { grid-template-columns:1fr; gap:8px; }
  #ckit-app .ck-loc-card { padding:8px 11px; border-width:1.5px; }
  #ckit-app .ck-loc-emoji { width:30px; height:30px; border-radius:8px; font-size:1.05rem; }
  #ckit-app .ck-loc-label { font-size:.92rem; }
  #ckit-app .ck-grid { grid-template-columns:1fr; gap:9px; }
  #ckit-app .ck-card { padding:11px 12px 10px; border-width:1.5px; }
  #ckit-app .ck-name { font-size:.9rem; padding-right:24px; }
  #ckit-app .ck-price { font-size:1rem; }
  #ckit-app .ck-loc-block { padding:12px 14px 14px; }
}
@media (prefers-reduced-motion:reduce) { #ckit-app * { animation:none !important; transition:none !important; } }