/* CIT — Selector publico (Fase 4) */
.cit-sel{--cit-azul:#0f5767;--cit-azul2:#37d67a;--cit-coral2:#22b567;--cit-borde:#e2e8f0;--cit-gris:#64748b;--cit-fondo:#f8fafc;
  max-width:820px;margin:0 auto;padding:8px 16px 48px;font-family:inherit;color:#0f172a;line-height:1.55}
.cit-sel h2{font-size:26px;line-height:1.25;margin:0 0 8px;color:var(--cit-azul)}
.cit-sel h3{font-size:15px;margin:0 0 6px;color:var(--cit-azul)}
.cit-sel-lead{color:var(--cit-gris);margin:0 0 22px}
.cit-sel-step{animation:citFade .25s ease}
@keyframes citFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.cit-sel-stepper{margin:0 0 20px}
.cit-sel-stepper__label{color:var(--cit-gris);font-size:13px;font-weight:600;margin:0 0 6px;text-align:right}
.cit-sel-stepper__bar{background:var(--cit-borde);border-radius:999px;height:6px;overflow:hidden}
.cit-sel-stepper__fill{background:var(--cit-azul2);height:100%;border-radius:999px;transition:width .3s ease}

/* Bug fix 2026-09-02: el tema (labaid/css/main.css) fuerza
   "button{text-transform:capitalize}" globalmente, lo que Title-Case-aba
   los titulos/descripciones dentro de los botones del selector. */
.cit-sel button{text-transform:none}

.cit-sel-urgencia{background:#fff7ed;border:1px solid #fdba74;border-left:4px solid #ea580c;
  border-radius:10px;padding:12px 16px;margin:0 0 24px;font-size:14px;color:#7c2d12}
.cit-sel .cit-sel-urgencia a{color:#7c2d12;font-weight:700}

.cit-sel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cit-sel-card{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:1px solid var(--cit-borde);
  border-radius:14px;padding:20px;cursor:pointer;transition:.15s;font:inherit;color:inherit;white-space:normal}
.cit-sel-card:hover{border-color:var(--cit-azul);box-shadow:0 6px 18px rgba(15,110,110,.10);transform:translateY(-2px)}
.cit-sel-ico{align-self:center;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(15,87,103,.1);color:var(--cit-azul);margin-bottom:2px;transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1)}
.cit-sel-ico svg{width:24px;height:24px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.cit-sel-card:hover .cit-sel-ico{background:var(--cit-azul);color:#fff}
.cit-sel-card:hover .cit-sel-ico svg{transform:scale(1.06) rotate(-4deg)}
/* Bug fix 2026-09-02: el tema (labaid/css/main.css) agrega a TODO <button>
   un circulo ::before del color primario (oscuro) que se desliza al hacer
   hover, tapando el texto oscuro de las tarjetas con un fondo igual de
   oscuro (bug reportado: "cuando hago mouseover el texto ya no se ve").
   Cada boton del selector ya define su propio estado :hover explicito. */
.cit-sel button::before,
.cit-sel button:hover::before{content:none!important}
.cit-sel-tit{font-weight:700;font-size:16px;color:var(--cit-azul)}
.cit-sel-desc{font-size:13.5px;color:var(--cit-gris)}
.cit-sel-precio{font-size:22px;font-weight:800;color:var(--cit-azul);margin-top:auto}
.cit-sel-precio small{display:block;font-size:12px;font-weight:600;color:var(--cit-gris)}
.cit-sel-precio-sm{font-size:16px}
.cit-sel-meta{font-size:12px;color:var(--cit-gris)}
/* Tarjeta "No se que necesito" (data-card=nose): es orientacion, no un precio fijo -- se distingue con fondo/borde teal y contenido centrado para ubicarla de un vistazo entre las tarjetas de servicio. */
.cit-sel .cit-sel-card[data-card="nose"]{background:#eaf5f5!important;border-color:var(--cit-azul);border-width:2px;align-items:center;text-align:center}
.cit-sel-card[data-card="nose"] .cit-sel-tit,
.cit-sel-card[data-card="nose"] .cit-sel-desc{text-align:center}
.cit-sel-todos{margin-top:22px;font-size:14px}
.cit-sel .cit-sel-todos a{color:var(--cit-azul);font-weight:600}
.cit-sel-todos span{color:#cbd5e1;margin:0 8px}

.cit-sel-back{background:none;border:0;color:var(--cit-gris);font:inherit;font-size:14px;cursor:pointer;padding:0 0 12px}
.cit-sel-back:hover{color:var(--cit-azul)}
.cit-sel-nav{margin-top:24px}
.cit-sel-btn{background:var(--cit-azul2);color:#fff;border:0;border-radius:10px;padding:14px 24px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;display:inline-block;text-decoration:none}
.cit-sel-btn:hover{background:var(--cit-coral2)}
.cit-sel-btn[disabled]{background:#94a3b8;cursor:default}
.cit-sel-btn-sm{padding:10px 18px;font-size:14px}

.cit-sel-box{background:var(--cit-fondo);border:1px solid var(--cit-borde);border-radius:12px;padding:16px 18px;margin:0 0 14px}
.cit-sel-q{font-weight:700;margin:0 0 10px;font-size:15px}
.cit-sel-nota{font-size:13px;color:var(--cit-gris);margin:8px 0 0}
.cit-sel-radio,.cit-sel-check{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--cit-borde);
  border-radius:9px;padding:11px 13px;margin-bottom:8px;cursor:pointer;font-size:14px}
.cit-sel-radio:hover,.cit-sel-check:hover{border-color:var(--cit-azul)}
.cit-sel-radio:has(input:checked),.cit-sel-check:has(input:checked){border-color:var(--cit-azul);background:#eaf2f0;box-shadow:inset 0 0 0 1px var(--cit-azul)}
.cit-sel-radio input,.cit-sel-check input{margin-top:2px;flex:0 0 auto}
.cit-sel-radio em{color:var(--cit-gris);font-style:normal;font-size:12.5px}

.cit-sel-alerta{background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#7f1d1d;margin-top:10px}
.cit-sel-alerta a{color:#7f1d1d;font-weight:700}
.cit-sel-info{background:#eff6ff;border-color:#93c5fd;color:#1e3a8a}
.cit-sel-info a{color:#1e3a8a}

.cit-sel-dia{border:1px solid var(--cit-borde);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fff}
.cit-sel-dia-h{font-weight:700;color:var(--cit-azul);margin-bottom:10px;font-size:15px}
.cit-sel-dia-h small{display:block;font-weight:500;color:var(--cit-gris);font-size:12.5px}
.cit-sel-horas{display:flex;flex-wrap:wrap;gap:8px}
.cit-sel-hora{border:1px solid var(--cit-borde);background:#fff;border-radius:8px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer}
.cit-sel-hora:hover{border-color:var(--cit-azul);color:var(--cit-azul)}
.cit-sel-hora.sel{background:var(--cit-azul);color:#fff;border-color:var(--cit-azul)}

.cit-sel-resumen{border:1px solid var(--cit-borde);border-radius:12px;overflow:hidden;margin-bottom:16px;background:#fff}
.cit-sel-rr{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--cit-borde);font-size:14px}
.cit-sel-rr:last-child{border-bottom:0}
.cit-sel-rr span{color:var(--cit-gris)}
.cit-sel-rr strong{text-align:right}
.cit-sel-cobros{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cit-sel-cobro{flex:1;min-width:0;border:1px solid var(--cit-borde);border-radius:12px;padding:16px;background:#fff}
.cit-sel-plus{flex:0 0 auto;align-self:center;width:30px;height:30px;border-radius:50%;background:var(--cit-fondo);
  border:1px solid var(--cit-borde);color:var(--cit-gris);font-size:16px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center}
.cit-sel-cobro-off{background:var(--cit-fondo);opacity:.85}
.cit-sel-monto{font-size:24px;font-weight:800;color:var(--cit-azul);margin:0}
.cit-sel-cobro ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--cit-gris)}
.cit-sel-total{display:flex;justify-content:space-between;align-items:center;background:var(--cit-azul);color:#fff;
  border-radius:12px;padding:14px 18px;font-size:15px}
.cit-sel-total strong{font-size:22px}
.cit-sel-legal{font-size:12.5px;color:var(--cit-gris);margin-top:12px;border-left:3px solid var(--cit-borde);padding-left:12px}

.cit-sel-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cit-sel label{display:block;font-size:13px;font-weight:600;color:#334155}
.cit-sel input[type=text],.cit-sel input[type=tel],.cit-sel input[type=email],.cit-sel input[type=date],
.cit-sel select,.cit-sel textarea{width:100%;border:1px solid var(--cit-borde);border-radius:9px;padding:11px 12px;
  font:inherit;font-size:15px;font-weight:400;margin-top:5px;background:#fff;color:#0f172a}
.cit-sel input:focus,.cit-sel select:focus,.cit-sel textarea:focus{outline:2px solid var(--cit-azul);outline-offset:1px}

/* Fase B7: el tema padre (labaid/css/main.css) pone appearance:none + una
   flecha en su regla generica "select{}", pero la regla ".cit-sel select"
   de arriba usa el shorthand "background:#fff", que resetea background-image
   a "none" por tener mayor especificidad -- se quedaba sin flecha ni look de
   lista desplegable ("aparece como una lista rara"). Se repone la flecha
   explicitamente, en el azul de marca, con espacio para que no se encime
   con el texto. */
.cit-sel select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--cit-azul) 50%),linear-gradient(135deg,var(--cit-azul) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 15px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:36px;
  cursor:pointer;
}
.cit-sel-full{display:block;margin-top:12px}
.cit-sel-opt{font-weight:400;color:var(--cit-gris)}
.cit-sel-menor{background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;padding:14px 16px;margin-top:14px}
.cit-sel-consent{margin-top:18px}
.cit-sel-consent .cit-sel-check{align-items:flex-start;font-size:13px;line-height:1.5}
.cit-sel-consent a{color:var(--cit-azul);font-weight:600}
.cit-sel-err{color:#b91c1c;font-size:14px;font-weight:600;margin:12px 0 0;min-height:18px}

.cit-sel-otp{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cit-sel-otp input{max-width:180px;letter-spacing:.35em;font-size:20px;text-align:center}

.cit-sel-ok{text-align:center;padding:16px 0}
.cit-sel-ok-ico{display:inline-flex;width:56px;height:56px;border-radius:50%;background:#dcfce7;color:#166534;
  align-items:center;justify-content:center;font-size:28px;margin-bottom:12px}
.cit-sel-folio{font-size:15px;color:var(--cit-gris)}
.cit-sel-ok .cit-sel-resumen{text-align:left;margin-top:16px}

.cit-sel-load{position:fixed;inset:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;z-index:9999}
.cit-sel-spin{width:44px;height:44px;border:4px solid var(--cit-borde);border-top-color:var(--cit-azul);border-radius:50%;animation:citSpin .8s linear infinite}
@keyframes citSpin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .cit-sel h2{font-size:22px}
  .cit-sel-grid2{grid-template-columns:1fr}
  .cit-sel-cobros{flex-direction:column}
  .cit-sel-rr{flex-direction:column;gap:2px}
  .cit-sel-rr strong{text-align:left}
}
.cit-sel-msi{background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:12px 14px;margin-top:12px;font-size:14px;color:#14532d}
.cit-sel-msi .cit-sel-nota{color:#166534}
/* El overlay declara display:flex, que gana sobre el [hidden] del navegador:
   sin esto el spinner tapaba la pagina completa y se comia los clics. */
.cit-sel [hidden],.cit-sel-load[hidden]{display:none!important}
/* El tema pinta TODOS los <button> en blanco: sin color explicito los
   horarios salian invisibles (texto blanco sobre fondo blanco). */
/* Hay una hoja en linea del sitio con
   `button,...,[class*="-btn"] { color:#fff !important }`. Sin !important
   aqui, los horarios salen en blanco sobre blanco. */
.cit-sel .cit-sel-hora{color:var(--cit-azul)!important;background:#fff!important}
.cit-sel .cit-sel-hora:hover{color:var(--cit-azul)!important;background:#f1f5f9!important}
.cit-sel .cit-sel-hora.sel{color:#fff!important;background:var(--cit-azul)!important}
.cit-sel .cit-sel-card{color:#0f172a!important;background:#fff!important}
.cit-sel .cit-sel-back{color:var(--cit-gris)!important;background:none!important}
.cit-sel .cit-sel-btn{color:#fff!important;background:var(--cit-azul2)!important}
.cit-sel .cit-sel-btn:hover{color:#fff!important;background:var(--cit-coral2)!important}
/* Dos horarios concretos, no la agenda completa (regla del agendador HSZV). */
.cit-sel-propuestas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
.cit-sel .cit-sel-prop{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--cit-borde);
  border-radius:14px;padding:18px 20px;cursor:pointer;font:inherit;color:#0f172a!important;background:#fff!important;transition:.15s}
.cit-sel .cit-sel-prop:hover{border-color:var(--cit-azul);background:var(--cit-azul)!important;box-shadow:0 6px 18px rgba(15,110,110,.10);transform:translateY(-2px)}
.cit-sel .cit-sel-prop:hover .cit-sel-prop-f,.cit-sel .cit-sel-prop:hover .cit-sel-prop-h,.cit-sel .cit-sel-prop:hover .cit-sel-prop-a{color:#fff!important}
.cit-sel .cit-sel-prop.sel{border-color:var(--cit-azul);background:#eaf2f0!important;box-shadow:inset 0 0 0 1px var(--cit-azul)}
.cit-sel-prop-f{font-weight:700;color:var(--cit-azul);font-size:15px}
.cit-sel-prop-h{font-size:28px;font-weight:800;color:var(--cit-azul);line-height:1.1}
.cit-sel-prop-a{font-size:12.5px;color:var(--cit-gris)}
@media (max-width:640px){.cit-sel-propuestas{grid-template-columns:1fr}}


/* Fase B8: el badge de reCAPTCHA v3 (inyectado por Google, fixed/z-index:auto)
   quedaba detras del boton flotante de WhatsApp (#cit-wa, fixed/z-index:9999,
   bottom:24px/right:24px, 56px de burbuja) y no se podia dar click. Se sube
   por encima del boton y se deja casi transparente (ya no es relevante mostrarlo
   una vez que la IP quedo aprobada como humana); en hover queda visible por
   accesibilidad. */
.grecaptcha-badge{bottom:94px!important;opacity:.12!important;transition:opacity .2s!important}
.grecaptcha-badge:hover,.grecaptcha-badge:focus-within{opacity:1!important}

/* Avance por semanas: nunca se muestra la agenda completa. */
.cit-sel .cit-sel-semana{margin:0 0 .6rem;font-weight:600;color:#0f766e!important}
.cit-sel .cit-sel-nota{color:#475569!important}
.cit-sel .cit-sel-atras{margin-left:.75rem;color:#475569!important}