/* ==========================================================================
   JUDESUR — CONSULTA DE SALDOS · maqueta navegable
   Adaptada del diseño "Consulta de saldos.pdf".

   Paleta, tipografía y geometría tomadas directamente del archivo de diseño:
   los colores salen de los vectores del PDF y las posiciones de los círculos
   decorativos de sus coordenadas reales, no de una aproximación visual.

   ── NOTA DE ACCESIBILIDAD ─────────────────────────────────────────────────
   Esta hoja reproduce el diseño TAL CUAL. Al medirlo, diez pares de color
   no alcanzan el mínimo WCAG 2.1 AA que le corresponde a un sitio .go.cr:

     blanco sobre el verde #95C11F   2.12:1   texto de todos los botones
     verde #95C11F sobre blanco      2.12:1   antetítulo "CONSULTA DE SALDO"
     celeste #00ABDA sobre blanco    2.68:1   etiquetas de los campos
     naranja #F39200 sobre blanco    2.35:1   la cifra del saldo
     gris #85959A sobre blanco       3.11:1   placeholders, notas y filas
     borde #AFC4CA sobre blanco      1.81:1   contorno de los campos (min 3:1)
     línea #92BCC8 sobre blanco      2.05:1   separadores del resultado (min 3:1)

   Son decisiones de diseño, no errores de código, así que la maqueta las
   respeta. La corrección mínima está al final del archivo en el bloque
   .jcs-accesible: cambia seis valores, no mueve ni un píxel de la
   composición, y todos los pares quedan sobre el mínimo. El panel de
   escenarios trae un interruptor "Contraste AA" para comparar en vivo.
   ========================================================================== */

.jcs-saldos-widget {
  /* Marca, extraída de los vectores del diseño */
  --azul:       #004F91;
  --azul-hondo: #002F56;
  --azul-base:  #004E8F;
  --celeste:    #00ABDA;
  --verde:      #95C11F;
  --verde-osc:  #86AE1B;
  --naranja:    #F39200;
  --tinta:      #00222C;
  --gris:       #85959A;
  --gris-linea: #92BCC8;
  --borde:      #AFC4CA;
  --fondo:      #EBF8FC;
  --rosa:       #FDD9D9;
  --blanco:     #FFFFFF;

  --ancho:      100%; /* acordado el 2026-10-21: .jcs-contenedor sin tope propio — las tarjetas ya lo llenan (--card: none) */
  --card:       1000px; /* acordado el 2026-10-21: login/verificación/error vuelven a un ancho de lectura cómodo; .jcs-ecpagina (estado de cuenta / detalle de referencia) se excluye explícitamente para ocupar el 100% */
  --radio:      20px;
  --radio-campo: 8px;
  --sombra:     0 18px 44px rgba(0, 49, 88, .10), 0 4px 12px rgba(0, 49, 88, .05);
  --trans:      180ms cubic-bezier(.4, 0, .2, 1);
  --toque:      44px;

  --fuente: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.jcs-saldos-widget, .jcs-saldos-widget *, .jcs-saldos-widget *::before, .jcs-saldos-widget *::after { box-sizing: border-box; }

.jcs-saldos-widget {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;

  /* Full-bleed: pedido "la plataforma debe ser full width". Los temas de
     bloques de WordPress (FSE) limitan el ancho del contenido a su
     --wp--style--global--content-size (normalmente ~650px) y lo hacen con
     margin-left/right: auto !important — por eso el !important aquí
     también: es la única forma de que el shortcode rompa ese límite sin
     depender de que el tema lo marque como "alineado a ancho completo".
     OJO: no se fija también un width:100vw — eso sobre-especifica la caja
     (ancho fijo + márgenes negativos a la vez) y el navegador no los
     concilia, empujando el elemento más allá del viewport real (se
     verificó: producía scroll horizontal). Dejar el ancho en "auto" para
     que lo resuelvan los márgenes es lo que realmente centra la caja
     exactamente en el viewport sin desbordar. */
  max-width: 100vw !important;
  /* Base CSS del full-bleed: rompe el max-width del contenedor "constrained"
     del tema. El padding global propio del tema (clase "has-global-padding")
     varía de tema a tema — algunos lo exponen como variable CSS, este en
     particular lo trae fijo (50px) sin variable. Como no se puede adivinar
     ese valor de forma confiable solo con CSS, el ajuste fino final lo hace
     JS en tiempo de carga (ver aplicarFullBleed() en consulta-de-saldos.js),
     midiendo el padding real del contenedor en vez de suponerlo. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* :where() no suma especificidad: el reset queda en 0,1,0 (solo por la clase
   raíz). Así sigue normalizando lo que trae el tema, pero cualquier regla de
   componente de más abajo puede darle margen a un <p> sin pelear. */
.jcs-saldos-widget :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure) { margin: 0; padding: 0; }
.jcs-saldos-widget :where(ul, ol) { list-style: none; }
.jcs-saldos-widget :where(button, input) { font: inherit; color: inherit; }
.jcs-saldos-widget :where(img, svg) { max-width: 100%; }
.jcs-saldos-widget :where(a) { color: inherit; }

.jcs-saldos-widget [hidden] { display: none !important; }

.jcs-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.jcs-contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

/* El foco programático entre pasos no debe dibujar anillo */
.jcs-saldos-widget [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
.jcs-saldos-widget :focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   1. Cabecera y navegación
   ========================================================================== */
.jcs-cabecera { background: var(--blanco); }
.jcs-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 87px;
}
.jcs-logo { display: block; height: 52px; width: auto; }

.jcs-cabecera__acciones { display: flex; align-items: center; gap: 20px; }
.jcs-buscar {
  display: grid; place-items: center;
  width: var(--toque); height: var(--toque);
  background: none; border: 0; border-radius: 50%;
  color: var(--azul); cursor: pointer;
}
.jcs-buscar:hover { background: var(--fondo); }
.jcs-buscar svg { width: 22px; height: 22px; }

/* Ícono de ayuda (manual de uso en PDF) — mismo tamaño de "toque" que
   .jcs-buscar, para que la fila de acciones quede pareja. */
.jcs-boton-ayuda {
  display: grid; place-items: center;
  width: var(--toque); height: var(--toque);
  border-radius: 50%;
  background: var(--fondo);
  color: var(--azul);
  font-size: 17px; font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--borde);
  cursor: pointer;
  position: relative;
}
.jcs-boton-ayuda:hover { background: var(--azul); color: var(--blanco); }

/* Tooltip ("Ver manual de uso"), vía el atributo data-tooltip — se
   muestra arriba del ícono al pasar el mouse o al enfocarlo con teclado. */
.jcs-boton-ayuda::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 7px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--trans), transform var(--trans);
}
.jcs-boton-ayuda:hover::before,
.jcs-boton-ayuda:focus-visible::before { opacity: 1; transform: translateY(0); }

/* Primera visita (ver localStorage en consulta-de-saldos.js): un anillo
   pulsante alrededor del ícono hasta el primer clic. */
.jcs-boton-ayuda--destacado::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  animation: jcs-anillo 1.6s ease-out infinite;
}
@keyframes jcs-anillo {
  0%   { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.jcs-pastilla {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque);
  padding: 0 28px;
  background: var(--verde);
  color: var(--blanco);
  font-size: 14px; font-weight: 500;
  border: 0; border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--trans);
}
.jcs-pastilla:hover { background: var(--verde-osc); }

.jcs-nav { background: var(--azul); }
.jcs-nav ul {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 28px;
  min-height: 38px;
}
.jcs-nav a {
  color: var(--blanco);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
}
.jcs-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.jcs-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--azul-hondo) 0%, var(--azul-base) 100%);
  color: var(--blanco);
  text-align: center;
}
.jcs-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  min-height: 304px;
  padding-block: 48px;
}
.jcs-hero__titulo {
  font-size: clamp(32px, 5.6vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.jcs-hero__bajada {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 400;
  max-width: 640px;
}
.jcs-hero .jcs-pastilla { margin-top: 10px; }

/* Círculos decorativos: posiciones y tamaños reales del diseño */
.jcs-globo { position: absolute; border-radius: 50%; aspect-ratio: 1; pointer-events: none; }
.jcs-globo--naranja { background: var(--naranja);  left: -7.22%;  top: -46.7%;  width: 18.89%; }
.jcs-globo--celeste { background: #00ABDA;         left: 89.24%;  top:  42.76%; width: 18.61%; }
.jcs-globo--rosa    { background: var(--rosa);     left: -1.60%;  top:  81.58%; width: 11.39%; }
.jcs-globo--verde   { background: #95C11F;         left:  2.71%;  top:  63.16%; width: 16.53%; }

/* ==========================================================================
   3. Zona de contenido y tarjetas
   ========================================================================== */
.jcs-contenido { padding-block: 34px 64px; }

.jcs-volver {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--gris);
  font-size: 12px; font-weight: 500;
  text-decoration: none;
}
.jcs-volver:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

.jcs-card {
  width: 100%;
  max-width: var(--card);
  margin-inline: auto;
  padding: 48px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: jcs-aparece 280ms cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes jcs-aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.jcs-card--centrada { text-align: center; padding-block: 64px; }

.jcs-antetitulo {
  font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.jcs-antetitulo--verde   { color: var(--verde); }
.jcs-antetitulo--celeste { color: var(--celeste); }

.jcs-card__titulo {
  margin-top: 8px;
  font-size: 22px; font-weight: 400;
  line-height: 1.3;
  color: var(--tinta);
}

/* ==========================================================================
   4. Formulario
   ========================================================================== */
.jcs-form { margin-top: 34px; }
.jcs-campo + .jcs-campo { margin-top: 22px; }

.jcs-etiqueta {
  display: block;
  margin-bottom: 8px;
  color: var(--celeste);
  font-size: 12px; font-weight: 600;
}
.jcs-input {
  display: block; width: 100%;
  height: 54px;
  padding: 0 18px;
  font-size: 16px; font-weight: 300;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-campo);
  transition: border-color var(--trans), box-shadow var(--trans);
  appearance: none;
}
.jcs-input::placeholder { color: var(--gris); opacity: 1; }
.jcs-input:hover { border-color: var(--gris); }
.jcs-input:focus-visible {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(0, 171, 218, .25);
}
.jcs-input[aria-invalid="true"] { border-color: #C0392B; }
.jcs-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(192, 57, 43, .22); }

.jcs-error {
  margin-top: 6px;
  color: #B3231F;
  font-size: 12px; font-weight: 500;
  line-height: 1.45;
}
.jcs-aviso-campo {
  margin-top: 26px;
  color: var(--gris);
  font-size: 12px; font-weight: 400;
}

.jcs-boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  font-size: 16px; font-weight: 600;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.jcs-boton--solido { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.jcs-boton--solido:hover:not(:disabled) { background: var(--verde-osc); border-color: var(--verde-osc); }
.jcs-boton--linea  { background: transparent; border-color: var(--verde); color: var(--verde); }
.jcs-boton--linea:hover:not(:disabled) { background: var(--verde); color: var(--blanco); }
.jcs-boton--ancho  { display: flex; width: 100%; }
.jcs-boton:disabled { cursor: not-allowed; opacity: .7; }

.jcs-form .jcs-boton { margin-top: 18px; }

/* Estado cargando dentro del botón */
.jcs-boton[data-cargando="true"] .jcs-boton__texto { visibility: hidden; }
.jcs-boton[data-cargando="true"]::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: var(--blanco);
  border-radius: 50%;
  animation: jcs-gira 700ms linear infinite;
}
.jcs-boton--linea[data-cargando="true"]::after {
  border-color: rgba(149, 193, 31, .35);
  border-top-color: var(--verde);
}
@keyframes jcs-gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   5. Tarjetas de estado: cargando y error
   ========================================================================== */
.jcs-rueda {
  width: 78px; height: 78px;
  margin: 0 auto 30px;
  border: 7px solid #DDEFF4;
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: jcs-gira 900ms linear infinite;
}
.jcs-marca {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  margin: 0 auto 26px;
  background: var(--borde);
  border-radius: 50%;
  color: var(--blanco);
  font-size: 40px; font-weight: 700; line-height: 1;
}
.jcs-estado__titulo {
  font-size: 24px; font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}
.jcs-estado__texto {
  margin-top: 6px;
  font-size: 18px; font-weight: 300;
  color: var(--gris);
}
.jcs-estado .jcs-boton { margin-top: 28px; }

/* ==========================================================================
   6. Tarjeta de resultado
   ========================================================================== */
.jcs-datos { margin-top: 34px; }
.jcs-fila {
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  padding-block: 24px;
}
.jcs-fila + .jcs-fila { border-top: 1px solid var(--gris-linea); }
.jcs-fila__etiqueta {
  font-size: 24px; font-weight: 300;
  color: var(--gris);
}
.jcs-fila__valor {
  font-size: 20px; font-weight: 600;
  color: var(--gris);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.jcs-fila__valor--saldo {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--naranja);
  letter-spacing: -.01em;
}
.jcs-nota {
  margin-top: 34px;
  font-size: 12px; font-weight: 500;
  color: var(--gris);
  text-align: end;
}
.jcs-resultado .jcs-boton { margin-top: 30px; }

/* Un beneficiario puede tener varias operaciones activas a la vez (caso
   real confirmado: un cliente con 21 operaciones), así que el resultado
   es una lista, no una sola tarjeta.

   El contenedor del resultado NO es una card (a propósito: el look de
   "card" lo llevan las operaciones individuales, no el contenedor que las
   agrupa) — por eso ya no lleva la clase .jcs-card en el HTML, y esta
   regla solo le da la entrada suave que sí tenían el resto de los pasos. */
.jcs-resultado {
  width: 100%;
  padding-block: 20px;
  animation: jcs-aparece 280ms cubic-bezier(.2, .8, .3, 1) both;
}
.jcs-resultado__resumen {
  margin-top: 6px;
  font-size: 14px; font-weight: 400;
  color: var(--gris);
}
.jcs-lista-operaciones {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Cada operación es una card con solo su identificador y un botón — el
   saldo y el próximo pago se consultan bajo demanda en el modal, no se
   muestran los de las 21 operaciones de una vez en la misma pantalla.
   Con radio y sombra, como el resto de tarjetas de la plataforma. */
.jcs-operacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: var(--sombra);
}
.jcs-operacion__titulo {
  font-size: 15px; font-weight: 600;
  color: var(--tinta);
}
.jcs-operacion__titulo span {
  display: block;
  margin-top: 2px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--celeste);
}
.jcs-operacion .jcs-boton {
  min-height: 40px;
  padding: 0 20px;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Estado de una operación: saldo, próximo pago y avisos de envío ──────
   Estas clases nacieron dentro del modal flotante; desde el rediseño de
   octubre 2026 (ver sección "Rediseño de octubre 2026" más abajo) viven
   en la página completa .jcs-ecpagina, pero conservan su nombre. */
.jcs-modal__cuerpo { margin-top: 20px; }
.jcs-modal__estado {
  margin-top: 12px;
  font-size: 13px; font-weight: 500;
  text-align: center;
  color: var(--gris);
}
.jcs-modal__estado[data-tipo="ok"] { color: var(--verde-osc); }
.jcs-modal__estado[data-tipo="error"] { color: #B3231F; }

@media (max-width: 600px) {
  .jcs-operacion { flex-direction: column; align-items: stretch; text-align: center; }
  .jcs-operacion .jcs-boton { width: 100%; }
}

/* ==========================================================================
   7. Pie de página
   ========================================================================== */
.jcs-pie {
  padding-block: 26px;
  color: var(--azul);
  font-size: 16px; font-weight: 400;
}
.jcs-pie__fila {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px;
}
.jcs-pie strong { font-weight: 700; }

/* ==========================================================================
   8. Página de agradecimiento
   ========================================================================== */
.jcs-gracias {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--azul-hondo) 0%, var(--azul-base) 100%);
  color: var(--blanco);
}
.jcs-gracias__inner {
  position: relative; z-index: 2;
  padding-block: 58px 0;
  text-align: center;
}
.jcs-gracias .jcs-globo--rosa  { left: -4.72%; top: -14.08%; width: 21.11%; }
.jcs-gracias .jcs-globo--verde { left:  5.83%; top:  10.17%; width:  6.11%; }

.jcs-logo-blanco { display: block; height: 56px; width: auto; margin: 0 auto 26px; }

.jcs-gracias__titulo {
  font-size: clamp(32px, 5.6vw, 64px);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

.jcs-tarjeta-correo {
  width: 100%; max-width: 600px;
  margin: 46px auto 0;
  padding: 34px 40px;
  background: var(--blanco);
  border-radius: var(--radio);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.jcs-tarjeta-correo__titulo { font-size: 14px; font-weight: 600; color: var(--azul-hondo); }
.jcs-tarjeta-correo__texto {
  margin-top: 14px;
  font-size: 20px; font-weight: 300;
  line-height: 1.35;
  color: var(--gris);
}
.jcs-tarjeta-correo__texto strong { color: var(--tinta); font-weight: 400; }
.jcs-tarjeta-correo .jcs-boton { margin-top: 24px; min-width: 220px; }

.jcs-ayuda { margin-top: 62px; }
.jcs-ayuda__titulo { font-size: clamp(19px, 2.2vw, 24px); font-weight: 400; }

.jcs-contactos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 18px 56px;
  margin-top: 30px;
}
.jcs-contacto {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--blanco); text-decoration: none;
  text-align: start;
}
.jcs-contacto__icono {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  background: rgba(0, 26, 48, .45);
  border-radius: 50%;
}
.jcs-contacto__icono svg { width: 20px; height: 20px; }
.jcs-contacto__rotulo { display: block; font-size: 10px; font-weight: 600; line-height: 1.4; }
.jcs-contacto__valor  { display: block; font-size: 14px; font-weight: 300; line-height: 1.4; }
.jcs-contacto:hover .jcs-contacto__valor { text-decoration: underline; text-underline-offset: 3px; }

/* Colina y tucán: geometría tomada del diseño */
.jcs-adorno {
  position: absolute; z-index: 1;
  right: 0; bottom: 0;
  width: 24.31%;
  aspect-ratio: 350 / 362;
  pointer-events: none;
}
.jcs-adorno__colina {
  position: absolute;
  left: 3.14%; top: 43.37%;
  width: 131.14%;
  aspect-ratio: 1;
  background: #95C11F;
  border-radius: 50%;
}
.jcs-adorno__tucan { position: absolute; left: 21.14%; top: 8.84%; width: 46%; }

.jcs-gracias .jcs-pie {
  position: relative; z-index: 2;
  margin-top: 66px;
  padding-top: 24px;
  color: var(--blanco);
}
.jcs-gracias .jcs-pie::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 24px;
  height: 1px;
  background: rgba(255, 255, 255, .45);
}

/* ==========================================================================
   9. Módulo de entrada del sitio institucional
   ========================================================================== */
.jcs-entrada {
  display: grid; place-items: center;
  min-height: 100vh;
  padding: 40px 24px;
  background: var(--fondo);
}
.jcs-modulo {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  width: 100%; max-width: 720px;
  padding: 26px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.jcs-modulo__foto {
  width: 100%; aspect-ratio: 300 / 340;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.jcs-modulo__titulo {
  font-size: 26px; font-weight: 600;
  line-height: 1.2;
  color: var(--naranja);
}
.jcs-modulo__texto {
  margin-top: 20px;
  font-size: 20px; font-weight: 600;
  line-height: 1.35;
  color: var(--azul-hondo);
}
.jcs-modulo .jcs-boton { margin-top: 28px; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .jcs-nav ul { gap: 18px; padding-block: 8px; }
  .jcs-nav a { font-size: 13px; }
  .jcs-modulo { grid-template-columns: 1fr; gap: 26px; max-width: 420px; }
  .jcs-modulo__foto { aspect-ratio: 16 / 10; }
  .jcs-adorno { width: 42%; }
}
@media (max-width: 640px) {
  .jcs-contenedor { padding-inline: 18px; }
  .jcs-cabecera__fila { min-height: 72px; }
  .jcs-logo { height: 40px; }
  .jcs-pastilla { padding-inline: 20px; }
  .jcs-card { padding: 28px 22px; }
  .jcs-card--centrada { padding-block: 44px; }
  .jcs-fila { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 18px; }
  .jcs-fila__etiqueta { font-size: 18px; }
  .jcs-fila__valor { text-align: start; }
  .jcs-nota { text-align: start; }
  .jcs-tarjeta-correo { padding: 26px 22px; }
  .jcs-tarjeta-correo .jcs-boton { width: 100%; }
  .jcs-contactos { flex-direction: column; align-items: flex-start; gap: 16px; text-align: start; }
  .jcs-ayuda { margin-top: 44px; }
  .jcs-pie__fila { flex-direction: column; align-items: flex-start; gap: 6px; }
  .jcs-pie { font-size: 14px; }
  .jcs-adorno { width: 54%; opacity: .85; }
  .jcs-gracias .jcs-pie { margin-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   11. Correcciones de contraste — desactivadas por defecto
   Añadir class="jcs-accesible" al <body> para aplicarlas.
   Cambia únicamente tres valores; la composición no se mueve.
   ========================================================================== */
.jcs-accesible {
  --verde:      #5E7A0F;   /* 4.9:1 con texto blanco */
  --verde-osc:  #4C6309;
  --celeste:    #007A9E;   /* 4.9:1 sobre blanco     */
  --borde:      #7E9198;   /* 3.3:1 sobre blanco     */
  --gris-linea: #7E9198;   /* 3.3:1 sobre blanco     */
}
.jcs-accesible .jcs-marca { background: #6C7F85; }
.jcs-accesible .jcs-input::placeholder { color: #616F73; }
.jcs-accesible .jcs-aviso-campo,
.jcs-accesible .jcs-estado__texto,
.jcs-accesible .jcs-fila__etiqueta,
.jcs-accesible .jcs-fila__valor,
.jcs-accesible .jcs-nota,
.jcs-accesible .jcs-volver { color: #5C6B70; }
.jcs-accesible .jcs-fila__valor--saldo { color: #A35E00; }



/* ==========================================================================
   Correcciones y añadidos — octubre 2026
   ========================================================================== */

/* --- Color del texto de los botones ---------------------------------------
   Los temas de WordPress estilizan los botones con `.wp-element-button`
   (especificidad 0,1,0), igual que `.jcs-boton--solido`. Al empatar gana el
   que se cargue después, y el tema se carga después: por eso el texto salía
   oscuro sobre el verde. Anteponer la clase raíz sube a 0,2,0 y deja de
   depender del orden de carga.
   -------------------------------------------------------------------------- */
.jcs-saldos-widget .jcs-boton--solido,
.jcs-saldos-widget .jcs-boton--solido:hover,
.jcs-saldos-widget .jcs-boton--solido:focus,
.jcs-saldos-widget .jcs-boton--solido:active,
.jcs-saldos-widget .jcs-pastilla,
.jcs-saldos-widget .jcs-pastilla:hover,
.jcs-saldos-widget .jcs-pastilla:focus,
.jcs-saldos-widget .jcs-pastilla:active,
/* Solo :hover — en :hover el fondo SÍ se vuelve verde (regla de arriba), así
   que el blanco se lee. En :focus el fondo sigue siendo transparente: poner
   el texto blanco ahí lo dejaba invisible sobre la tarjeta. El foco ya se
   señala con el anillo de `:focus-visible`, no hace falta cambiar el color. */
.jcs-saldos-widget .jcs-boton--linea:hover {
  color: var(--blanco);
}
.jcs-saldos-widget .jcs-boton--solido .jcs-boton__texto,
.jcs-saldos-widget .jcs-pastilla .jcs-boton__texto { color: inherit; }

/* Botón sin relleno, para acciones secundarias como «Enviar otro código» */
.jcs-saldos-widget .jcs-boton--enlace {
  display: block;
  width: 100%;
  margin-top: 10px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--verde);
  font-size: 14px; font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jcs-saldos-widget .jcs-boton--enlace:hover { color: var(--verde-osc); }

/* --- Código de verificación: seis casillas -------------------------------- */
.jcs-codigo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 4px;
  max-width: 420px;
}
.jcs-codigo__dig {
  width: 100%;
  height: 64px;
  padding: 0;
  text-align: center;
  font-family: var(--fuente);
  font-size: 28px; font-weight: 600;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-campo);
  transition: border-color var(--trans), box-shadow var(--trans);
  appearance: none;
}
.jcs-codigo__dig:hover { border-color: var(--gris); }
.jcs-codigo__dig:focus {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(0, 171, 218, .25);
}
.jcs-codigo__dig[aria-invalid="true"] { border-color: #C0392B; }


@media (max-width: 420px) {
  .jcs-codigo { gap: 6px; }
  .jcs-codigo__dig { height: 52px; font-size: 22px; }
}

/* --- Reveal de las tarjetas ------------------------------------------------
   Aparecen al entrar en pantalla. Lo activa el JS añadiendo `.jcs-visible`;
   si el JS no corre, quedan visibles — nunca una pantalla en blanco.
   -------------------------------------------------------------------------- */
.jcs-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(.2, .8, .3, 1),
              transform 520ms cubic-bezier(.2, .8, .3, 1);
  will-change: opacity, transform;
}
.jcs-reveal.jcs-visible { opacity: 1; transform: none; }

/* Escalonado: cada tarjeta entra un poco después que la anterior. */
.jcs-reveal.jcs-retraso-1 { transition-delay:  80ms; }
.jcs-reveal.jcs-retraso-2 { transition-delay: 160ms; }
.jcs-reveal.jcs-retraso-3 { transition-delay: 240ms; }
.jcs-reveal.jcs-retraso-4 { transition-delay: 320ms; }
.jcs-reveal.jcs-retraso-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .jcs-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Tarjeta del código: todo centrado --------------------------------- */
.jcs-saldos-widget [data-paso="codigo"] { text-align: center; }
.jcs-saldos-widget [data-paso="codigo"] .jcs-codigo { margin-inline: auto; }
/* La etiqueta es un <span> para no asociarla a una sola casilla: el grupo
   entero se nombra con aria-labelledby. Hay que forzarla a bloque para que
   el centrado la alcance. */
.jcs-saldos-widget [data-paso="codigo"] .jcs-etiqueta { display: block; }

/* --- Ancho máximo de los botones ---------------------------------------- */
.jcs-saldos-widget .jcs-boton--ancho,
.jcs-saldos-widget .jcs-boton--enlace {
  max-width: 300px;
  margin-inline: auto;
}

/* ==========================================================================
   Ajustes de octubre — espaciado, logo y modal
   ========================================================================== */

/* --- Aire entre elementos ------------------------------------------------
   Estos márgenes existían desde el principio; no se veían porque el reset
   los anulaba (ver la nota de :where() más arriba). Ahora que aplican, se
   afinan los valores.
   -------------------------------------------------------------------------- */
.jcs-saldos-widget .jcs-campo + .jcs-campo { margin-top: 26px; }
.jcs-saldos-widget .jcs-error { margin-top: 10px; }
.jcs-saldos-widget .jcs-aviso-campo { margin-top: 18px; }
.jcs-saldos-widget .jcs-form .jcs-boton { margin-top: 28px; }
.jcs-saldos-widget .jcs-card__bajada { margin-top: 10px; }

/* La lista de operaciones y su nota de cierre.
   Ojo: la lista ya es una grilla multicolumna (auto-fill, minmax 260px) más
   arriba; aquí solo se agranda la separación, sin redeclarar las columnas. */
.jcs-saldos-widget .jcs-lista-operaciones { gap: 20px; }
.jcs-saldos-widget .jcs-operacion { padding: 22px 24px; }
.jcs-saldos-widget .jcs-nota { margin-top: 18px; }
.jcs-saldos-widget #jcs-resultado-resumen { margin-bottom: 18px; }

/* --- Logo: no debe deformarse -------------------------------------------
   El <a> del logo es un ítem flex y, en pantallas angostas, se encogía por
   debajo del ancho natural de la imagen mientras la altura seguía fija en
   40px: el PNG de 900x157 terminaba pintado a 146x40. `flex: 0 0 auto` evita
   el encogimiento y `object-fit: contain` garantiza que, aun si algo lo
   limitara, la imagen nunca se estire.
   -------------------------------------------------------------------------- */
.jcs-saldos-widget .jcs-cabecera__fila > a:first-child { flex: 0 0 auto; line-height: 0; }
.jcs-saldos-widget .jcs-logo,
.jcs-saldos-widget .jcs-logo-blanco {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.jcs-saldos-widget .jcs-cabecera__acciones { flex: 0 1 auto; min-width: 0; }

@media (max-width: 560px) {
  .jcs-saldos-widget .jcs-cabecera__fila { gap: 12px; }
  .jcs-saldos-widget .jcs-logo { height: 34px; }
  .jcs-saldos-widget .jcs-pastilla { padding-inline: 16px; font-size: 13px; }
}
@media (max-width: 400px) {
  .jcs-saldos-widget .jcs-logo { height: 30px; }
}

.jcs-saldos-widget .jcs-modal__cuerpo { margin-top: 16px; }

/* El anillo de foco del botón de contorno, bien separado del borde verde. */
.jcs-saldos-widget .jcs-boton--linea:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
}

/* Hero una vez verificada la identidad */
.jcs-saldos-widget .jcs-hero__titulo { text-wrap: balance; }

/* ==========================================================================
   Modal de detalle de operación — rediseño de octubre
   ========================================================================== */
.jcs-saldos-widget .jcs-modal__cuerpo { margin-top: 24px; }

.jcs-saldos-widget .jcs-modal__rotulo {
  font-size: 20px;
  font-weight: 300;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-modal__saldo {
  margin-top: 4px;
  font-size: clamp(30px, 7vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.jcs-saldos-widget .jcs-modal__linea {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--borde-sutil, #E4EDF1);
}

/* Panel del próximo pago */
.jcs-saldos-widget .jcs-pago {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #EFF4F7;
  border-radius: 14px;
}
.jcs-saldos-widget .jcs-pago__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--blanco);
  border-radius: 12px;
  color: var(--celeste);
}
.jcs-saldos-widget .jcs-pago__icono svg { width: 26px; height: 26px; }

.jcs-saldos-widget .jcs-pago__dato {
  flex: 1 1 0;
  min-width: 0;   /* sin esto, un monto largo ensancha la columna y rompe el panel */
}
.jcs-saldos-widget .jcs-pago__dato--monto {
  /* Un poco más ancha que la columna de la fecha: su rótulo es más largo
     («Monto del próximo pago») y con el reparto a partes iguales partía en
     dos líneas. Medido: necesita ~150px y con 1fr le tocaban 140. */
  flex: 1.15 1 0;
  padding-left: 16px;
  border-left: 1px solid var(--borde);
}
.jcs-saldos-widget .jcs-pago__rotulo {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-pago__valor {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.jcs-saldos-widget .jcs-pago__pie {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--gris);
}

/* El naranja de marca no alcanza contraste; en modo accesible se oscurece,
   igual que ya se hacía con la cifra de la tarjeta de resultados. */
.jcs-accesible .jcs-modal__saldo { color: #A35E00; }

@media (max-width: 420px) {
  .jcs-saldos-widget .jcs-pago { flex-wrap: wrap; gap: 12px; }
  .jcs-saldos-widget .jcs-pago__dato--monto {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--borde);
  }
}

/* ==========================================================================
   Vista de lista — tabla y tarjetas (octubre 2026)
   ========================================================================== */

.jcs-saldos-widget .jcs-resultado__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* --- Conmutador de vista ------------------------------------------------ */
.jcs-saldos-widget .jcs-vistas {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.jcs-saldos-widget .jcs-vistas__btn {
  display: grid;
  place-items: center;
  width: 40px; height: 36px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--gris);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.jcs-saldos-widget .jcs-vistas__btn svg { width: 19px; height: 19px; }
.jcs-saldos-widget .jcs-vistas__btn:hover { color: var(--azul); }
/* aria-pressed y no una clase: el estado tiene que llegarle también a quien
   usa lector de pantalla, no solo a quien lo ve. */
.jcs-saldos-widget .jcs-vistas__btn[aria-pressed="true"] {
  background: var(--azul);
  color: var(--blanco);
}

/* --- Tabla --------------------------------------------------------------- */
.jcs-saldos-widget .jcs-tabla-envoltorio {
  /* Diez columnas no caben en un teléfono y encogerlas las vuelve ilegibles:
     se desplaza lateralmente. tabindex en el markup para que también se pueda
     desplazar con el teclado. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--blanco);
  border: 1px solid var(--borde-sutil);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.jcs-saldos-widget .jcs-tabla-envoltorio:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 2px;
}
.jcs-saldos-widget .jcs-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}
.jcs-saldos-widget .jcs-tabla thead th {
  padding: 14px 16px;
  background: var(--fondo, #F4F8FC);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.jcs-saldos-widget .jcs-tabla tbody th,
.jcs-saldos-widget .jcs-tabla tbody td {
  padding: 14px 16px;
  color: var(--tinta);
  border-bottom: 1px solid var(--borde-sutil);
  text-align: left;
  font-weight: 400;
}
.jcs-saldos-widget .jcs-tabla tbody tr:last-child th,
.jcs-saldos-widget .jcs-tabla tbody tr:last-child td { border-bottom: 0; }
.jcs-saldos-widget .jcs-tabla tbody tr:hover { background: #F7FBFD; }
.jcs-saldos-widget .jcs-tabla__op { font-weight: 700; color: var(--azul); }
/* Acordado el 2026-10-21: todas las columnas y textos de las tablas a la
   izquierda, para que se vean más ordenadas (el nombre de la clase quedó
   de cuando los montos iban a la derecha; se deja así, sin renombrar en
   cada tabla de JS/PHP, para no tocar decenas de líneas por un cambio
   puramente visual). */
.jcs-saldos-widget .jcs-tabla__der { text-align: left; }
.jcs-saldos-widget .jcs-tabla__saldo {
  font-weight: 700;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.jcs-accesible .jcs-tabla__saldo { color: #A35E00; }

/* Marcador mientras llega el dato que exige una llamada aparte */
.jcs-saldos-widget .jcs-esperando {
  color: var(--borde);
  letter-spacing: 2px;
  animation: jcs-latido 1.2s ease-in-out infinite;
}
@keyframes jcs-latido { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* --- Tarjetas enriquecidas ----------------------------------------------- */
.jcs-saldos-widget .jcs-operacion {
  display: block;
  padding: 22px 24px;
}
.jcs-saldos-widget .jcs-operacion__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde-sutil);
}
.jcs-saldos-widget .jcs-operacion__saldo {
  font-size: 22px;
  font-weight: 700;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.jcs-accesible .jcs-operacion__saldo { color: #A35E00; }

.jcs-saldos-widget .jcs-operacion__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px 18px;
  margin: 16px 0 20px;
}
.jcs-saldos-widget .jcs-operacion__dato dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-operacion__dato dd {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

/* --- Estado de cuenta dentro del modal ----------------------------------- */
.jcs-saldos-widget .jcs-ec { margin-top: 26px; }
.jcs-saldos-widget .jcs-ec__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
  padding-top: 20px;
  border-top: 1px solid var(--borde-sutil);
}
.jcs-saldos-widget .jcs-ec__cargando,
.jcs-saldos-widget .jcs-ec__vacio {
  margin-top: 10px;
  font-size: 14px;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-ec__rotulo {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-ec__envoltorio {
  overflow-x: auto;
  border: 1px solid var(--borde-sutil);
  border-radius: 10px;
}
.jcs-saldos-widget .jcs-ec__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.jcs-saldos-widget .jcs-ec__tabla th,
.jcs-saldos-widget .jcs-ec__tabla td {
  padding: 9px 12px;
  text-align: left;
  font-weight: 400;
  color: var(--tinta);
  border-bottom: 1px solid var(--borde-sutil);
}
.jcs-saldos-widget .jcs-ec__tabla thead th {
  position: sticky;   /* el encabezado acompaña al desplazar cientos de cuotas */
  top: 0;
  background: var(--fondo, #F4F8FC);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris);
  padding: 0;   /* el <button> de adentro pone su propio padding — ver abajo */
}

/* Encabezado clicable para reordenar la tabla por esa columna (pedido el
   2026-10-19, después de ver la tabla ya unificada). Es un <button>, no el
   <th> con onclick, para que se pueda activar con teclado — un <th> no es
   enfocable por sí solo. */
.jcs-saldos-widget .jcs-ec__orden {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.jcs-saldos-widget .jcs-tabla__der .jcs-ec__orden { justify-content: flex-start; }
.jcs-saldos-widget .jcs-ec__orden:hover,
.jcs-saldos-widget .jcs-ec__orden:focus-visible { color: var(--azul); background: #E9F1F6; }

.jcs-saldos-widget .jcs-ec__flecha {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .25;    /* visible pero discreta en las columnas que no están activas */
}
.jcs-saldos-widget .jcs-ec__flecha[data-dir="asc"] { opacity: 1; color: var(--azul); }
.jcs-saldos-widget .jcs-ec__flecha[data-dir="desc"] { opacity: 1; color: var(--azul); transform: rotate(180deg); }
/* Categorías de estado_amigable() en class-api-proxy.php — la categoría es
   estable aunque GBSYS cambie el texto de dscEstado, así que el color no
   se rompe si el texto exacto varía. */
.jcs-saldos-widget .jcs-ec__estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #EFF1F2;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-ec__estado[data-estado="pagado"]    { background: #E9F3DC; color: #4C6309; }
.jcs-saldos-widget .jcs-ec__estado[data-estado="pendiente"] { background: #FFF4E0; color: #8A5200; }
/* "Pago en proceso": un pago hecho en la página del banco que tarda un día
   en reflejarse — se distingue de "pagado" y de "pendiente" a propósito,
   para no sugerir que el pago se perdió ni que todavía no se ha hecho. */
.jcs-saldos-widget .jcs-ec__estado[data-estado="proceso"]   { background: #E3EEFC; color: #0B4A8F; }

/* Los dos botones del modal (PDF + correo) van en fila, centrados y con
   un tope de 200px — acordado el 2026-10-21: al ocupar la página completa
   el ancho, "flex: 1 1 0" los estiraba a un tamaño enorme. Se apilan en
   pantallas angostas para que ninguno quede demasiado angosto. */
.jcs-saldos-widget .jcs-modal__acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.jcs-saldos-widget .jcs-modal__acciones .jcs-boton {
  flex: 0 1 200px;
  max-width: 200px;
  margin-top: 0;
}
@media (max-width: 480px) {
  .jcs-saldos-widget .jcs-modal__acciones { flex-direction: column; }
}

@media (max-width: 640px) {
  .jcs-saldos-widget .jcs-resultado__cabecera { align-items: flex-start; }
  .jcs-saldos-widget .jcs-tabla { font-size: 13px; }
  .jcs-saldos-widget .jcs-tabla thead th,
  .jcs-saldos-widget .jcs-tabla tbody th,
  .jcs-saldos-widget .jcs-tabla tbody td { padding: 11px 12px; }
}

/* El encabezado de la tabla de cuotas se queda pegado arriba al desplazar
   cientos de filas (ver position: sticky más arriba, en .jcs-ec__tabla
   thead th). Con la página completa ya no hace falta un tope de alto
   propio: se desplaza la página entera, como el resto de pasos. */
.jcs-saldos-widget .jcs-ec__tabla thead th { top: -1px; }

/* La referencia es un código, no prosa: tabular para que alinee en columna. */
.jcs-saldos-widget .jcs-tabla__ref {
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}

/* ==========================================================================
   Vista resumida: agrupación por número de referencia
   ========================================================================== */
.jcs-saldos-widget .jcs-controles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.jcs-saldos-widget .jcs-controles__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.jcs-saldos-widget .jcs-agrupar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--toque);
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  user-select: none;
}
.jcs-saldos-widget .jcs-agrupar input {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--azul);
  cursor: pointer;
}
.jcs-saldos-widget .jcs-agrupar:hover { color: var(--azul); }

/* La vista agrupada por referencia (tabla y tarjetas) se reemplazó el
   2026-10-21: ya no se pliega/despliega cada referencia para ver sus
   operaciones por dentro — cada referencia es una sola fila/tarjeta con
   sus totales y un botón "Ver detalle unificado" (ver filaGrupo() /
   tarjetaGrupo() en consulta-de-saldos.js, y la sección "Rediseño de
   octubre 2026" más abajo para sus estilos). Reutiliza las clases
   .jcs-tabla y .jcs-operacion ya existentes; no necesita clases propias. */

/* ==========================================================================
   Rediseño de octubre 2026: estado de cuenta como página completa (no
   modal), ícono+tooltip en vez del botón al final de la fila, paginación
   de cuotas y detalle unificado por referencia.
   ========================================================================== */

/* --- Página de estado de cuenta / detalle de referencia -------------------
   Reemplaza al antiguo .jcs-modal flotante: ya no es un recuadro flotante
   sobre fondo oscuro, sino una tarjeta blanca con borde/sombra como el
   resto de pasos (lleva también la clase .jcs-card) — pero, a diferencia
   de esas (login/verificación, que sí vuelven a un ancho de lectura
   cómodo de 1000px), esta debe ocupar el 100%: se excluye explícitamente
   del --card de 1000px que ahora tienen las demás. */
.jcs-saldos-widget .jcs-ecpagina { max-width: 100%; }

.jcs-saldos-widget .jcs-volver-paso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gris);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.jcs-saldos-widget .jcs-volver-paso svg { width: 16px; height: 16px; }
.jcs-saldos-widget .jcs-volver-paso:hover { color: var(--azul); }

/* --- Columna de acción FIJA a la derecha -----------------------------------
   Acordado el 2026-10-21: en vez de un ícono junto al número de operación,
   el botón "Ver detalles" (o "Ver detalle unificado") vive en su propia
   columna, pegada al borde derecho de la tabla con position: sticky — así
   queda siempre visible aunque haya scroll horizontal. En las cards no
   hace falta "fijarlo": el botón va simplemente al pie (ver .jcs-operacion
   .jcs-boton--ancho, ya definido más arriba). */
/* Especificidad: `.jcs-saldos-widget .jcs-tabla tbody td` (más arriba, con
   text-align: left) tiene más peso que una sola clase — por eso aquí se
   repite el selector con el elemento td/th para ganarle. Sin esto, el
   botón quedaba a la izquierda de una columna estirada (el ancho que le
   sobraba a la tabla), muy lejos del resto de los datos — el desalineado
   que se vio en la vista agrupada y en el detalle de referencia.
   width: 1% + white-space: nowrap es el truco clásico para que esta
   columna se encoja a su contenido y el resto del ancho sobrante lo
   absorban las demás columnas, no esta. */
.jcs-saldos-widget .jcs-tabla th.jcs-tabla__accion,
.jcs-saldos-widget .jcs-tabla td.jcs-tabla__accion {
  position: sticky;
  right: 0;
  width: 1%;
  white-space: nowrap;
  text-align: center;
  background: var(--blanco);
  border-left: 1px solid var(--borde-sutil);
}
.jcs-saldos-widget .jcs-tabla thead th.jcs-tabla__accion { background: var(--fondo, #F4F8FC); }
.jcs-saldos-widget .jcs-tabla tbody tr:hover td.jcs-tabla__accion { background: #F7FBFD; }

.jcs-saldos-widget .jcs-boton-detalle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: none;
  border: 1.5px solid var(--verde);
  border-radius: 999px;
  color: var(--verde);
  font-family: var(--fuente);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.jcs-saldos-widget .jcs-boton-detalle svg { width: 14px; height: 14px; flex-shrink: 0; }
.jcs-saldos-widget .jcs-boton-detalle:hover { background: var(--verde); color: var(--blanco); }

/* --- Paginador compartido (lista de operaciones, estado de cuenta y
   detalle unificado) --------------------------------------------------- */
/* Acordado el 2026-10-22: Ericka Torres pidió reducir la distancia entre
   los elementos visuales de esta zona (antes 20px/20px). */
.jcs-saldos-widget .jcs-paginador-envoltorio { margin-top: 14px; }
.jcs-saldos-widget .jcs-paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.jcs-saldos-widget .jcs-paginador__extremo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gris);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.jcs-saldos-widget .jcs-paginador__extremo svg { width: 16px; height: 16px; }
.jcs-saldos-widget .jcs-paginador__extremo:hover:not(:disabled) { color: var(--azul); }
.jcs-saldos-widget .jcs-paginador__extremo:disabled { opacity: .4; cursor: not-allowed; }

.jcs-saldos-widget .jcs-paginador__numeros {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.jcs-saldos-widget .jcs-paginador__num {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 50%;
  color: var(--gris);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.jcs-saldos-widget .jcs-paginador__num:hover { color: var(--azul); }
.jcs-saldos-widget .jcs-paginador__num--activa {
  border-color: var(--azul);
  color: var(--azul);
}
.jcs-saldos-widget .jcs-paginador__puntos {
  padding: 0 2px;
  color: var(--gris);
  font-size: 13px;
}
.jcs-saldos-widget .jcs-paginador__tamano select {
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  background: var(--blanco);
  border: 0;
  cursor: pointer;
}

/* --- Detalle unificado por referencia --------------------------------------- */
.jcs-saldos-widget .jcs-ref__resumen {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-ref__totales {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0;
}
.jcs-saldos-widget .jcs-ref__total {
  flex: 1 1 180px;
  padding: 16px 18px;
  background: #EFF4F7;
  border-radius: 14px;
}
.jcs-saldos-widget .jcs-ref__total span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris);
}
.jcs-saldos-widget .jcs-ref__total strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.jcs-accesible .jcs-ref__total strong { color: #A35E00; }

/* ==========================================================================
   N. Botón de acceso por shortcode [judesur_consulta_saldos_boton]
   (ver includes/class-shortcode-boton.php). Clases sin namespace de
   .jcs-saldos-widget a propósito: el botón disparador y el envoltorio del
   overlay viven FUERA de .jcs-saldos-widget (solo lo que hay dentro de la
   caja del modal lo trae). Por eso aquí van valores de la paleta escritos
   a mano en vez de var(--...): esas variables personalizadas solo están
   definidas dentro de .jcs-saldos-widget y no llegan en cascada hacia
   arriba, hacia estos elementos — se verificó que, sin esto, el botón y
   el overlay salían sin ningún estilo.
   ========================================================================== */
.jcs-boton-abrir {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  background: #95C11F;
  color: #FFFFFF;
  font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 600;
  border: 0; border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.4, 0, .2, 1);
}
.jcs-boton-abrir:hover { background: #86AE1B; }

.jcs-overlay-boton {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.jcs-overlay-boton[hidden] { display: none; }
.jcs-overlay-boton__fondo {
  position: absolute; inset: 0;
  background: rgba(0, 34, 44, .55);
}
.jcs-overlay-boton__caja {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0, 49, 88, .10), 0 4px 12px rgba(0, 49, 88, .05);
}
.jcs-overlay-boton__cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: #FFFFFF;
  color: #00222C;
  border: 1px solid #AFC4CA;
  border-radius: 50%;
  cursor: pointer;
}
.jcs-overlay-boton__cerrar:hover { background: #EBF8FC; }