/* ---------------------------------------------------------------------------
   ¿Debo declarar renta? y ¿qué día me toca?  (Colombia)

   Comparte la carcasa `.aim-calc` con las demás herramientas; aquí viven solo
   los pasos, el veredicto y la tarjeta de la fecha.
   --------------------------------------------------------------------------- */

.aim-calc--renta{--r-border:#C3CDDB;--r-chip:#EEF2F7}

.r-req{
  margin:0 0 20px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted);
}
.r-steps{display:grid;gap:26px}
.r-step{min-width:0}
.r-step__h{
  display:flex;align-items:center;gap:10px;
  margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid var(--c-line);
  font-size:15px;font-weight:700;color:var(--c-ink);letter-spacing:-.2px;
}
.r-step__n{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-blue);color:#fff;font-size:13px;font-weight:700;
}
.r-step__s{margin:0 0 16px;font-size:13.5px;color:var(--c-muted);line-height:1.5}

/* Una condición: la pregunta a la izquierda, sí/no a la derecha. */
.r-q{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--c-line);
}
.r-q:last-of-type{border-bottom:0}
.r-q__l{flex:1 1 240px;min-width:0;font-size:14.5px;color:var(--c-ink);line-height:1.45}
.r-q__l b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.aim-calc--renta .r-q select{
  flex:0 0 108px;width:108px;
  font-family:inherit;font-size:15px;font-weight:650;color:var(--c-ink);
  background-color:#fff;border:1.5px solid var(--r-border);border-radius:10px;
  padding:11px 32px 11px 13px;min-height:48px;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235E6B7D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:10px;
}
.aim-calc--renta .r-q select:focus{outline:2px solid var(--c-blue);outline-offset:1px;border-color:var(--c-blue)}

/* Campo de los dos dígitos: grande, porque es lo único que se escribe. */
/* El campo ocupa la fila entera: desde que acepta la cédula COMPLETA, una caja
   de 110 px con letra de 26 no daba ni para su propio texto de ayuda. La cifra
   sigue grande y con espaciado, que es lo que hace cómodo teclear números en
   un teléfono, pero cabe la frase. */
.r-dig{display:flex;align-items:center;gap:12px}
.aim-calc--renta .r-dig input{
  flex:1 1 auto;width:100%;min-width:0;
  font-family:inherit;font-size:21px;font-weight:750;letter-spacing:1.5px;text-align:left;
  color:var(--c-ink);background:#fff;border:1.5px solid var(--r-border);border-radius:12px;
  padding:14px 16px;min-height:60px;box-sizing:border-box;font-variant-numeric:tabular-nums;
}
/* El texto de ayuda va en su tamaño, no en el del número. */
.aim-calc--renta .r-dig input::placeholder{
  font-size:15px;font-weight:500;letter-spacing:0;color:#A3AEBE;
}
.aim-calc--renta .r-dig input:focus{outline:0;border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(4,107,210,.16)}
.r-dig__h{flex:1 1 200px;min-width:0;font-size:13.5px;color:var(--c-muted);line-height:1.5}

/* Veredicto del paso 1. */
.r-veredicto{margin-top:18px;border-radius:14px;padding:18px 20px;border:1.5px solid}
/* ⚠️ `> b`, no `b` a secas. Con el selector suelto, los <b> que van DENTRO de
   la lista de motivos heredaban `display:block` y 19px: «El patrimonio es
   bruto» salía como un titular y el resto de la frase caía a la línea
   siguiente empezando por una coma. */
.r-veredicto > b{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:7px}
.r-veredicto__pie{margin:12px 0 0;font-size:13.5px;opacity:.85}
.r-veredicto p{margin:0;font-size:14.5px;line-height:1.6}
.r-veredicto--si{border-color:#F0C9C4;background:var(--c-red-bg);color:#7F1D1D}
.r-veredicto--si b{color:#7F1D1D}
.r-veredicto--no{border-color:#BFE3D2;background:#EEF9F4;color:#0B4F38}
.r-veredicto--no b{color:#0B7A52}
.r-veredicto--ojo{border-color:var(--c-line);background:var(--c-soft);color:var(--c-body)}
.r-porque{margin:12px 0 0;padding-left:20px;font-size:14px;line-height:1.55}
.r-porque li{margin-bottom:5px}

/* Tarjeta de la fecha. */
.r-fecha{
  margin-top:18px;border-radius:14px;padding:22px;
  background:linear-gradient(135deg,#263886 0%,#046BD2 100%);color:#fff;
}
.r-fecha__k{display:block;font-size:13px;font-weight:650;color:#CBDBF3;margin-bottom:6px}
.r-fecha__d{
  display:block;font-family:Manrope,Inter,sans-serif;font-size:27px;font-weight:800;
  letter-spacing:-.8px;line-height:1.15;
}
.r-cuenta{
  display:inline-block;margin-top:12px;padding:6px 13px;border-radius:99px;
  background:rgba(255,255,255,.16);font-size:13.5px;font-weight:700;
}
.r-cuenta--urge{background:#FFB800;color:#1A1A2E}
.r-cuenta--paso{background:rgba(255,255,255,.12);color:#F3D2CE}

.r-cta{margin-top:20px}
.r-cta .aim-cta{margin:0}

/* Aviso legal: visible, no escondido en letra pequeña al final. */
.r-aviso{
  margin-top:20px;border:1px solid var(--c-line);background:var(--c-soft);
  border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--c-body);
}
.r-aviso b{color:var(--c-ink)}
.r-fuente{margin:14px 0 0;font-size:12.5px;color:var(--c-muted);line-height:1.5}

@media (max-width:520px){
  .r-fecha__d{font-size:23px}
  .aim-calc--renta .r-q select{flex:1 1 100%;width:100%}
}

/* Asesor por WhatsApp. Es el mismo equipo y el mismo chat que abre la app
   (`tax_advisor.dart`), con un mensaje que dice que viene de la web para que
   el equipo sepa de dónde llegó. */
.r-asesor{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding:20px;border-radius:14px;
  border:1.5px solid #BFE3D2;background:#F1FAF6;
}
.r-asesor__t{flex:1 1 260px;min-width:0}
.r-asesor__t b{display:block;font-size:16px;font-weight:750;color:var(--c-ink);margin-bottom:5px}
.r-asesor__t span{display:block;font-size:14px;line-height:1.55;color:var(--c-body)}
.aim-calc--renta .r-asesor__b{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:99px;
  background:#0B7A52;color:#fff !important;text-decoration:none;
  font-size:15px;font-weight:700;
}
.aim-calc--renta .r-asesor__b:hover{background:#095F40;color:#fff !important}
@media (max-width:520px){
  .aim-calc--renta .r-asesor__b{flex:1 1 100%}
}

/* La consulta oficial de la DIAN. Va ARRIBA del paso 1 y con peso visual:
   es la única que responde contra los registros reales de la persona, y
   nuestras preguntas son orientación, no veredicto. Mismo criterio que la app
   (`dian_health.dart`): el camino oficial nunca se esconde. */
.r-dian{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:0 0 10px;padding:18px 20px;border-radius:14px;
  border:1.5px solid #CFE1F7;background:#F4F9FF;
}
.r-dian__t{flex:1 1 240px;min-width:0}
.r-dian__t b{display:block;font-size:15.5px;font-weight:750;color:var(--c-ink);margin-bottom:5px}
.r-dian__t span{display:block;font-size:13.5px;line-height:1.55;color:var(--c-body)}
.aim-calc--renta .r-dian__b{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:99px;
  background:var(--c-blue);color:#fff !important;text-decoration:none;
  font-size:14.5px;font-weight:700;
}
.aim-calc--renta .r-dian__b:hover{background:#263886;color:#fff !important}
.r-dian__nota{margin:0 0 18px;font-size:12.5px;color:var(--c-muted);line-height:1.5}
/* Dentro del veredicto «no», el botón hereda el tono del aviso. */
.r-veredicto .r-dian__b{margin-top:14px;background:#0B7A52}
.r-veredicto .r-dian__b:hover{background:#095F40}
@media (max-width:520px){ .aim-calc--renta .r-dian__b{flex:1 1 100%} }


/* --- tarjetas de información ---------------------------------------------
   La gente no tiene por qué saber qué es «patrimonio bruto». Cada condición
   lleva su (i) desplegable, igual que en la app. Es `<details>` nativo: sin
   JavaScript, accesible y funciona aunque el optimizador difiera los scripts. */
.r-q__l{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
/* ⚠️ Base CERO, no `auto` ni un ancho fijo. Con `flex-basis:auto` la base es el
   ancho del texto completo, que en un teléfono no cabe, y la (i) se iba a una
   línea suya, suelta bajo la pregunta. Con 0% el texto se reparte lo que hay y
   la (i) se queda al lado. */
.r-q__l label{flex:1 1 0%;min-width:0}
/* ⚠️ `display:contents` NO es decorativo. Sin él, el <details> es una caja
   normal y con `flex:0 0 auto` crece hasta el ancho de su texto SIN CORTAR:
   medido, 1.846 px dentro de una fila de 365, y la página entera se salía de
   la pantalla al tocar la (i). Con `contents` la caja desaparece y el botón y
   el panel pasan a ser elementos de la propia fila, que es lo que el resto de
   estas reglas da por hecho. */
.r-info{display:contents}

/* ⚠️ Y el envoltorio interno también. Los navegadores modernos meten el
   contenido del <details> en un `::details-content`, así que el elemento de la
   fila no era el panel sino esa caja: mi `order:3` se aplicaba DENTRO de ella y
   el botón (i) acababa debajo del panel en vez de al lado del texto.
   Disolviéndola, el panel sí es elemento de la fila y su orden manda. */
.r-info::details-content{display:contents}

/* Respaldo para un navegador que no lo soporte: el <details> ocupa la fila
   entera al abrirse. La (i) se mueve, pero nada se sale. */
@supports not (display:contents){
  .r-info{display:block;flex:0 0 auto;order:2;min-width:0}
  .r-info[open]{flex:1 1 100%}
}
.r-info > summary{
  flex:0 0 auto;order:2;
  list-style:none;cursor:pointer;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--r-chip);border:1.5px solid var(--r-border);
  font-size:12.5px;font-weight:800;font-style:italic;color:var(--c-muted);
  user-select:none;
}
.r-info > summary::-webkit-details-marker{display:none}
.r-info[open] > summary{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.r-info > summary:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.r-info > div{
  flex:1 1 100%;order:3;min-width:0;margin-top:10px;
  border-left:3px solid var(--c-blue);background:var(--c-soft);
  border-radius:0 10px 10px 0;padding:12px 14px;
  font-size:13.5px;line-height:1.6;color:var(--c-body);
}
.r-info > div b{font-weight:700;color:var(--c-ink)}

/* Resuelto: con un «sí» las demás preguntas ya no cambian nada. */
.r-preguntas--resuelto .r-q{opacity:.5;transition:opacity .15s}
.r-preguntas--resuelto .r-q:focus-within,
.r-preguntas--resuelto .r-q:hover{opacity:1}

/* El atajo va destacado: es la primera decisión de la página. */
.r-q--atajo{
  border-bottom:0;margin-bottom:6px;padding:14px 16px;
  border:1.5px solid var(--r-border);border-radius:12px;background:#fff;
}

@media (max-width:520px){
  .r-q__l{gap:8px}
  .r-q--atajo{padding:14px}
}