/*
  styles_calculadoras.css
  Extiende styles.css con los componentes específicos de las calculadoras.
  Carga DESPUÉS de styles.css. Usa exactamente las mismas variables y tipografía.
*/

/* ── Fondo de página (tint, como las secciones del index) ── */
body { background: var(--tint); }

/* ── Cuerpo con padding ── */
.calc-body { padding: clamp(24px,3vw,48px) 0 64px; }
.calc-body .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Cabecera de la calculadora ──
   calc-header y calc-footer viven fuera de .wrap (son hermanos suyos dentro
   de .calc-body), pero comparten su misma columna de 1120px centrada para
   que el título, los botones y las tarjetas queden alineados verticalmente.
   El lede usa un max-width generoso (como el aviso del pie) para que el
   párrafo ocupe la anchura disponible en pocas líneas, en vez de partirse
   en muchas líneas cortas con un hueco enorme a la derecha. */
.calc-header, .calc-footer {
  max-width: 1120px; margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px; box-sizing: border-box;
}
.calc-header { margin-bottom: 32px; }
.calc-header .eyebrow { margin-bottom: 10px; }
.calc-header h1 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
  color: var(--ink); margin-bottom: 10px;
}
.calc-header .lede {
  font-size: 14px; color: var(--ink-soft); max-width: 140ch; line-height: 1.65;
  margin-bottom: 18px;
}
.reset-btn {
  appearance: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; font-family: var(--sans);
  color: var(--ink-soft); background: #fff; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.reset-btn:hover { border-color: var(--verd); color: var(--verd); }

/* ── Layout de dos columnas ── */
.calc-grid-layout {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media(min-width: 940px) {
  .calc-grid-layout { grid-template-columns: 1.05fr .95fr; align-items: start; }
}

/* ── Cards de entrada (estilo igual al .card del index pero con padding reducido) ── */
.input-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(27,36,48,.04);
}
.input-card + .input-card { margin-top: 16px; }
.input-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.input-card-head .step-num {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 7px; letter-spacing: .04em;
  text-transform: uppercase;
}
.input-card-head h2 {
  font-size: 14px; font-weight: 700; color: var(--ink); flex: 1;
}
.input-card-head .hint { font-size: 12px; color: var(--ink-soft); }
.input-card-body { padding: 4px 20px 16px; }

/* ── Filas de campo ── */
.field-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.field-row:last-child { border-bottom: none; }
.field-row label { flex: 1; font-size: 13px; color: var(--ink); }
.field-row label b { font-weight: 600; display: block; }
.field-row label .sub {
  font-size: 11px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4;
}
.num-wrap { position: relative; width: 148px; flex: none; }
.num-wrap input {
  width: 100%; text-align: right;
  padding: 9px 36px 9px 10px;
  font-size: 13.5px;
  /* hereda el estilo base de styles.css: border, radius, bg, font */
}
.num-wrap input:disabled { opacity: .45; background: var(--tint); }
.num-wrap .unit {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; color: var(--ink-soft); pointer-events: none;
}
.num-wrap.no-unit input { padding-right: 10px; }

/* Separador de grupo */
.group-sep {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
  padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 4px;
}
.group-sep:first-child { border-top: none; padding-top: 6px; }

/* Checkbox custom */
label.chk-row {
  flex: 1; display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 13px;
}
label.chk-row input { position: absolute; opacity: 0; width: 0; height: 0; }
label.chk-row .box {
  flex: none; width: 17px; height: 17px; margin-top: 1px;
  border: 1.5px solid var(--line); border-radius: 4px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
label.chk-row .box::after {
  content: ""; width: 9px; height: 5px;
  border: 2px solid #fff; border-top: none; border-right: none;
  transform: rotate(-45deg) translateY(-1px); opacity: 0;
}
label.chk-row input:checked + .box { background: var(--verd); border-color: var(--verd); }
label.chk-row input:checked + .box::after { opacity: 1; }
label.chk-row input:focus-visible + .box { outline: 2px solid var(--verd); outline-offset: 2px; }
label.chk-row .chk-txt b { font-weight: 600; }
label.chk-row .chk-txt .sub { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* ── Columna de resultados (sticky) ── */
.result-col { position: relative; }
@media(min-width: 940px) { .result-col { position: sticky; top: 78px; } }

/* ── Hero resultado ── */
.res-hero {
  background: var(--verd); color: #fff;
  border-radius: var(--radius); padding: 24px 28px;
  box-shadow: 0 12px 28px -8px rgba(15,74,38,.45);
}
.res-hero .rh-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; opacity: .8; margin-bottom: 6px;
}
.res-hero .rh-label b { font-weight: 700; opacity: 1; }
.res-hero .rh-figure {
  font-size: clamp(28px, 4vw, 38px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.res-hero .rh-meta {
  font-size: 12.5px; opacity: .85; margin-top: 8px;
}
.res-hero .rh-meta b { font-weight: 600; }

/* ── Panel de tiles ── */
.res-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-top: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(27,36,48,.04);
}
.res-panel-head {
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
}
.tiles-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.tile {
  padding: 12px 16px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tile:nth-child(2n) { border-right: none; }
.tile:nth-last-child(-n+2) { border-bottom: none; }
.tile:nth-last-child(1):nth-child(odd) { border-bottom: none; grid-column: span 2; }
.tile-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--verd); margin-bottom: 4px;
}
.tile-desc { font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; line-height: 1.35; }
.tile-val {
  font-size: 17px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Aviso / warn ── */
.calc-warn {
  display: none; margin-top: 12px; padding: 12px 16px;
  border-radius: var(--radius); font-size: 13px;
  background: var(--verd-tint); border: 1px solid #CDE6D2; color: var(--verd);
}
.calc-warn.show { display: block; }
.calc-warn.info {
  background: var(--verd-tint); border-color: #CDE6D2; color: var(--verd);
}
.calc-warn b { font-weight: 600; }

/* ── Acordeones de detalle ── */
details.calc-disc {
  margin-top: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
details.calc-disc summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
details.calc-disc summary::-webkit-details-marker { display: none; }
details.calc-disc summary:hover { background: var(--tint); }
details.calc-disc summary:focus-visible { outline: 2px solid var(--verd); outline-offset: -2px; }
details.calc-disc summary .disc-icon { font-size: 11px; color: var(--ink-soft); }
details.calc-disc summary .disc-chev {
  margin-left: auto; color: var(--ink-soft); font-size: 11px;
  transition: transform .15s;
}
details.calc-disc[open] summary .disc-chev { transform: rotate(90deg); }
details.calc-disc[open] summary { border-bottom: 1px solid var(--line); }
details.calc-disc .disc-body { padding: 16px; }

/* KV grid de detalles */
.kv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.kv-grid > div {
  background: var(--tint); border-radius: var(--radius);
  padding: 8px 12px; display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px;
}
.kv-grid span { font-size: 11.5px; color: var(--ink-soft); }
.kv-grid b { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Pasos de cálculo */
.calc-steps { margin-top: 12px; padding-left: 24px; position: relative; }
.calc-steps::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.calc-step { position: relative; padding: 6px 0; }
.calc-step .cs-dot {
  position: absolute; left: -24px; top: 7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--verd-tint); border: 1.5px solid var(--verd); color: var(--verd);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.calc-step .cs-formula { font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
.calc-step .cs-formula b { color: var(--verd); font-weight: 700; }
.calc-step .cs-result {
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Caja de fórmula */
.fbox {
  font-size: 12px; line-height: 1.85; color: var(--ink); overflow-x: auto;
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
}
.fbox .fb-section { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fbox .fb-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fbox .fb-head {
  font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--verd);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.fbox .lhs { color: var(--verd); font-weight: 700; }
.fbox .soft { color: var(--ink-soft); }

/* ── Formulario de captación ── */
.lead-panel { margin-top: 12px; }
.lead-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: 0 1px 3px rgba(27,36,48,.04);
}
.lead-box-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 8px;
}
.lead-pitch {
  font-size: 13px; color: var(--ink-soft); line-height: 1.6;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.lead-field { margin-bottom: 12px; }
.lead-field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.lead-submit-btn {
  width: 100%; margin-top: 4px;
  appearance: none; border: 0; border-radius: var(--radius);
  padding: 13px 20px; font-size: 13.5px; font-weight: 700;
  font-family: var(--sans); color: #fff; background: var(--vermell); cursor: pointer;
}
.lead-submit-btn:hover { background: var(--vermell-hi); }
.lead-submit-btn:disabled { background: var(--tint); color: var(--ink-soft); cursor: not-allowed; }
.lead-legal {
  font-size: 11px; color: var(--ink-soft); margin-top: 10px;
  text-align: center; line-height: 1.5;
}
.lead-legal a { color: var(--verd); text-decoration: none; }
.lead-legal a:hover { text-decoration: underline; }
.lead-error {
  display: none; margin-top: 8px; padding: 10px 13px;
  background: var(--verd-tint); border: 1px solid #CDE6D2; border-radius: var(--radius);
  font-size: 12.5px; color: var(--verd);
}
.lead-ok {
  display: none; text-align: center; padding: 18px 0 6px;
}
.lead-ok .ok-ico {
  font-size: 28px; display: block; margin-bottom: 6px; color: var(--verd);
}
.lead-ok .ok-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.lead-ok .ok-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ── Footer de calculadora ── */
.calc-footer {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); line-height: 1.7; max-width: 140ch;
}
.calc-footer b { font-weight: 600; color: var(--ink); }
.calc-footer code {
  font-family: ui-monospace, 'Courier New', monospace;
  background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line);
  font-size: 11.5px;
}

/* ── Controles segmentados (REIB) ── */
.seg-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.seg {
  display: inline-flex; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 3px;
}
.seg-label {
  align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); padding: 0 8px 0 4px;
}
.seg button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); background: none; border: none;
  border-radius: 4px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--verd); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--verd); outline-offset: 2px; }

/* Ocultar filas avanzadas en modo básico */
.calc-body.basico .adv { display: none !important; }

/* ── Envío por WhatsApp desde el formulario de contacto ──
   Ninguna web puede enviar un WhatsApp sola: el enlace wa.me abre la app con
   el mensaje ya escrito y el cliente pulsa enviar. */
.wa-btn { display: inline-block; margin-top: 16px; padding: 13px 24px; border-radius: 6px; background: #25D366; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1; transition: background .15s; }
.wa-btn:hover { background: #1DA851; color: #fff; }
.wa-btn:focus-visible { outline: 2px solid var(--verd); outline-offset: 2px; }
.wa-btn[hidden] { display: none; }
.wa-hint { margin: 10px 0 0; font-size: .82em; line-height: 1.5; color: var(--ink-soft); }
.wa-hint[hidden] { display: none; }
/* Selector de canal de seguimiento y de "¿quieres más información?": reutilizan el componente .seg del sitio. */
#lead-canal, #lead-quiere { display: inline-flex; margin-top: .35rem; flex-wrap: wrap; }
.lead-canal-note { margin: .5rem 0 0; font-size: .82em; line-height: 1.5; color: var(--ink-soft); }
.lead-field[hidden] { display: none; }

/* ── Teléfono con prefijo de país ── */
.tel-group { display: flex; position: relative; }
.tel-group select {
  flex: 0 0 auto; width: auto; max-width: 108px;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: #fff; padding: 11px 6px 11px 11px; font-size: 13.5px; font-family: var(--sans);
  color: var(--ink); cursor: pointer;
}
.tel-group select:focus { outline: 2px solid var(--verd); outline-offset: 1px; position: relative; z-index: 1; }
/* Con ~60 países, el desplegable nativo puede salirse de la pantalla: al
   abrirse se convierte en una lista de 10 filas con su propia barra de
   desplazamiento, colgando debajo del campo, en vez de dejar que el
   navegador intente pintarlas todas encima. Al pasar a "position:absolute"
   el select sale del flujo y deja un hueco donde estaba: este "ghost" ocupa
   ese hueco mientras tanto, mostrando el prefijo ya elegido. */
.tel-group select[size] {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  width: 150px; max-width: 150px; height: auto;
  border-right: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.tel-code-ghost {
  flex: 0 0 auto; width: auto; max-width: 108px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: #fff; padding: 11px 6px 11px 11px; font-size: 13.5px; font-family: var(--sans);
  color: var(--ink);
}
.tel-code-ghost[hidden] { display: none; }
.tel-group input[type=tel] { flex: 1; min-width: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.tel-group input[type=tel]:focus { position: relative; z-index: 1; }

/* ── Liquidación IRPF (específico) ── */
.liq-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 16px; border-bottom: 1px solid var(--line); gap: 12px;
}
.liq-row:last-child { border-bottom: none; }
.liq-row .lr-lab { font-size: 13px; color: var(--ink); flex: 1; }
.liq-row .lr-lab small { font-size: 11px; color: var(--ink-soft); display: block; margin-top: 1px; }
.liq-row .lr-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.liq-row.minus .lr-val { color: var(--verd); }
.liq-row.total {
  background: var(--tint);
}
.liq-row.total .lr-lab { font-weight: 700; }
.liq-row.total .lr-val { font-size: 17px; font-weight: 700; }

/* ── Selector (IRNR) ── */
.sel-row { padding: 10px 0; }
.sel-row > label {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink); margin-bottom: 6px;
}
.sel-row select {
  width: 100%; font-family: var(--sans); font-size: 13.5px;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235B6472' stroke-width='1.5'/></svg>") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none;
  color: var(--ink); cursor: pointer;
}
.sel-row select:focus { border-color: var(--verd); outline: 2px solid var(--verd); outline-offset: 1px; }

@media(prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Opciones de contacto (radio) ── */
.contact-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.contact-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: border-color .15s;
}
.contact-opt:hover { border-color: var(--verd); }
.contact-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-opt .opt-box {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.contact-opt .opt-box::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--verd); opacity: 0; transition: opacity .15s;
}
.contact-opt input:checked + .opt-box { border-color: var(--verd); }
.contact-opt input:checked + .opt-box::after { opacity: 1; }
.contact-opt input:checked ~ .opt-label { font-weight: 600; color: var(--ink); }
.contact-opt .opt-label { font-size: 13.5px; color: var(--ink-soft); }