/* Verko · Calculadora de leads */
.vkcl{
  --vk-navy:#16204C;
  --vk-azul:#4B65FF;
  --vk-lima:#DCFA7B;
  --vk-body:Helvetica,Arial,sans-serif;
  --vk-serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --c-bg:#091030;
  --c-text:#e9ebf5;
  --c-mute:#9aa3bd;
  --c-line:rgba(255,255,255,.12);
  --c-panel:#F6F7FB;
  --c-panel-text:#16204C;
  --c-input-bg:#fff;
  --c-input-border:rgba(22,32,76,.15);
  --c-accent:#DCFA7B;

  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:36px 40px;
  border-radius:24px;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--vk-body);
}
.vkcl--claro{
  --c-bg:#fff;
  --c-text:#16204C;
  --c-mute:#5c6689;
  --c-line:rgba(22,32,76,.12);
  --c-panel:#F6F7FB;
  --c-accent:#4B65FF;
  box-shadow:0 20px 60px rgba(10,15,38,.08);
}
.vkcl *{box-sizing:border-box;}

/* seguro: nada se desplaza ni escala al pasar el cursor */
.vkcl:hover,
.vkcl *:not(.vkcl__arrow):hover{transform:none!important;scale:none!important;translate:none!important;}

/* subtítulo */
.vkcl .vkcl__sub{margin:0 auto 20px!important;font-family:var(--vk-body)!important;font-size:16px!important;font-weight:400!important;line-height:1.5!important;color:var(--c-mute)!important;max-width:60ch;text-align:center;}

/* modos: píldora segmentada (con !important para que el tema no pise los <button>) */
.vkcl__modes-wrap{display:flex;justify-content:center;margin-bottom:28px;}
.vkcl__modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--c-line);}
.vkcl .vkcl__mode,
.vkcl .vkcl__mode:hover,
.vkcl .vkcl__mode:focus,
.vkcl .vkcl__mode:active{
  appearance:none!important;-webkit-appearance:none!important;
  border:0!important;outline:none!important;box-shadow:none!important;
  transform:none!important;scale:none!important;
  background:var(--c-text)!important;color:var(--c-bg)!important;
  font-family:var(--vk-body)!important;font-size:14px!important;font-weight:400!important;
  line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
  padding:9px 18px!important;margin:0!important;border-radius:999px!important;
  cursor:pointer;transition:background .2s,color .2s;
}
.vkcl .vkcl__mode:hover{background:#fff!important;}
.vkcl .vkcl__mode.is-active,
.vkcl .vkcl__mode.is-active:hover,
.vkcl .vkcl__mode.is-active:active,
.vkcl .vkcl__mode.is-active:focus{background:var(--vk-lima)!important;color:var(--vk-navy)!important;}
.vkcl--claro .vkcl__mode,
.vkcl--claro .vkcl__mode:hover,
.vkcl--claro .vkcl__mode:focus,
.vkcl--claro .vkcl__mode:active{background:var(--vk-navy)!important;color:#fff!important;}
.vkcl--claro .vkcl__mode.is-active,
.vkcl--claro .vkcl__mode.is-active:hover,
.vkcl--claro .vkcl__mode.is-active:active,
.vkcl--claro .vkcl__mode.is-active:focus{background:var(--vk-lima)!important;color:var(--vk-navy)!important;}

/* panel de entrada */
.vkcl__panel{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;
  padding:26px 28px;border-radius:16px;background:var(--c-panel);color:var(--c-panel-text);
}
.vkcl__field{display:flex;flex-direction:column;gap:12px;}
.vkcl__field[hidden]{display:none;}
.vkcl__field--select{grid-column:1 / -1;}
.vkcl__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.vkcl__label{font-size:15px;font-weight:500;line-height:1.3;}
.vkcl__val{font-family:var(--vk-body);font-weight:600;font-size:18px;line-height:1;color:var(--vk-navy);white-space:nowrap;}
.vkcl__hint{font-size:12px;color:#5c6689;line-height:1.35;}

.vkcl select{
  width:100%;max-width:480px;height:48px;padding:0 40px 0 14px;
  border:1px solid var(--c-input-border);border-radius:10px;background:var(--c-input-bg);
  color:var(--vk-navy);font-family:var(--vk-body);font-size:17px;line-height:1;
  appearance:none;-webkit-appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2316204C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.vkcl select:focus{border-color:var(--vk-azul);box-shadow:0 0 0 3px rgba(75,101,255,.18);}

/* sliders */
.vkcl input[type=range]{
  --p:50%;
  width:100%;height:22px;margin:0;padding:0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;outline:none;
}
.vkcl input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--vk-navy) 0,var(--vk-navy) var(--p),rgba(22,32,76,.14) var(--p),rgba(22,32,76,.14) 100%);
}
.vkcl input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:rgba(22,32,76,.14);}
.vkcl input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--vk-navy);}
.vkcl input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:#fff;border:2px solid var(--vk-navy);
  box-shadow:0 2px 8px rgba(10,15,38,.25);
  transition:box-shadow .15s;
}
.vkcl input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:2px solid var(--vk-navy);
  box-shadow:0 2px 8px rgba(10,15,38,.25);
}
.vkcl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(75,101,255,.25);}
.vkcl input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(22,32,76,.12);}

/* resultados */
.vkcl__results{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:16px;
  padding:28px 16px 24px;text-align:center;
}
.vkcl__kpi strong{
  display:block;font-family:var(--vk-body);font-weight:500;
  font-size:clamp(20px,1.8vw,24px);line-height:1;letter-spacing:-.02em;color:var(--c-text);
  transition:opacity .2s;
}
.vkcl__kpi--accent strong{color:var(--c-accent);}
.vkcl__kpi span{display:block;margin-top:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mute);}
.vkcl__arrow{font-size:22px;color:var(--c-mute);opacity:.6;}
.vkcl.is-updating .vkcl__kpi strong{opacity:.35;}


/* columnas (una por canal) */
.vkcl__units{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px;}
.vkcl__unit{min-width:0;}
.vkcl__cplline{margin:0;font-size:13px;line-height:1.4;color:var(--c-mute);text-align:center;}
.vkcl__cplline .vkcl__cpl{color:var(--c-text);white-space:nowrap;}

/* ---------- vista doble: Google Ads | Social Ads ---------- */
.vkcl--doble .vkcl__units{grid-template-columns:1fr 1fr;}
.vkcl--doble .vkcl__unit{
  display:flex;flex-direction:column;
  padding:24px;border-radius:20px;
  background:rgba(255,255,255,.035);border:1px solid var(--c-line);
}
.vkcl--claro.vkcl--doble .vkcl__unit{background:transparent;}
.vkcl__unit-head{display:flex;align-items:center;gap:12px;margin:0 0 18px;}
.vkcl__unit-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:var(--vk-azul);box-shadow:0 0 0 4px rgba(75,101,255,.22);}
.vkcl__unit--social .vkcl__unit-dot{background:var(--vk-lima);box-shadow:0 0 0 4px rgba(220,250,123,.2);}
.vkcl .vkcl__unit-title{
  margin:0!important;padding:0!important;
  font-family:var(--vk-serif)!important;font-weight:600!important;
  font-size:25px!important;line-height:1.15!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--c-text)!important;
}
.vkcl--doble .vkcl__panel{grid-template-columns:1fr;gap:20px;padding:22px;}
.vkcl.vkcl--doble select{max-width:none;}

/* resultados en lista: caben en media columna también en "Quiero X clientes" */
.vkcl--doble .vkcl__results{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  margin-top:auto;padding:14px 2px 10px;text-align:left;
}
.vkcl--doble .vkcl__arrow{display:none;}
.vkcl--doble .vkcl__kpi{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px dashed var(--c-line);
}
.vkcl--doble .vkcl__kpi:last-of-type{border-bottom:0;}
.vkcl--doble .vkcl__kpi strong{order:2;font-size:20px;text-align:right;white-space:nowrap;}
.vkcl--doble .vkcl__kpi span{order:1;margin-top:0;}
.vkcl--doble .vkcl__cplline{text-align:left;padding:0 2px;}

/* aviso */
.vkcl__warning{
  margin:14px 0 0;padding:12px 16px;border-radius:10px;
  border:1px solid rgba(220,250,123,.35);background:rgba(220,250,123,.06);
  color:var(--c-text);font-size:13px;line-height:1.5;
}
.vkcl--claro .vkcl__warning{border-color:rgba(75,101,255,.3);background:rgba(75,101,255,.06);}
.vkcl__warning[hidden]{display:none;}

/* pie */
.vkcl__foot{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  padding-top:18px;border-top:1px solid var(--c-line);
}
.vkcl__note{margin:0;font-size:12px;line-height:1.5;color:var(--c-mute);max-width:60ch;}
.vkcl__cta{
  display:inline-block;padding:14px 22px;border-radius:12px;
  background:var(--vk-azul);color:var(--vk-lima);
  font-family:var(--vk-body);font-size:15px;font-weight:600;line-height:1.2;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s;
}
.vkcl__cta:hover{background:var(--vk-lima);color:#091030;box-shadow:0 0 15px var(--vk-lima);text-decoration:none;}

.vkcl-aviso-admin{padding:16px;border:1px dashed #b32d2e;color:#b32d2e;border-radius:8px;}

/* tablet: las dos columnas se apilan (Google arriba, Social abajo) */
@media (max-width:1024px){
  .vkcl--doble .vkcl__units{grid-template-columns:1fr;}
}

/* móvil */
@media (max-width:767px){
  .vkcl{padding:22px 16px;border-radius:18px;}
  .vkcl__panel{grid-template-columns:1fr;padding:18px 16px;gap:18px;}
  .vkcl--doble .vkcl__panel{padding:18px 16px;}
  .vkcl--doble .vkcl__unit{padding:18px 14px;border-radius:16px;}
  .vkcl__unit-head{margin-bottom:14px;}
  .vkcl .vkcl__unit-title{font-size:20px!important;}
  .vkcl--doble .vkcl__kpi strong{font-size:18px;}
  .vkcl__units{gap:16px;margin-bottom:20px;}
  .vkcl select{height:46px;font-size:16px;max-width:none;}
  .vkcl__results{grid-template-columns:1fr;gap:16px;padding:24px 0 18px;}
  .vkcl__arrow{transform:rotate(90deg);font-size:18px;}
  .vkcl__kpi strong{font-size:20px;}
  .vkcl__foot{grid-template-columns:1fr;gap:20px;}
  .vkcl__cta{text-align:center;white-space:normal;}
  .vkcl__modes{width:100%;}
  .vkcl__modes-wrap{margin-bottom:20px;}
  .vkcl .vkcl__mode{flex:1;text-align:center;padding:8px 6px!important;}
}

@media (max-width:340px){
  .vkcl--doble .vkcl__kpi{flex-direction:column;align-items:flex-start;gap:4px;}
  .vkcl--doble .vkcl__kpi strong{order:0;text-align:left;}
}