/* ==========================================================================
   CALCULADORA PLAN AUTO+ 2026  ·  RO-DES        v1.0.1
   --------------------------------------------------------------------------
   Shortcode: [calculadora_plan_auto]

   NOTA IMPORTANTE SOBRE EL RESET:
   El reset local usa :where() para tener especificidad CERO. Si se escribe
   como `.rdcalc div { padding:0 }` (especificidad 0-1-1) se come a las reglas
   del propio componente `.rdcalc-head` (0-1-0) y todo el widget se queda sin
   fondos ni paddings. Con :where() el reset nunca gana a nada del componente.
   ========================================================================== */

/* --- Variables (scopeadas al componente, no a :root) --------------------- */
.rdcalc {
  --rdc-verde: #9ed92d;
  --rdc-verde-osc: #4a7a3a;
  --rdc-negro: #1a1f1a;
  --rdc-negro-2: #1a2e1a;
  --rdc-gris-txt: #555f55;
  --rdc-gris-label: #9aa09a;
  --rdc-borde: #e0e4de;
  --rdc-panel-bg: #f0fae8;
  --rdc-panel-borde: #c8e6b8;
  --rdc-panel-linea: #d8eecb;
  --rdc-fuente: Arial, Helvetica, sans-serif;
}

/* --- Reset local: especificidad 0, no pisa nada del componente ----------- */
:where(.rdcalc) :where(*) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  float: none;
  list-style: none;
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  min-height: 0;
  max-width: none;
  width: auto;
}

/* box-sizing sí va con !important: no choca con nada visual */
.rdcalc,
.rdcalc *,
.rdcalc *::before,
.rdcalc *::after {
  box-sizing: border-box !important;
}

/* Divi mete `p { padding-bottom: 1em }` con especificidad de elemento,
   que gana al :where(). Lo neutralizamos solo para <p> dentro del widget. */
.rdcalc p {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Wrapper ------------------------------------------------------------- */
.rdcalc {
  font-family: var(--rdc-fuente) !important;
  font-size: 14px !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--rdc-gris-txt);
  line-height: 1.4 !important;
  -webkit-font-smoothing: antialiased;
}

.rdcalc-card {
  width: 100% !important;
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important;
}

/* --- Cabecera ------------------------------------------------------------ */
.rdcalc-head {
  background: var(--rdc-negro) !important;
  padding: 20px 24px 18px !important;
}

.rdcalc-head-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 5px !important;
}

.rdcalc-head-icon {
  width: 32px !important;
  height: 32px !important;
  background: #2e7d3e !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.rdcalc-title {
  font-family: var(--rdc-fuente) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

.rdcalc-head-sub {
  font-size: 12.5px !important;
  color: #7a8a7a !important;
  margin-left: 42px !important;
  line-height: 1.4 !important;
}

/* --- Cuerpo -------------------------------------------------------------- */
.rdcalc-body {
  padding: 0 20px 24px !important;
}

.rdcalc-step {
  padding-top: 20px !important;
}

.rdcalc-step-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--rdc-gris-label) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.rdcalc-step-label span {
  color: var(--rdc-negro) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* --- Chips --------------------------------------------------------------- */
.rdcalc-grid {
  display: grid !important;
  gap: 8px !important;
}

.rdcalc-grid--2 { grid-template-columns: 1fr 1fr !important; }
.rdcalc-grid--3 { grid-template-columns: 1fr 1fr 1fr !important; }

.rdcalc-chip {
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--rdc-borde) !important;
  background: #fff !important;
  font-family: var(--rdc-fuente) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--rdc-gris-txt) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.3 !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rdcalc-chip:hover {
  border-color: #b0bab0 !important;
  color: var(--rdc-negro) !important;
  background: #f7f9f7 !important;
}

.rdcalc-chip:focus-visible {
  outline: 2px solid var(--rdc-verde);
  outline-offset: 2px;
}

.rdcalc-chip.is-active,
.rdcalc-chip.is-active:hover {
  background: var(--rdc-verde) !important;
  border-color: var(--rdc-verde) !important;
  color: #fff !important;
}

.rdcalc-badge {
  font-size: 10px !important;
  background: #eaf3e0 !important;
  color: #2e6b1e !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.rdcalc-chip.is-active .rdcalc-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.rdcalc-badge--warn {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.rdcalc-chip.is-active .rdcalc-badge--warn {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* --- Separador ----------------------------------------------------------- */
.rdcalc-divider {
  height: 1px !important;
  background: #ebebeb !important;
  margin: 20px 0 0 !important;
}

/* --- Interruptores ------------------------------------------------------- */
.rdcalc-toggles {
  padding-top: 18px !important;
}

.rdcalc-toggles-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--rdc-gris-label) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

.rdcalc-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #f7f9f6 !important;
  border-radius: 10px !important;
  cursor: pointer;
  margin-bottom: 8px !important;
  transition: background 0.15s;
  border: 1.5px solid transparent !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rdcalc-toggle:last-child { margin-bottom: 0 !important; }
.rdcalc-toggle:hover { background: #f0f5ef !important; }

.rdcalc-toggle.is-on {
  border-color: #d4e8cc !important;
  background: #f3faf0 !important;
}

.rdcalc-toggle:focus-visible {
  outline: 2px solid var(--rdc-verde);
  outline-offset: 2px;
}

.rdcalc-toggle-text { flex: 1 1 auto !important; }

.rdcalc-toggle-title {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--rdc-negro) !important;
  margin-bottom: 2px !important;
  line-height: 1.35 !important;
}

.rdcalc-toggle-sub {
  font-size: 11.5px !important;
  color: #8a968a !important;
  line-height: 1.4 !important;
}

.rdcalc-switch {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: #d5d8d5 !important;
  position: relative !important;
  flex: 0 0 44px !important;
  transition: background 0.2s;
}

.rdcalc-switch.is-on { background: var(--rdc-verde) !important; }

.rdcalc-knob {
  width: 18px !important;
  height: 18px !important;
  background: #fff !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.rdcalc-switch.is-on .rdcalc-knob { left: 23px !important; }

/* --- Panel de resultado -------------------------------------------------- */
.rdcalc-result {
  margin: 20px 0 0 !important;
  background: var(--rdc-panel-bg) !important;
  border: 1.5px solid var(--rdc-panel-borde) !important;
  border-radius: 14px !important;
  padding: 20px 20px 16px !important;
}

.rdcalc-result-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6a8a5a !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.rdcalc-result-amount {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
}

.rdcalc-result-num {
  font-family: var(--rdc-fuente) !important;
  font-size: 56px !important;
  font-weight: 500 !important;
  color: var(--rdc-negro-2) !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}

.rdcalc-result-eur {
  font-family: var(--rdc-fuente) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--rdc-verde-osc) !important;
  line-height: 1 !important;
}

/* --- Desglose ------------------------------------------------------------ */
.rdcalc-breakdown {
  display: flex !important;
  flex-direction: column !important;
}

.rdcalc-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  border-top: 1px solid var(--rdc-panel-linea) !important;
}

.rdcalc-row-name {
  font-size: 13px !important;
  color: #4a6a4a !important;
  line-height: 1.4 !important;
}

.rdcalc-row-val {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #7ba81f !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.rdcalc-row-val.is-total { color: var(--rdc-negro-2) !important; }

.rdcalc-row-name.is-bold {
  font-weight: 600 !important;
  color: var(--rdc-negro-2) !important;
}

/* --- Avisos -------------------------------------------------------------- */
.rdcalc-notice {
  font-size: 11.5px !important;
  color: #5a7a5a !important;
  border-top: 1px solid var(--rdc-panel-linea) !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  line-height: 1.6 !important;
}

.rdcalc-notice--warn  { color: #92500e !important; }
.rdcalc-notice--alert { color: #c0392b !important; }
.rdcalc-notice strong { font-weight: 600 !important; }

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 480px) {
  .rdcalc-head       { padding: 18px 18px 16px !important; }
  .rdcalc-body       { padding: 0 16px 20px !important; }
  .rdcalc-title      { font-size: 17.5px !important; }
  .rdcalc-head-sub   { font-size: 11.5px !important; margin-left: 0 !important; margin-top: 4px !important; }
  .rdcalc-grid--3    { grid-template-columns: 1fr !important; }
  .rdcalc-chip       { font-size: 13px !important; padding: 11px 10px !important; }
  .rdcalc-result-num { font-size: 44px !important; }
  .rdcalc-result     { padding: 18px 16px 14px !important; }
  .rdcalc-row        { align-items: flex-start !important; }
}

/* Divi centra el texto dentro de .et_pb_text / .et_pb_code */
.et_pb_module .rdcalc,
.et_pb_text .rdcalc,
.et_pb_code .rdcalc,
.et_pb_text_inner .rdcalc {
  text-align: left !important;
}