/* =====================================================================================================================
   whatsapp.css — 1.10.47 · EL CAMINO DE WHATSAPP (agente WA).
   Una sola hoja para el botón «Reservar por WhatsApp» de las tres pantallas donde sale (la ficha de la capacitación,
   la tabla de fechas y «Solicita tu cupo») y para la página de paso (wa.php). Así el botón se ve IGUAL en las tres,
   aunque cada página tenga su propia hoja y su propio prefijo (ve-, vi-, vj-).

   Decisiones de diseño:
   · MÓVIL PRIMERO: en el teléfono es donde se usa WhatsApp. El botón nace a todo el ancho y con 48 px de alto (dedo),
     y solo a partir de 760 px se encoge a su contenido donde hace falta (la fila de la tabla de fechas).
   · El botón NO compite con el botón principal de cada pantalla («Añadir al carrito», «Solicitar cupo»): va en blanco
     con borde y texto verdes, no relleno. El relleno (--relleno) se usa solo donde ES la acción principal (wa.php).
   · El verde es el de WhatsApp oscurecido lo justo para que el texto se lea sobre blanco (contraste ≥ 4,5:1): el
     #25D366 de la marca sobre blanco da 1,8:1 y sería ilegible.
   · SIN franjas ni líneas verticales de acento y SIN punto de color junto a la palabra (regla de la ronda): el código
     corto va en una insignia con texto, nada más.
   · Todo cuelga de clases wa-: no toca la cabecera, el pie ni las hojas de nadie.
   ===================================================================================================================== */

.wa-btn, .wa-ir {
  --wa-verde: #0E7A43;              /* texto y borde sobre blanco (4,9:1) */
  --wa-verde-o: #0A6236;            /* el de pasar el ratón */
  --wa-verde-50: #EAF7F0;
  --wa-verde-borde: #B6DFC8;
  --wa-tinta: #0F172A;
  --wa-gris: #64748B;
  --wa-linea: #E6EBF1;
}

/* ------------------------------------------------------------------ el botón */
.wa-btn {
  display: flex; width: 100%;                    /* móvil primero: a todo el ancho */
  align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 11px 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--wa-verde-borde); border-radius: 11px;
  background: #fff; color: var(--wa-verde);
  font-family: var(--font-display, "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif);
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.wa-btn:hover { background: var(--wa-verde-50); border-color: var(--wa-verde); color: var(--wa-verde-o); }
.wa-btn:active { transform: translateY(1px); }
.wa-btn:focus-visible { outline: 3px solid rgba(14, 122, 67, .45); outline-offset: 2px; }
.wa-btn .wa-ico { flex: none; width: 19px; height: 19px; }

/* Relleno: solo donde el botón ES la acción principal (la página de paso). */
.wa-btn--relleno { background: var(--wa-verde); border-color: var(--wa-verde); color: #fff; }
.wa-btn--relleno:hover { background: var(--wa-verde-o); border-color: var(--wa-verde-o); color: #fff; }

/* Chico: el de la fila de la tabla de fechas, debajo de «Solicitar cupo». */
.wa-btn--chico { min-height: 40px; padding: 9px 14px; font-size: 13.5px; gap: 7px; }
.wa-btn--chico .wa-ico { width: 16px; height: 16px; }

/* A partir de la tableta, el botón de una fila se encoge a su contenido; el de una tarjeta sigue a todo el ancho. */
@media (min-width: 760px) {
  .wa-btn { display: inline-flex; width: auto; }
  .wa-btn--bloque { display: flex; width: 100%; }
}
.wa-btn--bloque { display: flex; width: 100%; }

/* Lo que se le dice al lector de pantalla y no se ve. */
.wa-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La línea de apoyo que puede ir debajo del botón («Te contestamos…»). */
.wa-nota {
  margin: 7px 0 0; font-family: var(--font-display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 12.5px; line-height: 1.45; color: var(--wa-gris, #64748B); text-align: center;
}

/* ------------------------------------------------------------------ la página de paso (wa.php) */
.wa-ir {
  padding: 34px 0 72px;
  background: #F5F7FA;
  font-family: var(--font-display, "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif);
  color: var(--wa-tinta);
}
.wa-ir__caja {
  max-width: 460px; margin: 0 auto; padding: 26px 22px 22px;
  background: #fff; border: 1px solid var(--wa-linea); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .06);
  text-align: center;
}
.wa-ir__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-bottom: 12px;
  border-radius: 50%; background: var(--wa-verde-50); color: var(--wa-verde);
}
.wa-ir__ic .wa-ico { width: 34px; height: 34px; }
.wa-ir__t { margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.2; }
.wa-ir__p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #475569; }
/* El código, en una insignia CON TEXTO (sin punto de color): se puede dictar por teléfono. */
.wa-ir__cod {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 13px;
  background: var(--wa-verde-50); border: 1px solid var(--wa-verde-borde); border-radius: 999px;
}
.wa-ir__cod span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wa-verde); }
.wa-ir__cod b { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--wa-tinta); font-variant-numeric: tabular-nums; }
.wa-ir__msg { margin: 14px 0 0; text-align: left; }
.wa-ir__msg > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--wa-verde); list-style: none;
  padding: 6px 0; text-align: center;
}
.wa-ir__msg > summary::-webkit-details-marker { display: none; }
.wa-ir__msg > summary:focus-visible { outline: 3px solid rgba(14, 122, 67, .45); outline-offset: 2px; border-radius: 6px; }
.wa-ir__pre {
  margin: 8px 0 0; padding: 12px 13px; max-height: 240px; overflow: auto;
  background: #F8FAFC; border: 1px solid var(--wa-linea); border-radius: 10px;
  font-family: var(--font-display, system-ui, sans-serif); font-size: 12.5px; line-height: 1.55; color: #334155;
  white-space: pre-wrap; word-break: break-word;
}
.wa-ir__volver { display: inline-block; margin-top: 15px; font-size: 13px; font-weight: 700; color: #34528A; text-decoration: none; }
.wa-ir__volver:hover { text-decoration: underline; }
.wa-ir__volver:focus-visible { outline: 3px solid rgba(52, 82, 138, .45); outline-offset: 2px; border-radius: 6px; }

@media (min-width: 760px) {
  .wa-ir { padding: 56px 0 96px; }
  .wa-ir__caja { padding: 32px 30px 26px; }
  .wa-ir__t { font-size: 24px; }
}

/* ------------------------------------------------------------------ dentro de la ficha de la capacitación (curso.php)
   La tarjeta de compra ya separa sus botones 13 px; el de WhatsApp sigue esa misma pila y lleva su línea de apoyo. */
.ve-compra__in > .wa-btn { margin-top: 13px; }
.ve-compra__in > .wa-nota { margin-top: 7px; }

/* ------------------------------------------------------------------ dentro de la tabla de fechas (fechas.php)
   En el escritorio, debajo de «Solicitar cupo» en la misma celda; en el teléfono la fila es una tarjeta y los dos
   botones van uno sobre otro, a todo el ancho. */
.vi-f-act .wa-btn { margin-top: 7px; }
@media (min-width: 760px) {
  /* Los dos botones de la celda, del mismo ancho: uno debajo del otro se ve torcido si no coinciden. Esta regla solo
     existe cuando hay WhatsApp configurado; sin él, esta hoja no se carga y la tabla queda exactamente como estaba. */
  .vi-f-act .wa-btn, .vi-f-act .vi-btn { display: flex; width: 100%; }
}

/* ------------------------------------------------------------------ dentro de «Solicita tu cupo» (inscripcion.php) */
.vj-wa { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--wa-linea); }
.vj-wa__t { margin: 0 0 9px; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #334155; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .wa-btn { transition: none; }
  .wa-btn:active { transform: none; }
}