/**
 * De Rossi · Cotizador solar
 * Todo va scopeado bajo .drc para no chocar con el tema de WordPress.
 */

.drc {
  /* Azul de marca desde el 2026-09-09, antes naranja #F4771E. De paso
     arregla un problema de contraste que el naranja arrastraba: texto
     blanco sobre #F4771E da 2,8:1 y no pasa AA; sobre este azul da 5,5:1,
     y el tono oscuro sobre blanco da 7,4:1. */
  --drc-azul: #1169C1;
  --drc-azul-osc: #0E569E;
  --drc-azul-suave: #E8F1FA;
  /* Ni negro absoluto: sobre el fondo claro, #303138 baja el contraste
     duro del #1A1A1A sin perder legibilidad. */
  --drc-tinta: #303138;
  --drc-suave: #6B6B6B;
  --drc-linea: #ECE9E3;
  --drc-fondo: #FAF9F7;
  --drc-blanco: #FFFFFF;
  --drc-verde: #5E9A2E;
  --drc-verde-suave: #EFF8E4;
  --drc-rojo: #B4472D;
  --drc-rojo-suave: #FBEAE4;
  --drc-radio: 14px;
  --drc-sombra: 0 1px 2px rgba(26,26,26,.04), 0 10px 30px -20px rgba(26,26,26,.3);

  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--drc-tinta);
  background: var(--drc-fondo);
  border: 1px solid var(--drc-linea);
  border-radius: 20px;
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  line-height: 1.55;
}

.drc *, .drc *::before, .drc *::after { box-sizing: border-box; }
.drc p { margin: 0; }

/* ---------- progreso ---------- */

/* Un rectángulo por pregunta: se van coloreando de a uno, en vez de una
   barra continua que crece de ancho. */
.drc-progress {
  display: flex;
  gap: 3px;
  padding: 10px 10px 0;
  flex: none;
}
.drc-progress-seg {
  height: 5px;
  flex: 1;
  min-width: 0;
  border-radius: 3px;
  background: var(--drc-linea);
  transition: background .3s ease;
}
.drc-progress-seg.drc-progress-fill {
  background: var(--drc-azul);
}

/* ---------- escenario ---------- */

.drc-stage {
  padding: 34px 30px 26px;
  min-height: 380px;
  /* La propuesta es varias veces más larga que cualquier pregunta: sin este
     tope, el widget entero se dispara de golpe al terminar "calculando" y
     la página se despliega hacia abajo. Con el alto acotado, el que se
     desplaza es el contenido de adentro, no la página. */
  max-height: min(620px, 72vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Ojo: NO usar justify-content:center acá. Con overflow-y:auto, centrar
     el contenedor dispareja lo que queda "por encima" del centro fuera de
     alcance del scroll (scrollTop no puede ser negativo) — la propuesta
     quedaría con el título tapado y sin forma de llegar a él. El centrado
     va en el margin:auto del .drc-step de abajo, que sí colapsa a 0 cuando
     el contenido no entra, dejándolo desplazable desde el principio.  */
  /* Misma scrollbar clara que .drc-listbox: sin esto el navegador dibuja
     flechas negras que desentonan con el resto del widget. */
  scrollbar-width: thin;
  scrollbar-color: #B4AFA6 transparent;
}
.drc-stage::-webkit-scrollbar { width: 12px; }
.drc-stage::-webkit-scrollbar-track { background: transparent; }
.drc-stage::-webkit-scrollbar-thumb { background: #D9D5CC; border-radius: 99px; }
.drc-stage::-webkit-scrollbar-button {
  display: block;
  height: 13px;
  background-color: var(--drc-fondo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 6px;
}
.drc-stage::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M5 0L10 6H0Z' fill='%23B4AFA6'/%3E%3C/svg%3E");
}
.drc-stage::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0H10L5 6Z' fill='%23B4AFA6'/%3E%3C/svg%3E");
}
@media (max-width: 560px) {
  .drc-stage { padding: 26px 20px 20px; min-height: 340px; max-height: min(560px, 78vh); }
  .drc-nav { padding: 12px 16px; }
  .drc-btn { padding: 12px 16px; }
}

/* La propuesta va suelta: sin tope de alto y sin barra propia, para que se
   lea como parte de la página. Dos clases le ganan al .drc-stage de la
   media query de arriba, así que el orden no importa. */
.drc-suelto .drc-stage { max-height: none; overflow-y: visible; }

.drc-step { display: flex; flex-direction: column; gap: 18px; margin: auto 0; }
.drc-step.drc-in { animation: drc-enter .34s cubic-bezier(.2, .7, .3, 1); }

@keyframes drc-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drc-step.drc-in { animation: none; }
  .drc-progress-seg { transition: none; }
}

.drc-h {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

/* Blindaje tipográfico contra el tema.
   En derossi.cl el cotizador va dentro de `.entry-content`, y la plantilla de
   página del tema trae un <style> que pinta y redimensiona los h2, los strong
   y los enlaces de ahí adentro. `.entry-content h2` es un selector de clase +
   etiqueta y le gana a `.drc-h`, que es una clase sola: medido en vivo, el
   título del widget salía en 19px negros con 32px de margen arriba, en vez de
   su propio tamaño. Repetir la etiqueta junto a la clase raíz (`div.drc h2`)
   recupera el peso sin recurrir a !important, y sirve para cualquier tema que
   haga lo mismo, no solo para este. */
div.drc h2 {
  color: var(--drc-tinta);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
div.drc strong, div.drc b { color: inherit; }
.drc-sub { font-size: .88rem; color: var(--drc-suave); max-width: 46ch; }

/* ---------- tarjetas de opción ---------- */

.drc-options { display: flex; flex-direction: column; gap: 9px; }
.drc-options.drc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
@media (max-width: 440px) { .drc-options.drc-grid { grid-template-columns: 1fr; } }

.drc-opt {
  appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
  /* Como ítem de grid (columna del material) sin esto puede negarse a
     encoger por debajo del ancho de su contenido y desbordar la columna
     — pasa si el widget vive en algo más angosto que el ancho de pantalla,
     por ejemplo un sidebar, donde el media query de una columna no aplica
     porque mira el viewport, no el contenedor. */
  min-width: 0;
  background: var(--drc-blanco);
  border: 1.5px solid var(--drc-linea);
  border-radius: var(--drc-radio);
  padding: 15px 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  transition: border-color .16s, background .16s, transform .16s;
}
.drc-opt:hover { border-color: var(--drc-azul); transform: translateY(-1px); }
.drc-opt:focus-visible { outline: 2px solid var(--drc-azul); outline-offset: 2px; }
.drc-opt[aria-pressed="true"] { border-color: var(--drc-azul); background: var(--drc-azul-suave); }
.drc-opt .drc-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drc-opt b { font-weight: 600; font-size: .96rem; }
.drc-opt small { color: var(--drc-suave); font-size: .78rem; line-height: 1.35; }
/* Foto del material de techo. Si el archivo no está, el script la saca, así
   que este bloque nunca muestra una imagen rota. */
.drc-opt .drc-foto {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
  background: var(--drc-linea);
}

/* ---------- campos ---------- */

.drc-field { display: flex; flex-direction: column; gap: 5px; position: relative; }
.drc-field label { font-size: .76rem; color: var(--drc-suave); font-weight: 600; letter-spacing: .01em; }
.drc-input {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--drc-linea);
  border-radius: 11px;
  background: var(--drc-blanco);
  color: inherit;
}
.drc-input:focus { outline: none; border-color: var(--drc-azul); }

/* Aviso bajo un campo. `.drc-off` lo esconde: con dos clases le gana a
   `.drc p`, que es lo que pone el margen a cero. */
.drc .drc-fieldnote {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--drc-rojo);
  margin-top: 3px;
}
.drc .drc-off { display: none; }
.drc-input::placeholder { color: #B4AFA6; }
.drc-input.drc-money { font-size: 1.4rem; font-weight: 700; padding: 15px 16px; }

.drc-listbox {
  /* position/left/top/width los pone el JS (cuelga de la raíz .drc, no de
     .drc-field — ver combobox() en cotizador.js). z-index alto porque
     position:fixed la saca del flujo/stacking normal del widget. */
  position: fixed;
  z-index: 9999;
  background: var(--drc-blanco);
  border: 1px solid var(--drc-linea);
  border-radius: 11px;
  box-shadow: var(--drc-sombra);
  max-height: 210px;
  overflow-y: auto;
  padding: 5px;
  /* Scrollbar clara: por defecto el navegador dibuja flechas negras que
     desentonan con el resto (todo en gris suave/azul). Firefox usa
     scrollbar-color; Chrome/Edge necesitan redibujar las flechas a mano
     porque no aceptan un color directo sobre el glifo nativo. */
  scrollbar-width: thin;
  scrollbar-color: #B4AFA6 transparent;
}
.drc-listbox::-webkit-scrollbar { width: 12px; }
.drc-listbox::-webkit-scrollbar-track { background: transparent; }
.drc-listbox::-webkit-scrollbar-thumb { background: #D9D5CC; border-radius: 99px; }
.drc-listbox::-webkit-scrollbar-button {
  display: block;
  height: 13px;
  background-color: var(--drc-blanco);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 6px;
}
.drc-listbox::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M5 0L10 6H0Z' fill='%23B4AFA6'/%3E%3C/svg%3E");
}
.drc-listbox::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0H10L5 6Z' fill='%23B4AFA6'/%3E%3C/svg%3E");
}
.drc-listbox button {
  appearance: none;
  font: inherit;
  font-size: .92rem;
  text-align: left;
  width: 100%;
  border: none;
  background: none;
  color: inherit;
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
}
.drc-listbox button:hover,
.drc-listbox button.drc-active { background: var(--drc-azul-suave); color: var(--drc-azul-osc); }
.drc-listbox .drc-empty { padding: 10px 11px; font-size: .85rem; color: var(--drc-suave); }

.drc-hintlink {
  background: none;
  border: none;
  font: inherit;
  font-size: .82rem;
  color: var(--drc-azul);
  cursor: pointer;
  padding: 0;
  text-align: left;
  align-self: flex-start;
}
.drc-hintlink:hover { color: var(--drc-azul-osc); }

/* ---------- subida de boleta ---------- */

.drc-drop {
  border: 1.5px dashed var(--drc-linea);
  border-radius: var(--drc-radio);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  font-size: .88rem;
  color: var(--drc-suave);
  background: var(--drc-blanco);
  transition: border-color .16s, background .16s;
}
.drc-drop:hover, .drc-drop.drc-over { border-color: var(--drc-azul); background: var(--drc-azul-suave); }
.drc-drop b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--drc-tinta);
  font-size: .95rem;
  margin-bottom: 3px;
}
.drc-drop-ico { width: 16px; height: 16px; flex: none; display: flex; color: var(--drc-azul); }
.drc-drop-ico svg { width: 100%; height: 100%; }

/* ---------- mapa ---------- */

.drc-map {
  height: 240px;
  border-radius: var(--drc-radio);
  overflow: hidden;
  background: var(--drc-linea);
  position: relative;
}
.drc-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  width: 34px;
  height: 34px;
  color: var(--drc-azul);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.drc-map-pin svg { width: 100%; height: 100%; display: block; }

/* ---------- pie de navegación ---------- */

.drc-nav {
  border-top: 1px solid var(--drc-linea);
  background: var(--drc-blanco);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.drc-btn {
  appearance: none;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  border: none;
  border-radius: 11px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .16s, opacity .16s;
}
.drc-btn:focus-visible { outline: 2px solid var(--drc-azul); outline-offset: 2px; }
.drc-btn-primary { background: var(--drc-azul); color: #fff; margin-left: auto; }
.drc-btn-primary:hover { background: var(--drc-azul-osc); }
.drc-btn-primary:disabled { opacity: .45; cursor: default; }
.drc-btn-ghost { background: transparent; color: var(--drc-azul); padding-left: 4px; }
.drc-btn-ghost:hover { color: var(--drc-azul-osc); }
.drc-btn-block { width: 100%; display: block; text-align: center; }

/* Blindaje contra el tema de WordPress.
   El botón de WhatsApp es un <a>, y en derossi.cl el tema pinta y subraya
   todos los enlaces del contenido con una regla más específica que
   `.drc-btn-block` (una clase sola). Resultado: el botón salía azul con el
   texto oscuro y subrayado, que es exactamente lo que un botón no debe
   parecer. Acá se gana con dos clases + la etiqueta, y el !important es
   para los temas que subrayan con !important. Va acotado a .drc: fuera del
   widget no toca nada. */
.drc a.drc-btn,
.drc a.drc-btn:link,
.drc a.drc-btn:visited,
.drc a.drc-btn:hover,
.drc a.drc-btn:focus,
.drc a.drc-btn:active {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
.drc a.drc-btn-primary,
.drc a.drc-btn-primary:link,
.drc a.drc-btn-primary:visited,
.drc a.drc-btn-primary:hover,
.drc a.drc-btn-primary:focus,
.drc a.drc-btn-primary:active { color: #fff !important; }
.drc button.drc-btn-ghost { color: var(--drc-azul); }
.drc button.drc-hintlink { color: var(--drc-azul); text-decoration: none; }

.drc-error {
  background: var(--drc-rojo-suave);
  color: var(--drc-rojo);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: .84rem;
}

/* ---------- pantalla de cálculo ---------- */

.drc-calc { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.drc-calc-title { font-size: 1.15rem; font-weight: 700; }
.drc-calc-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 330px;
  margin-top: 6px;
  background: var(--drc-blanco);
  border: 1px solid var(--drc-linea);
  border-radius: 99px;
  padding: 11px 18px;
  font-size: .89rem;
  color: #B4AFA6;
  transition: color .3s, border-color .3s;
}
.drc-calc-row .drc-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; flex: none; position: relative;
}
.drc-calc-row.drc-doing { color: var(--drc-azul); border-color: var(--drc-azul); }
.drc-calc-row.drc-doing .drc-dot { border-right-color: transparent; animation: drc-spin .7s linear infinite; }
.drc-calc-row.drc-done { color: var(--drc-tinta); }
.drc-calc-row.drc-done .drc-dot { background: var(--drc-azul); border-color: var(--drc-azul); }
.drc-calc-row.drc-done .drc-dot::after {
  content: ""; position: absolute; left: 3.5px; top: .5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes drc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .drc-calc-row.drc-doing .drc-dot { animation: none; } }

/* ---------- propuesta ---------- */

.drc-proposal { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.drc-proposal.drc-locked { filter: blur(7px); pointer-events: none; user-select: none; }

.drc-panel {
  background: var(--drc-blanco);
  border: 1px solid var(--drc-linea);
  border-radius: var(--drc-radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drc-panel-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--drc-suave);
}

.drc-bill { display: flex; flex-direction: column; gap: 9px; }
.drc-bill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: .92rem; }
.drc-bill-row .drc-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drc-bill-row.drc-minus { color: var(--drc-verde); }
.drc-bill-row.drc-new {
  border-top: 1px solid var(--drc-linea);
  padding-top: 11px;
  font-size: 1.02rem;
}
.drc-bill-row.drc-new .drc-amt { font-size: 1.75rem; color: var(--drc-azul); }

.drc-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.drc-specs.drc-specs-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 440px) { .drc-specs.drc-specs-3 { grid-template-columns: 1fr; } }
.drc-spec {
  background: var(--drc-fondo);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drc-spec .drc-v { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.drc-spec .drc-l { font-size: .7rem; color: var(--drc-suave); line-height: 1.3; }

/* Foto del inversor cotizado. Si el archivo no está, el script saca el
   bloque entero, así que esto nunca deja un hueco. */
.drc-equipo-foto { display: flex; justify-content: center; padding: 2px 0 14px; }
.drc-equipo-foto img { height: 132px; width: auto; max-width: 70%; object-fit: contain; }

.drc-equipo { display: flex; flex-direction: column; gap: 7px; font-size: .87rem; }
.drc-equipo div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--drc-linea); padding-bottom: 7px; }
.drc-equipo div:last-child { border-bottom: none; padding-bottom: 0; }
.drc-equipo span:first-child { color: var(--drc-suave); }
.drc-equipo span:last-child { font-weight: 600; text-align: right; }

.drc-lt { display: flex; flex-direction: column; gap: 8px; }
.drc-lt-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-radius: 10px; padding: 12px 14px;
}
.drc-lt-row span:first-child { font-size: .82rem; line-height: 1.35; max-width: 60%; }
.drc-lt-row span:last-child { font-weight: 700; font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.drc-lt-bad { background: var(--drc-rojo-suave); color: var(--drc-rojo); }
.drc-lt-good { background: var(--drc-verde-suave); color: var(--drc-verde); }

.drc-aviso {
  background: var(--drc-azul-suave);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: .82rem;
  line-height: 1.45;
}
.drc-fine { font-size: .72rem; color: var(--drc-suave); line-height: 1.5; }

/* ---------- página de propuesta: prueba social y dudas ---------- */

.drc-extras { display: flex; flex-direction: column; gap: 14px; }

/* Tira horizontal en vez de grilla: en el teléfono, cinco fotos apiladas son
   cinco pantallas de scroll entre el precio y el botón de avanzar. Así se
   ven de a dos y se arrastran. */
.drc-galeria {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #B4AFA6 transparent;
}
.drc-galeria-item {
  flex: 0 0 clamp(180px, 45%, 240px);
  margin: 0;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  background: var(--drc-linea);
}
.drc-galeria-item img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.drc-faq {
  border-top: 1px solid var(--drc-linea);
  padding: 10px 0 2px;
}
.drc-faq:first-of-type { border-top: 0; }
.drc-faq > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.drc-faq > summary::-webkit-details-marker { display: none; }
/* El signo se dibuja acá y no con un icono: rota a «−» al abrir sin JS. */
.drc-faq > summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--drc-azul);
}
.drc-faq[open] > summary::after { content: '−'; }
.drc-faq > summary:hover { color: var(--drc-azul); }
.drc .drc-faq p {
  font-size: .85rem;
  color: var(--drc-suave);
  line-height: 1.6;
  padding: 8px 0 4px;
}

/* ---------- confirmación después de dejar los datos ---------- */

.drc-ok {
  background: var(--drc-verde-suave);
  border: 1px solid #CFE7B4;
  border-radius: var(--drc-radio);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drc-ok-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--drc-verde);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drc-ok h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.drc .drc-ok p { font-size: .88rem; line-height: 1.6; }

/* ---------- guardar la propuesta (link permanente) ---------- */

.drc-guardar {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed #CFD6DE;
  border-radius: var(--drc-radio);
  background: var(--drc-blanco);
  text-align: center;
}
.drc-guardar-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.drc .drc-btn-wa,
.drc a.drc-btn-wa:link,
.drc a.drc-btn-wa:visited { background: #25D366; color: #fff !important; }
.drc .drc-btn-wa:hover,
.drc a.drc-btn-wa:hover { background: #1EBE5B; color: #fff !important; }
.drc-ok .drc-guardar { margin-top: 4px; }
.drc .drc-ya { margin: 0 auto; text-align: center; }

/* ---------- modal de datos ---------- */

.drc-gate {
  /* position:fixed sobre el viewport, no absolute sobre .drc: si quedara
     confinado al ancho/alto del widget (acotado por el max-height de
     .drc-stage), el formulario entero no entra y el modal mismo termina con
     su propia barra de scroll — el usuario ve solo Nombre/Apellido/RUT/
     WhatsApp y tiene que scrollear para llegar a Email y al botón. Con
     fixed sobre el viewport completo, el modal tiene alto de sobra y se
     ve entero de una, como el de la competencia. .drc no tiene
     transform/filter, así que fixed escapa de su overflow:hidden sin
     problema (misma lógica que la lista de región/comuna). */
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px;
  overflow-y: auto;
  background: rgba(250, 249, 247, .55);
  backdrop-filter: blur(1px);
}
.drc-gate-card {
  background: var(--drc-blanco);
  border: 1px solid var(--drc-linea);
  border-radius: 18px;
  box-shadow: var(--drc-sombra);
  padding: 20px 24px;
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  /* Más ajustado que el resto de la app (que usa 18px de gap): son 5
     campos + título + texto + botón + legal, y la idea es que entre
     completo de una sin scroll interno, como el de la competencia. */
  gap: 8px;
  margin: auto;
}
.drc-gate-card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.drc-gate-card .drc-sub { margin-bottom: 3px; }
.drc-gate-card .drc-field { gap: 3px; }
.drc-gate-card .drc-input { padding: 10px 14px; }
.drc-legal { font-size: .7rem; color: var(--drc-suave); line-height: 1.45; }
.drc-legal a { color: var(--drc-suave); }

/* paso de código: "Cambiar número" / "Reenviar código" a los costados */
.drc-gate-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -2px;
}
.drc-link {
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--drc-azul);
  cursor: pointer;
}
.drc-link:hover { color: var(--drc-azul-osc); }
.drc-link:disabled { color: var(--drc-suave); cursor: default; }