/**
 * Simulador de crédito y ahorro — NOVA
 *
 * Casi todo es RESPALDO (las clases de la maqueta) y va dentro de la capa
 * @layer fsim-respaldo: cualquier regla del sitio sin capa le gana, se imprima antes o
 * después. Importa con el código corto, que encola esta hoja en el pie, detrás del CSS
 * del Personalizador. Las pestañas, el plazo fijo, el aviso oculto y los encabezados de
 * fila de la tabla de tasas NO son respaldo (la maqueta no los tenía) y van fuera de la
 * capa. La hoja se encola donde hay un simulador o una tabla de tasas.
 *
 * El sitio de Fondecom ya viste estas clases desde su propia hoja (Personalizador),
 * que se imprime DESPUÉS de esta. Aquí va lo mismo, con la misma especificidad
 * (una sola clase, gracias a :where) y con valores por defecto en cada variable,
 * para que el simulador se vea bien también en un sitio sin esa hoja.
 * Si el sitio define algo, el sitio manda. Sin !important.
 */

@layer fsim-respaldo {

  .fsim{
    background:var(--azul-d,#0D3974);color:#fff;position:relative;overflow:hidden;
    padding-block:var(--y,clamp(56px,8vw,104px));
  }
  .fsim::before{
    content:"";position:absolute;top:-140px;right:-120px;width:440px;height:440px;
    border-radius:50%;background:rgba(24,92,181,.5);filter:blur(10px);pointer-events:none;
  }
  :where(.fsim) .sim__g{
    position:relative;display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(28px,5vw,60px);align-items:center;
    width:min(100% - var(--gut,20px)*2,var(--w,1380px));margin-inline:auto;
  }
  :where(.fsim) h2{color:#fff;font-size:clamp(28px,3.8vw,46px);margin:12px 0 0;line-height:1.1}
  :where(.fsim) .lbl{color:var(--nar,#F59408);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  :where(.fsim) .sim__p{color:rgba(255,255,255,.84);margin:14px 0 0;max-width:42ch}
  :where(.fsim) .sim__note{margin:18px 0 0;font-size:13px;color:rgba(255,255,255,.6);
    border-left:3px solid var(--nar,#F59408);padding-left:12px;max-width:40ch}

  :where(.fsim) .sim__box{background:#fff;border-radius:20px;padding:clamp(22px,3vw,32px);
    box-shadow:var(--s3,0 30px 70px rgba(13,57,116,.22));color:var(--txt,#4A4A4A)}
  :where(.fsim) .sim__f{margin-bottom:20px}
  :where(.fsim) .sim__f label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-size:13.5px;font-weight:800;color:var(--ink,#111);margin-bottom:9px;text-transform:uppercase;letter-spacing:.06em}
  :where(.fsim) .sim__f label b{font-size:17px;color:var(--azul,#185CB5);letter-spacing:0;text-transform:none}

  :where(.fsim) .sim__sel{width:100%;min-height:var(--tap,48px);border:2px solid var(--ln,#D6DEE8);border-radius:11px;
    padding:0 14px;font-size:15.5px;font-weight:600;color:var(--ink,#111);background:#fff;cursor:pointer;transition:border-color .18s}
  :where(.fsim) .sim__sel:hover{border-color:var(--azul,#185CB5)}
  :where(.fsim) .sim__sel:focus-visible,
  :where(.fsim) .sim__r:focus-visible{outline:3px solid var(--azul,#185CB5);outline-offset:3px}

  :where(.fsim) .sim__r{width:100%;-webkit-appearance:none;appearance:none;height:30px;background:transparent;cursor:pointer;margin:0;padding:0}
  :where(.fsim) .sim__r::-webkit-slider-runnable-track{height:6px;border-radius:100px;background:var(--sup2,#E9EFF7)}
  :where(.fsim) .sim__r::-moz-range-track{height:6px;border-radius:100px;background:var(--sup2,#E9EFF7)}
  :where(.fsim) .sim__r::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
    background:var(--azul,#185CB5);border:4px solid #fff;box-shadow:0 2px 8px rgba(13,57,116,.35);cursor:grab;margin-top:-10px}
  :where(.fsim) .sim__r::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--azul,#185CB5);
    border:4px solid #fff;box-shadow:0 2px 8px rgba(13,57,116,.35);cursor:grab}
  :where(.fsim) .sim__lim{display:flex;justify-content:space-between;font-size:12px;color:var(--txt,#4A4A4A);margin-top:6px}

  :where(.fsim) .sim__out{background:var(--azul-l,#E8F0FB);border-radius:14px;padding:20px;margin-top:22px}
  :where(.fsim) .sim__viz{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;
    padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid rgba(24,92,181,.22)}
  :where(.fsim) .dona{width:104px;height:104px;transform:rotate(-90deg)}
  :where(.fsim) .dona__b{fill:none;stroke:rgba(24,92,181,.18);stroke-width:13}
  :where(.fsim) .dona__k{fill:none;stroke:var(--nar,#F59408);stroke-width:13;stroke-linecap:round;
    transition:stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1)}
  :where(.fsim) .dona__t,
  :where(.fsim) .dona__s{transform:rotate(90deg);transform-origin:60px 60px;text-anchor:middle;font-family:Raleway,system-ui,sans-serif}
  :where(.fsim) .dona__t{font-size:21px;font-weight:800;fill:var(--ink,#111)}
  :where(.fsim) .dona__s{font-size:9.5px;font-weight:700;fill:var(--txt,#4A4A4A);letter-spacing:.06em;text-transform:uppercase}
  :where(.fsim) .sim__leg{list-style:none;padding:0;margin:0;display:grid;gap:9px}
  :where(.fsim) .sim__leg li{display:grid;grid-template-columns:11px 1fr auto;gap:9px;align-items:center;font-size:13.5px}
  :where(.fsim) .sim__leg i{width:11px;height:11px;border-radius:3px;outline:1px solid rgba(17,17,17,.18)}
  :where(.fsim) .sim__leg b{font-weight:800;color:var(--ink,#111);font-size:14.5px}

  :where(.fsim) .sim__cuota{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:14px;border-bottom:1px solid rgba(24,92,181,.22)}
  :where(.fsim) .sim__cuota span{font-size:13.5px;font-weight:800;color:var(--azul,#185CB5);text-transform:uppercase;letter-spacing:.07em}
  :where(.fsim) .sim__cuota b{font-size:clamp(26px,3.4vw,38px);color:var(--ink,#111);font-weight:800;letter-spacing:-.03em}
  :where(.fsim) .sim__row{display:flex;justify-content:space-between;font-size:14px;padding-top:10px}
  :where(.fsim) .sim__row b{color:var(--ink,#111);font-weight:700}
  :where(.fsim) .num{font-variant-numeric:tabular-nums}

  /* El botón: en el sitio lo viste .b.b--v; aquí solo lo imprescindible para que se lea */
  :where(.fsim) .sim__box .b{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;
    min-height:var(--tap,48px);border-radius:100px;background:var(--verde,#32B12E);color:#111;font-weight:800;text-decoration:none}
  :where(.fsim) .sim__box .b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}

  @media (max-width:1080px){
    :where(.fsim) .sim__g{grid-template-columns:1fr}
  }
  /* Teléfono: junto al gráfico no caben «Intereses» y la cifra en una misma fila */
  @media (max-width:680px){
    :where(.fsim) .sim__viz{grid-template-columns:1fr;justify-items:center;gap:14px}
    :where(.fsim) .sim__leg{width:100%}
  }

  @media (prefers-reduced-motion:reduce){
    :where(.fsim) .dona__k{transition:none}
  }

}

/* ── Pestañas Crédito / Ahorro ─────────────────────────────────────────────
   Esto NO es respaldo: la maqueta no tenía pestañas y la hoja del sitio no las
   conoce. Son dos botones de opción (ocultos a la vista, no al teclado ni a los
   lectores de pantalla) y sus etiquetas; el panel que no toca se esconde con
   :checked, sin JavaScript y sin que la página se mueva al cargar. */
.sim__mr{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sim__modo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:0 0 22px;
  background:var(--azul-l,#E8F0FB);border-radius:100px}
.sim__ml{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;
  border-radius:100px;font-size:14.5px;font-weight:800;letter-spacing:.01em;color:var(--azul-d,#0D3974);
  cursor:pointer;user-select:none;transition:background-color .18s,color .18s,box-shadow .18s}
.sim__ml:hover{background:rgba(24,92,181,.12)}
/* la pestaña elegida: blanco sobre azul da 6,2 de contraste */
.sim__mr--cred:checked~.sim__modo .sim__ml--cred,
.sim__mr--aho:checked~.sim__modo .sim__ml--aho{background:var(--azul,#185CB5);color:#fff;
  box-shadow:0 4px 12px rgba(13,57,116,.25)}
/* el foco del teclado está en el botón de opción, que no se ve: se dibuja en su etiqueta */
.sim__mr--cred:focus-visible~.sim__modo .sim__ml--cred,
.sim__mr--aho:focus-visible~.sim__modo .sim__ml--aho{outline:3px solid var(--azul-d,#0D3974);outline-offset:2px}
.sim__mr--cred:checked~.sim__pan--aho,
.sim__mr--aho:checked~.sim__pan--cred{display:none}

/* Plazo fijo (un CDAT a 360 días): queda el dato, sin deslizador ni topes */
.sim__f--fijo .sim__r,
.sim__f--fijo .sim__lim{display:none}
/* (0,2,1): tiene que ganar a «.sim__f label{margin-bottom:9px}» del sitio, que es (0,1,1) */
.sim__f.sim__f--fijo label{margin-bottom:0}

/* Capital al vencimiento (Crédito Especial, 1.3.1). Tampoco es respaldo: la maqueta no lo
   tenía. Clase propia y no .sim__row: la regla del sitio le daría display:flex y el
   atributo hidden dejaría de esconderlo en las líneas de cuota fija. */
.sim__venc{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14px;padding-top:10px;color:var(--txt,#4A4A4A)}
.sim__venc b{color:var(--ink,#111);font-weight:700;white-space:nowrap}
.sim__venc[hidden]{display:none}

/* ── Tabla de tasas: encabezados de fila (1.3.5) ────────────────────────────
   Tampoco es respaldo. La clasificación, la línea de crédito y el producto de ahorro van
   en <th scope="row"> (pauta 1.3.1: el lector de pantalla dice de qué línea es cada tasa).
   La hoja del sitio viste todo th de .ts como cabecera (versalitas azules de 11,5 px sobre
   gris): aquí el th del cuerpo vuelve a ser la celda que era, heredando como un td, y su
   <b> se viste como «.ts td b». (0,1,2) gana a «.ts th» (0,1,1) y al «table th» del tema
   aunque esta hoja se imprima antes. Las rayas del tema en las filas impares pesan más y
   las lleva igual que un td. */
.ts tbody th{font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;
  color:inherit;background:none}
.ts tbody th b{color:var(--ink,#111);font-weight:800}
/* La línea se ilumina al pasar por su fila, como la celda de siempre. */
.ts tbody tr:hover th{background:var(--sup,#F4F7FB)}
/* La clasificación abarca todo su grupo (hasta 30 filas, 1.850 px): no toma la raya ni el
   iluminado de la fila donde empieza, que la teñirían entera. Sin fondo siempre: (0,3,2)
   gana a la raya y al iluminado del tema (0,1,4) y al «tr:hover td» del sitio (0,2,3). */
.ts tbody .ts__cl,
.ts tbody tr:hover .ts__cl{background:none}
/* tbody: la fila de la cabecera también es «tr:last-child» (de su thead) y conserva su raya */
.ts tbody tr:last-child th{border-bottom:0}
/* La clasificación del último grupo baja hasta el final de la tabla: sin raya, como la
   última fila (evita una raya doble sobre el borde de la tabla). */
.ts .ts__cl--fin{border-bottom:0}

/* Aviso para lectores de pantalla: oculto a la vista, no a la tecnología de apoyo */
.sim__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .sim__ml{transition:none}
}