/* Landing publica de pago — replica el lenguaje visual de la plataforma
   (AppHeader.vue / Home.vue): fondo #f8f9fa, morado #2e1a46 / #452d81,
   rosa #ed4c77, verde #33d5ad, cards radius 16 sombra rgba(44,26,70,.06).
   Mobile-first, sin frameworks. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  background: #f8f9fa;
  color: #2e1a46;
  -webkit-font-smoothing: antialiased;
}

/* ── Header: mismo look del AppHeader del SPA ─────────────────────── */
.pp-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.pp-header__inner {
  max-width: 720px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.pp-logo {
  height: 45px;
  width: auto;
}
.pp-header__link {
  font-size: 13.5px;
  font-weight: 600;
  color: #452d81;
  text-decoration: none;
  border: 1.5px solid #d7d2e0;
  border-radius: 999px;
  padding: 7px 14px;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.pp-header__link:hover {
  background: #f4fdf8;
  border-color: #31ffa9;
}

/* ── Layout ───────────────────────────────────────────────────────── */
.pp-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}
.pp-hero {
  text-align: center;
  margin: 22px 0 20px;
}
.pp-hero__icono {
  height: 56px;
  width: auto;
  margin-bottom: 6px;
}
.pp-hero h1 {
  font-size: 28px;
  margin: 0 0 8px;
  font-weight: 500;
  color: #000;
}
.pp-hero h1 strong {
  font-weight: 700;
  color: #452d81;
}
.pp-hero p {
  margin: 0 auto;
  color: #6b5f7d;
  font-size: 15px;
  line-height: 1.55;
  max-width: 440px;
}

/* ── Cards: mismo estilo .card del Home del SPA ───────────────────── */
.pp-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(44, 26, 70, 0.06);
  margin-bottom: 14px;
}
.pp-card-title {
  font-size: 22px;
  font-weight: 500;
  color: #000;
  margin: 0 0 14px;
}
.pp-card-title strong {
  font-weight: 700;
  color: #452d81;
}

/* ── Form de referencia ───────────────────────────────────────────── */
.pp-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.pp-form input {
  width: 100%;
  padding: 12px 14px;
  font-size: 17px;
  letter-spacing: 0.5px;
  border: 1px solid #d7d2e0;
  border-radius: 10px;
  outline: none;
  color: #2e1a46;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.pp-form input:focus {
  border-color: #452d81;
  box-shadow: 0 0 0 3px rgba(69, 45, 129, 0.08);
}
.pp-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  background: #ed4c77;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 25px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(237, 76, 119, 0.28);
  transition:
    filter 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}
.pp-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(237, 76, 119, 0.34);
}
.pp-btn:active {
  transform: scale(0.985);
  box-shadow: 0 4px 10px rgba(237, 76, 119, 0.28);
}
.pp-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.pp-btn--sec {
  background: #2e1a46;
  box-shadow: 0 6px 16px rgba(46, 26, 70, 0.22);
}
.pp-btn--sec:hover {
  box-shadow: 0 8px 20px rgba(46, 26, 70, 0.28);
}
.pp-hint {
  font-size: 12.5px;
  color: #8a819a;
  margin: 10px 0 0;
  text-align: center;
}

/* Form colapsado tras consultar: una sola linea "Referencia: X · Cambiar"
   para que el CTA "Pagar" quede como unica accion primaria de la card. */
.pp-form--compacta .pp-form__campos {
  display: none;
}
.pp-form__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8f6fb;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: #6b5f7d;
}
.pp-form__resumen strong {
  color: #2e1a46;
  letter-spacing: 0.4px;
}
.pp-cambiar {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #452d81;
  font-size: 13.5px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 8px;
}
.pp-cambiar:hover {
  background: #efeaf8;
  text-decoration: underline;
}

/* ── Alertas / estados ────────────────────────────────────────────── */
.pp-alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin-top: 16px;
  line-height: 1.45;
}
.pp-alert--rojo {
  background: #fdecef;
  color: #b3244a;
  border: 1px solid #f6c2d0;
}
.pp-alert--ambar {
  background: #fff7e6;
  color: #8a6200;
  border: 2px dotted #e8b45c;
}
/* Alerta con icono a la izquierda (warning de fecha de valoracion) */
.pp-alert--icono {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pp-alert__icono {
  flex: 0 0 auto;
  margin-top: 1px;
}
.pp-alert__icono svg {
  display: block;
}
.pp-alert--gris {
  background: #f3f1f7;
  color: #5d5470;
  border: 1px solid #e2ddeb;
}
.pp-alert--verde {
  background: #eafaf6;
  color: #0b7d71;
  border: 1px solid #a9e5da;
}

/* ── Panel de resultado del pago (retorno.js) ─────────────────────────
   Pantalla de confirmacion al volver del checkout: icono circular grande,
   titulo, monto y mensaje. El color lo decide el `status` de Wompi, no el
   statusColor (ver retorno.js). */
.pp-res {
  text-align: center;
  padding: 4px 0 2px;
}
.pp-res-icono {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-res-icono svg {
  display: block;
}
/* Exito: circle-check-big de Lucide en green-500 de Tailwind (#22c55e), el
   icono/color que paso el user. Verde mas puro que el menta de marca (#33d5ad). */
.pp-res-icono--verde {
  background: #effcf3;
  color: #22c55e;
}
.pp-res-icono--rojo {
  background: #fdecef;
  color: #d3315b;
}
.pp-res-icono--ambar {
  background: #fff7e6;
  color: #d79a2b;
}
.pp-res-icono--gris {
  background: #f3f1f7;
  color: #8a819a;
}
.pp-res-titulo {
  font-size: 23px;
  font-weight: 700;
  color: #2c1a46;
  margin: 0 0 4px;
  line-height: 1.25;
}
.pp-res-monto {
  font-size: 34px;
  font-weight: 700;
  color: #452d81;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.pp-res-mensaje {
  font-size: 14.5px;
  line-height: 1.5;
  color: #6b5f7d;
  max-width: 420px;
  margin: 0 auto;
}
/* Parte destacada del mensaje (mensajeFuerte en retorno.js). Va en su PROPIA
   linea: display block la baja del parrafo y el tamano ajustado hace que entre
   completa sin partirse en anchos de movil normales. */
/* Una SOLA linea siempre (pedido del user). La frase completa mide ~371px a
   13.5px y en un movil de 360px solo hay ~296px utiles, asi que el tamano
   escala con el ancho: clamp lo baja hasta 10.4px en pantallas chicas y lo
   tope a 13.5px de ahi para arriba. nowrap garantiza que no se parta. */
.pp-res-mensaje strong {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  font-size: clamp(10.4px, 2.9vw, 13.5px);
  white-space: nowrap;
  color: #2c1a46;
}
/* En el estado aprobado el destacado usa el MISMO verde del icono (#22c55e),
   por decision visual del user. Nota: como texto ese verde queda en 2.26:1 de
   contraste sobre blanco (WCAG AA pide 4.5:1) — es una eleccion estetica
   consciente, no un descuido. */
.pp-res--verde .pp-res-mensaje strong {
  color: #22c55e;
}
/* Por debajo de ~340px ni al minimo del clamp entra: ahi preferimos que
   envuelva en dos lineas antes que recortar el texto. */
@media (max-width: 340px) {
  .pp-res-mensaje strong {
    white-space: normal;
  }
}
.pp-res-acciones {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
/* Los botones de accion son <a> y <button> mezclados: normalizamos el look. */
.pp-res-acciones .pp-btn {
  margin-top: 0;
  text-decoration: none;
  text-align: center;
}

/* ── Resumen de pago (renderizado por pagar.js) ───────────────────── */
.pp-resumen {
  margin-top: 18px;
  border-top: 1px solid #efecf4;
  padding-top: 16px;
}
.pp-resumen .pp-quien {
  text-align: center;
  margin-bottom: 14px;
}
.pp-resumen .pp-quien .pp-titular {
  font-size: 18px;
  font-weight: 700;
  color: #452d81;
}
.pp-resumen .pp-quien .pp-producto {
  font-size: 13.5px;
  color: #6b5f7d;
}
/* Opciones de monto — mismo look que .mp-option del DetalleProducto del SPA:
   label bold arriba, monto grande abajo, radio circular a la derecha con
   check teal (#0fb7a6) cuando esta seleccionada. */
.pp-opciones {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.pp-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
  width: 100%;
  text-align: left;
  color: #2c1a46;
  font-family: inherit;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    box-shadow 0.15s;
}
.pp-opcion:hover {
  border-color: #0fb7a6;
}
.pp-opcion__info {
  display: block;
  flex: 1;
  min-width: 0;
}
.pp-opcion__label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #2c1a46;
}
.pp-opcion__monto {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 750;
  color: #1f2937;
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
/* Input inline de "Otro valor" — mismo patron que .mp-option-input del SPA:
   subrayado tenue por defecto, caja blanca al seleccionar, borde verde al enfocar. */
.pp-opcion__input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-bottom-color: #d1d5db;
  border-radius: 0;
  background: transparent;
  transition:
    background-color 0.18s,
    border-color 0.18s,
    border-radius 0.18s;
}
.pp-opcion[aria-checked="true"] .pp-opcion__input-wrap {
  background: #fff;
  border-color: #d1d5db;
  border-radius: 8px;
}
.pp-opcion[aria-checked="true"] .pp-opcion__input-wrap:focus-within {
  border-color: #0fb7a6;
}
.pp-opcion__input-prefix {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}
.pp-opcion__input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.pp-opcion__input::placeholder {
  color: #c9cdd3;
  font-weight: 500;
  font-size: 17px;
}
.pp-monto-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fdecef;
  border: 1px solid #f7c6d1;
  color: #b02a4a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.pp-opcion__radio {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.pp-opcion[aria-checked="true"] {
  border-color: #0fb7a6;
  background: #f0fbf8;
}
.pp-opcion[aria-checked="true"] .pp-opcion__radio {
  border: 3px solid #0fb7a6;
  background-color: #0fb7a6;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 68%;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.pp-metodos {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.pp-metodo {
  flex: 1;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
  color: #2e1a46;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(44, 26, 70, 0.04);
  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.pp-metodo:hover {
  background: #f4fdf8;
  border-color: #31ffa9;
}
.pp-metodo:active {
  transform: scale(0.985);
}
.pp-metodo[aria-pressed="true"] {
  border-color: #452d81;
  background: #f6f4fa;
}
/* Sub-label del metodo (comision de tarjeta / sin costo de PSE), mismo patron
   que .mp-sub-label de la pasarela de la plataforma. */
.pp-metodo-sub {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #8a819a;
}
.pp-metodo[aria-pressed="true"] .pp-metodo-sub {
  color: #6b5f7d;
}
.pp-metodo-icono {
  height: 26px;
  width: auto;
  display: block;
  margin: 0 auto 6px;
}
.pp-total-box {
  text-align: center;
  background: #f8f6fb;
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
}
.pp-total-box .pp-total-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a819a;
}
/* "Total a pagar" es SOLO LECTURA: resumen del cobro. El monto se digita en la
   opcion "Otro valor". */
.pp-total-box .pp-total-valor {
  margin-top: 2px;
  font-size: 34px;
  font-weight: 700;
  color: #452d81;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pp-total-box .pp-total-hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #8a819a;
}
.pp-fecha-linea {
  text-align: center;
  font-size: 12.5px;
  color: #8a819a;
  margin-top: 8px;
}

/* CTA Pagar — mismo look que .mp-btn-continuar del SPA (morado + flecha) */
.pp-btn-pagar {
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  background: #2c1a46;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pp-btn-pagar:hover {
  filter: brightness(1.15);
}
.pp-btn-pagar:active {
  transform: scale(0.985);
}
.pp-btn-pagar:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.pp-btn-pagar svg {
  display: block;
  flex-shrink: 0;
}
.pp-btn-pagar:focus-visible {
  outline: 2px solid #6b4fd9;
  outline-offset: 2px;
}

/* ── Skeleton (mismas primitivas visuales del SPA) ────────────────── */
.pp-skeleton {
  margin-top: 18px;
}
.pp-skel-linea {
  height: 16px;
  border-radius: 6px;
  background: #eee9f3;
  margin-bottom: 10px;
  animation: pp-pulso 1.2s ease-in-out infinite;
}
.pp-skel-linea--lg {
  height: 42px;
}
@keyframes pp-pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-skel-linea {
    animation: none;
  }
}

/* ── Productos (tiles con los iconos oficiales) ───────────────────── */
.pp-productos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pp-producto-tile {
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(44, 26, 70, 0.04);
}
.pp-producto-tile img {
  height: 40px;
  width: auto;
  margin-bottom: 8px;
}
.pp-producto-tile span {
  display: block;
  font-size: 12.5px;
  color: #6b5f7d;
  line-height: 1.35;
}
.pp-producto-tile strong {
  color: #2e1a46;
}

/* ── Pasos ────────────────────────────────────────────────────────── */
.pp-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pp-pasos li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4d4260;
}
.pp-pasos strong {
  color: #2e1a46;
}
.pp-paso-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #b9f8cf;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.pp-faq {
  border-bottom: 1px solid #efecf4;
  padding: 10px 0;
}
.pp-faq:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.pp-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: #2e1a46;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.pp-faq summary::-webkit-details-marker {
  display: none;
}
.pp-faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: -2px;
  color: #452d81;
  font-size: 18px;
  font-weight: 700;
}
.pp-faq[open] summary::after {
  content: "–";
}
.pp-faq p {
  font-size: 14px;
  color: #6b5f7d;
  line-height: 1.55;
  margin: 8px 0 2px;
}

/* ── Accesibilidad: anillo de foco para teclado (mismo tono del SPA) ─ */
.pp-btn:focus-visible,
.pp-opcion:focus-visible,
.pp-metodo:focus-visible,
.pp-cambiar:focus-visible,
.pp-header__link:focus-visible,
.pp-form input:focus-visible,
.pp-faq summary:focus-visible {
  outline: 2px solid #6b4fd9;
  outline-offset: 2px;
}

/* ── Tabla del retorno ────────────────────────────────────────────── */
table[data-testid="pp-retorno-detalle"] {
  border-collapse: collapse;
  margin-top: 12px;
  width: 100%;
}
table[data-testid="pp-retorno-detalle"] td,
table[data-testid="pp-retorno-detalle"] th {
  padding: 8px 6px;
  font-size: 14px;
  border-bottom: 1px solid #efecf4;
}
table[data-testid="pp-retorno-detalle"] td {
  color: #6b5f7d;
  text-align: left;
}
table[data-testid="pp-retorno-detalle"] th {
  text-align: right;
}