/* ---------------------------------------------------------------------------
   Calculadora de interés compuesto.

   Copia la ESTRUCTURA de la calculadora de la SEC que esta página replica:
   cuatro pasos numerados, campos obligatorios marcados con asterisco, botones
   de calcular y restablecer, y un resultado con titular, gráfico con ejes y
   leyenda, y tabla desplegable. Quien llega comparando encuentra lo mismo en
   el mismo sitio.

   Lo que NO se copia es su paleta: los colores, la tipografía y los radios
   son los de AI Money (ver DESIGN_SYSTEM.md).
   --------------------------------------------------------------------------- */

.aim-calc--cc{
  --cc-border:#C3CDDB;      /* borde del campo, visible sobre blanco */
  --cc-border-hi:#94A3B8;   /* al pasar por encima */
  --cc-chip:#EEF2F7;        /* fondo de la unidad pegada al campo */
  --cc-up:#0B7A52;          /* varianza por encima */
  --cc-down:#B0762F;        /* varianza por debajo */
}

/* --- nota de campos obligatorios ------------------------------------------ */
.cc-req{
  margin:0 0 20px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--c-muted);
}
.cc-star{color:var(--c-red);font-weight:700}

/* --- pasos ---------------------------------------------------------------- */
.cc-steps{display:grid;gap:26px;margin:0;padding:0;border:0}
.cc-step{margin:0;padding:0;border:0;min-width:0}
.cc-step__h{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--c-line);
  font-size:15px;font-weight:700;color:var(--c-ink);letter-spacing:-.2px;
}
.cc-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;
  font-variant-numeric:tabular-nums;
}

/* --- campos --------------------------------------------------------------- */
.cc-row{display:grid;gap:18px;min-width:0}
@media (min-width:680px){
  .cc-row--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.cc-field{display:block;min-width:0}
.cc-field__l{
  display:block;font-size:14px;font-weight:650;color:var(--c-ink);
  margin:0 0 8px;line-height:1.35;
}
.cc-field__h{
  display:block;font-size:12.5px;color:var(--c-muted);
  margin:7px 0 0;line-height:1.45;
}

/* El control entero es UNA caja con borde. La unidad va dentro, pegada, en vez
   de flotar al lado: así se ve de un vistazo dónde se escribe y en qué unidad.
   El borde es más marcado que el del resto del sitio a propósito: con el borde
   tenue, un campo vacío sobre tarjeta blanca se lee como texto deshabilitado. */
.cc-ctl{
  display:flex;align-items:stretch;min-width:0;
  background:#fff;border:1.5px solid var(--cc-border);border-radius:10px;
  overflow:hidden;transition:border-color .12s,box-shadow .12s;
}
.cc-ctl:hover{border-color:var(--cc-border-hi)}
.cc-ctl:focus-within{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(4,107,210,.16)}

.aim-calc--cc .cc-ctl__in{
  flex:1 1 auto;width:auto;min-width:0;
  font-family:inherit;font-size:18px;font-weight:600;color:var(--c-ink);
  background:transparent;border:0;outline:0;box-shadow:none;
  padding:14px 15px;min-height:54px;border-radius:0;
  font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;
  box-sizing:border-box;
}
.aim-calc--cc .cc-ctl__in::placeholder{color:#A3AEBE;font-weight:500}
.aim-calc--cc .cc-ctl__in:focus{outline:0;box-shadow:none;border:0}

.cc-ctl__suf{
  flex:0 0 auto;display:flex;align-items:center;padding:0 16px;
  background:var(--cc-chip);border-left:1.5px solid var(--cc-border);
  font-size:16px;font-weight:700;color:var(--c-muted);
}
.aim-calc--cc .cc-ctl__sel{
  flex:1 1 auto;width:100%;min-width:0;
  font-family:inherit;font-size:17px;font-weight:600;color:var(--c-ink);
  background-color:#fff;border:0;border-radius:0;outline:0;
  padding:14px 40px 14px 15px;min-height:54px;cursor:pointer;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;text-overflow:ellipsis;
  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 14px center;background-size:11px;
}

/* --- botones -------------------------------------------------------------- */
.cc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.aim-calc--cc .cc-btn{
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;background:var(--c-blue);
  border:1.5px solid var(--c-blue);border-radius:10px;
  padding:14px 26px;cursor:pointer;transition:filter .12s;
}
.aim-calc--cc .cc-btn:hover{filter:brightness(1.08)}
.aim-calc--cc .cc-reset{
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--c-body);background:#fff;
  border:1.5px solid var(--cc-border);border-radius:10px;
  padding:14px 22px;cursor:pointer;transition:border-color .12s,color .12s;
}
.aim-calc--cc .cc-reset:hover{border-color:var(--cc-border-hi);color:var(--c-ink)}
.aim-calc--cc .cc-btn:focus-visible,
.aim-calc--cc .cc-reset:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}

/* --- errores -------------------------------------------------------------- */
.cc-errors{
  margin:20px 0 0;border:1.5px solid #F0C9C4;background:var(--c-red-bg);
  border-radius:12px;padding:14px 18px;color:#7F1D1D;font-size:14px;line-height:1.5;
}
.cc-errors b{display:block;margin-bottom:6px}
.cc-errors ul{margin:0;padding-left:20px}

/* --- resultado ------------------------------------------------------------ */
.cc-res{margin-top:26px;border-top:1px solid var(--c-line);padding-top:24px}
.cc-res__t{
  margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);
}
.cc-res__big{
  margin:0 0 16px;font-size:17px;font-weight:600;color:var(--c-body);line-height:1.4;
}
.cc-res__big b{
  display:block;margin-top:4px;
  font-family:Manrope,Inter,sans-serif;font-size:38px;font-weight:800;
  letter-spacing:-1.2px;line-height:1.05;color:var(--c-ink);
  font-variant-numeric:tabular-nums;
}
.cc-res__p{margin:0 0 12px;font-size:14.5px;color:var(--c-muted);line-height:1.6}

/* --- gráfico -------------------------------------------------------------- */
.cc-figure{margin:20px 0 18px;padding:0}
.cc-figure__t{
  margin:0 0 6px;text-align:center;font-size:15px;font-weight:700;color:var(--c-ink);
}
.cc-chart{display:block;width:100%;height:auto;overflow:visible}
.cc-chart path{vector-effect:non-scaling-stroke;fill:none}
.cc-area{fill:rgba(4,107,210,.10);stroke:none}
.cc-line{stroke:var(--c-blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cc-contrib{stroke:#94A3B8;stroke-width:2;stroke-dasharray:5 4}
.cc-up{stroke:var(--cc-up);stroke-width:2}
.cc-down{stroke:var(--cc-down);stroke-width:2}
.cc-grid{stroke:var(--c-line);stroke-width:1}
.cc-axis{stroke:var(--cc-border);stroke-width:1}
.cc-ax{fill:var(--c-muted);font-size:12px;text-anchor:middle;font-family:Inter,sans-serif}
/* Las marcas de los extremos se anclan hacia dentro o se salen del lienzo. */
.cc-ax--ini{text-anchor:start}
.cc-ax--fin{text-anchor:end}
.cc-ylab{fill:var(--c-muted);font-size:12px;text-anchor:end;font-family:Inter,sans-serif}

.cc-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--c-muted);
}
.cc-k{display:inline-flex;align-items:center;gap:7px}
.cc-k::before{content:"";width:16px;height:3px;border-radius:2px;background:currentColor;flex:0 0 16px}
.cc-k--fv{color:var(--c-blue)}
.cc-k--co{color:#94A3B8}
.cc-k--up{color:var(--cc-up)}
.cc-k--down{color:var(--cc-down)}

.aim-calc__row b.pos{color:var(--c-green)}

/* --- tabla por año --------------------------------------------------------
   Plegada por defecto: con 30 años son 30 filas y empujarían el resultado
   fuera de la pantalla en un teléfono. */
.cc-details{margin-top:16px;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.cc-details > summary{
  cursor:pointer;padding:13px 16px;font-size:14px;font-weight:650;color:var(--c-ink);
  background:var(--c-soft);list-style:none;
}
.cc-details > summary::-webkit-details-marker{display:none}
.cc-details > summary::after{content:"+";float:right;font-weight:700;color:var(--c-muted)}
.cc-details[open] > summary::after{content:"–"}
.cc-details > summary:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px}

/* La tabla desborda EN SU CAJA, nunca en la página. */
.cc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cc-table th,.cc-table td{
  padding:9px 14px;text-align:right;white-space:nowrap;
  border-top:1px solid var(--c-line);font-variant-numeric:tabular-nums;
}
.cc-table thead th{
  text-align:right;font-size:12px;font-weight:650;color:var(--c-muted);
  border-top:0;background:#fff;position:sticky;top:0;
}
.cc-table thead th:first-child,.cc-table tbody td:first-child{text-align:left}
.cc-table tbody th{font-weight:700;color:var(--c-ink)}
.cc-table tbody tr:nth-child(even) td,.cc-table tbody tr:nth-child(even) th{background:#FAFBFD}

/* Divergencia entre el modelo de la SEC y el depósito mensual real. Tono
   neutro y no de alerta: no es un error, es un supuesto distinto. */
.cc-note{
  margin-top:16px;border:1px solid var(--c-line);background:var(--c-soft);
  border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--c-body);
}
.cc-note b{color:var(--c-ink)}

@media (max-width:520px){
  .cc-steps{gap:22px}
  .cc-res__big b{font-size:31px}
  .cc-table th,.cc-table td{padding:8px 10px;font-size:12.5px}
  .aim-calc--cc .cc-ctl__in{font-size:17px}
  .cc-actions{gap:10px}
  .aim-calc--cc .cc-btn,.aim-calc--cc .cc-reset{flex:1 1 auto;padding:14px 16px}
}

/* ---------------------------------------------------------------------------
   La herramienta manda en la página, el texto viene después.

   La plantilla de lectura limita el contenido a `68ch`, una medida pensada
   para que una línea de texto ronde los 68 caracteres. Es lo correcto para
   leer y lo peor posible para una herramienta: dejaba la calculadora en 578 px
   de un carril de 1080, con la tabla de cuatro columnas y el gráfico
   apretados en poco más de media página.

   Aquí el texto conserva su medida y la calculadora se sale de ella. No se
   ensancha el carril entero: una columna de prosa a 880 px sería ilegible.
   --------------------------------------------------------------------------- */
/* La calculadora comparte EXACTAMENTE el ancho del texto.

   Se probó sacarla del carril hasta 880 px para que respirasen el gráfico y la
   tabla. No compensa: el carril real son 722 px (68ch con el `0` de Inter, que
   mide 0,625 em, a cuerpo de 17 px), así que la ganancia era del 22% a cambio
   de que la herramienta arrancase en una sangría distinta a la de los títulos
   y los párrafos. Una página donde cada bloque empieza en un sitio se lee como
   un montaje, y eso pesa más que un 22% de ancho.

   Lo que sí devuelve espacio a la herramienta es no pintar el índice lateral
   en las páginas de herramienta (ver template-tool.php). */

/* Banda suave detrás de la herramienta: marca dónde acaba la calculadora y
   empieza el artículo, que sin ella se leían como una sola cosa. Se pinta con
   un borde ancho en vez de un fondo de lado a lado para no pelearse con el
   ancho del carril. */
.aim-calc--cc{
  background:#F7F9FC;
  border-color:#DDE4EE;
}
.aim-calc--cc .cc-ctl{background:#fff}

/* La descarga, pegada al resultado. Quien viene a calcular obtiene su número
   y se va: la tarjeta del final del artículo no la ve nunca. */
.cc-cta{margin-top:22px;padding-top:22px;border-top:1px solid var(--c-line)}
.cc-cta .aim-cta{margin:0}