/* =========================
   main2.css – estilos unificados
   ========================= */

/* Paleta global (tipo fintech) */
:root{
  --brand-primary:#0A66FF;
  --brand-text:#0b1b2b;
}

/* Utilitarios de marca / overrides ligeros de Bootstrap */
.text-primary { color: var(--brand-primary)!important; }
.btn-primary  { background: var(--brand-primary); border-color: var(--brand-primary); }
.badge-primary{ background: rgba(10,102,255,.1); color: var(--brand-primary); }

.form-label{ font-weight:700; color: var(--brand-text); }
.card { border-radius: 14px; box-shadow: 0 10px 30px rgba(16,33,54,.06); }

/* --------------------------------
   Cotizador (scope de colores/inputs)
-----------------------------------*/
#cotizador {
  --c-head: #0b1b2b;
  --c-text: #243447;
  --c-muted: #5a6b7b;
  --c-primary: #126eff;
  --c-bg-card: #ffffff;
  --c-border: #d7dee6;
  --c-shadow: 0 10px 30px rgba(16, 33, 54, .08);
  --c-input-bg: #f2f7ff;
  --c-input-border: #bcd3ff;
}

#cotizador .display-6 {
  color: var(--c-head);
  font-weight: 800;
  letter-spacing: .2px;
}

#cotizador .leadish {
  color: var(--c-muted);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  line-height: 1.7;
  max-width: 980px;
  margin: 0 auto 1.75rem;
}

#cotizador .card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow);
  border-radius: 14px;
}

#cotizador .card-body { padding: 1.5rem 1.25rem; }

#cotizador .form-label {
  color: var(--c-head);
  font-weight: 700;
}

#cotizador .form-control,
#cotizador .form-select {
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  color: var(--c-text);
  border-radius: 12px;
  height: 52px;
}

#cotizador .form-control::placeholder { color: #7b8da1; }

#cotizador .form-control:focus,
#cotizador .form-select:focus {
  background: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(18, 110, 255, .15);
  color: var(--c-head);
}

#cotizador .form-text { color: var(--c-muted); }
#cotizador .card + .card { margin-top: 1rem; }

@media (max-width: 576px) {
  #cotizador .card-body { padding: 1.25rem 1rem; }
  #cotizador .form-control, #cotizador .form-select { height: 50px; }
}

/* --------------------------------
   Invitación a turnos / chips
-----------------------------------*/
#turnoInvite.card {
  border: 1px solid #d7dee6;
  background: linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  box-shadow: 0 8px 24px rgba(16,33,54,.06);
  border-radius: 14px;
}
#turnoInvite .title{ font-weight:800; color:#0b1b2b; }
#turnoInvite .lead{ color:#5a6b7b; margin:.25rem 0 .75rem; }

@media (max-width:576px){
  #turnoInvite .title { font-size:1.1rem; }
  #turnoInvite .lead  { font-size:1rem; }
}

/* Chips base (look de marca) */
.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:999px;
  background:#eef5ff; border:1px solid #cfe2ff; color:#0b5ed7;
  font-weight:600; font-size:.875rem;
}
.badge-chip i{font-size:1rem}

/* Chips dentro de la tarjeta de turnos (look neutro) */
#turnoInvite .badge-chip{
  background:#fff; border:1px solid #d7dee6; color:#243447;
}
@media (max-width:576px){ .badge-chip{ font-size:.82rem } }

/* Chips de slots seleccionables */
.slot-chips .chip{
  border:1px solid #d7dee6; border-radius:999px;
  background:#fff; padding:.4rem .7rem; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.slot-chips .chip:hover{ box-shadow:0 2px 8px rgba(16,33,54,.08) }
.slot-chips .chip.is-active{
  border-color:#126eff; box-shadow:0 0 0 3px rgba(18,110,255,.15)
}

/* Gate de confirmación */
.confirm-gate{
  background:#f1f5ff; border:1px dashed #8aa8ff;
  border-radius:12px; padding:.875rem 1rem;
}

/* --------------------------------
   Texto de ayuda destacado
-----------------------------------*/
.form-text.highlight-ecg    { color:#0d6efd; font-weight:500; }
.form-text.highlight-device { color:#198754; font-weight:500; }

/* --------------------------------
   Total / desglose
-----------------------------------*/
.total-header .total-amount {
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  font-weight: 800;
  color: var(--bs-primary);
  line-height: 1;
}

#toggleQuoteDetail{ 
  font-weight: 600; 
  padding:.25rem 0; 
  text-underline-offset:2px;
}
#toggleQuoteDetail[aria-expanded="true"]::after { content:" ▲"; font-weight: 400; }
#toggleQuoteDetail[aria-expanded="false"]::after{ content:" ▼"; font-weight: 400; }

@media (max-width:576px){
  .price-row{
    display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; align-items:start;
  }
  .price-label{font-size:1rem; line-height:1.35;}
  .price-amount{white-space:nowrap; font-weight:600;}
  .total-header{margin-bottom:.25rem;}
  .total-header .total-amount{font-size: clamp(1.5rem, 7vw, 2rem);}
  #pagar-estudio p.small{margin-bottom:.5rem;}
  #quoteDetail .bg-light{padding:.75rem .875rem;}
  #quoteDetail .text-success{margin-top:.25rem;}
}

/* --------------------------------
   Consentimiento / términos
-----------------------------------*/
/* Caja de consentimiento “light” reutilizable */
.consent-box{
  border:2px solid #b6d4fe; background:#f1f6ff;
  border-radius:12px; padding:1rem;
}
.consent-box .form-check-input{ width:1.2rem; height:1.2rem; }
.consent-box .terms-hint{ color:#6b7a8a; font-size:.875rem; }

/* Versión alta-contraste específicamente en el paso de términos */
#step_terms .consent-box{
  background:#000;
  color:#fff;
  border:2px solid #111;
  border-radius:12px;
  padding:1rem 1rem .8rem;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
#step_terms .consent-box .form-check-label{ color:#fff; font-weight:600; }
#step_terms .consent-box .terms-hint{ color:rgba(255,255,255,.8); font-size:.875rem; margin-top:.35rem; }
#step_terms .consent-box a{
  color:#fff; text-decoration: underline; text-underline-offset:2px;
}

/* Checkbox visible en fondo negro */
#step_terms .consent-box .form-check-input{
  width:1.25rem; height:1.25rem;
  margin-top:.2rem;
  background-color:transparent;
  border:2px solid #fff;
}
#step_terms .consent-box .form-check-input:checked{
  background-color:#0d6efd; border-color:#0d6efd;
}
#step_terms .consent-box .form-check-input:focus{
  box-shadow:0 0 0 3px rgba(13,110,253,.45);
}

/* Forzamos que el label capture correctamente el tap */
#termsBox .form-check-label {
  flex: 1;               /* que ocupe el espacio de texto */
  cursor: pointer;
  display: block;         /* asegura área clickeable en mobile */
}

/* El contenedor no necesita cursor si ya lo maneja el label */
#termsBox {
  cursor: default;        /* antes estaba pointer */
}


/* Foco accesible cuando se tabbea dentro de la caja */
#step_terms .consent-box:focus-within{
  outline:3px solid #82b1ff;
  outline-offset:2px;
  border-radius:12px;
}


/* Mejoras de tap para móviles */
#termsBox,
#termsBox .form-check-label,
#termsBox .form-check-input {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;    /* evita gestos que “comen” el tap */
  pointer-events: auto;          /* por si alguna regla anterior lo anuló */
}

/* Aseguramos que el label sea el área grande y clickeable */
#termsBox .form-check-label {
  display: block;
  flex: 1;
  cursor: pointer;
}



/* --------------------------------
   Otros bloques / utilitarios
-----------------------------------*/
.secure-ribbon{
  display:flex; align-items:center;
  background: linear-gradient(90deg, rgba(13,110,253,.08), rgba(13,110,253,.02));
  border: 1px solid rgba(13,110,253,.2);
  color: var(--brand-text);
  border-radius: 12px; padding: .75rem 1rem; font-weight:600;
}

.mobile-checkout{
  position: sticky; bottom: 0; left:0; right:0; z-index: 1040;
  background:#fff; border-top:1px solid #e9ecef; padding:.5rem 0;
  box-shadow: 0 -6px 20px rgba(16,33,54,.06);
}

/* Listas y textos largos en cards de servicios */
.service-card p{ margin-bottom: .75rem; }

/* Botones link */
.btn-link{ font-weight:600; text-underline-offset:2px; }

/* --------------------------------
   Progresivo (campos por etapas)
-----------------------------------*/
.phased{ display:none; }
.phased.is-visible{ display:block; animation:fadeIn .18s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:none} }