/* ==========================================================================
   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:      1000px; /* tope del contenedor; las tarjetas lo llenan (--card: none) */
  --card:       none;   /* idem — las tarjetas (form/cargando/error/resultado) ya no tienen tope de ancho */
  --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;
}
.jcs-saldos-widget h1, .jcs-saldos-widget h2, .jcs-saldos-widget h3, .jcs-saldos-widget p, .jcs-saldos-widget ul, .jcs-saldos-widget ol, .jcs-saldos-widget dl, .jcs-saldos-widget dd, .jcs-saldos-widget dt, .jcs-saldos-widget figure { margin: 0; padding: 0; }
.jcs-saldos-widget ul, .jcs-saldos-widget ol { list-style: none; }
.jcs-saldos-widget button, .jcs-saldos-widget input { font: inherit; color: inherit; }
.jcs-saldos-widget img, .jcs-saldos-widget svg { max-width: 100%; }
.jcs-saldos-widget 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; }

.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;
}

/* ── Modal de detalle de una operación ────────────────────────────────── */
.jcs-modal-fondo {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 34, 44, .55);
  z-index: 1000;
}
.jcs-modal {
  position: relative;
  width: 100%; max-width: 420px;
  padding: 36px 32px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  animation: jcs-aparece 200ms cubic-bezier(.2, .8, .3, 1) both;
}
.jcs-modal .jcs-fila { padding-block: 16px; }
.jcs-modal .jcs-fila__valor--saldo { font-size: clamp(26px, 5vw, 32px); }
.jcs-modal__cuerpo { margin-top: 20px; }
.jcs-modal .jcs-boton { margin-top: 26px; }
.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; }
.jcs-modal__cerrar {
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center;
  width: var(--toque); height: var(--toque);
  margin: -10px;
  background: none; border: 0; border-radius: 50%;
  color: var(--gris); cursor: pointer;
}
.jcs-modal__cerrar:hover { background: var(--fondo); color: var(--azul); }
.jcs-modal__cerrar svg { width: 18px; height: 18px; }

@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,
.jcs-saldos-widget .jcs-boton--linea:hover,
.jcs-saldos-widget .jcs-boton--linea:focus {
  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; }

/* Ayuda de pruebas: desaparece al apagar «Mostrar el código en pantalla». */
.jcs-codigo__demo {
  margin-top: 12px;
  padding: 10px 14px;
  max-width: 420px;
  background: #FFF8E1;
  border: 1px dashed #E0B400;
  border-radius: var(--radio-campo);
  color: #7A5B00;
  font-size: 13px; font-weight: 600;
  text-align: center;
}

@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,
.jcs-saldos-widget [data-paso="codigo"] .jcs-codigo__demo { 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;
}