/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — COMPRAR
   ───────────────────────────────────────────────────────────────────────────
   Todo sale de los tokens de app.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.comprar { display: flex; flex-direction: column; gap: 16px; margin: 0 0 clamp(30px, 5vw, 56px); }

.comprar-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.comprar-cabecera h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
}

.comprar-bajada { margin: 0; font-size: 13.5px; color: var(--tinta-dim); }

/* `display: flex` le gana a `hidden`, así que se lo devuelve a mano. Sin esto
   la píldora queda dibujada y vacía en la esquina cuando no hay sesión. */
.comprar-saldo[hidden] { display: none; }

.comprar-saldo {
  display: flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid var(--g7);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  background: var(--g2);
  white-space: nowrap;
}

.comprar-saldo-n {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.comprar-saldo-l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

/* El modo de Stripe se dice de frente, no en letra chica escondida. */
.comprar-modo {
  margin: 0;
  border: 1px solid var(--ambar);
  border-left-width: 2px;
  border-radius: var(--r-md);
  padding: 11px 14px;
  background: rgba(246, 191, 83, .07);
  color: var(--tinta-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

.comprar-aviso {
  margin: 0;
  border: 1px solid var(--acento);
  border-radius: var(--r-md);
  padding: 11px 14px;
  background: var(--acento-soft);
  color: var(--tinta);
  font-size: 13px;
  line-height: 1.5;
}

.comprar-aviso:focus { outline: none; }

/* La ficha del plan que ya se tiene: lo dice en palabras y no ofrece nada para tocar. */
.comprar-plan-actual {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
}

.comprar-aviso.bien { border-color: var(--verde); background: rgba(84, 248, 147, .1); }

.comprar-titulo {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.comprar-packs, .comprar-planes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}

.comprar-ficha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--g7);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--g2);
}

/* Lo que no se puede comprar se ve que no se puede. */
.comprar-ficha[data-estado="sin_precio"],
.comprar-ficha[data-estado="precio_roto"] { opacity: .62; border-style: dashed; }

.comprar-nombre { font-size: 14px; font-weight: 600; color: var(--tinta); }

/* Para quién es el plan. Va pegado al nombre y por debajo del precio en peso
   visual: informa, no vende. */
.comprar-para {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-dim);
}

.comprar-precio { display: flex; align-items: baseline; gap: 7px; }

.comprar-monto {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Un precio de referencia no se muestra como si fuera el que se cobra. */
.comprar-monto.sin { color: var(--tinta-faint); }

.comprar-periodo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.comprar-detalle { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-dim); }

.comprar-desajuste {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ambar);
}

.comprar-falta {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--tinta-faint);
  word-break: break-all;
}

.comprar-boton {
  min-height: 38px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .06em;
}

/* Un botón apagado pierde el rojo de acento. Bajarle la opacidad no alcanza:
   el rojo sigue leyendo como «apretame» y el ojo lo busca igual. */
/* Un botón apagado pierde el acento. Bajarle la opacidad no alcanza: el color
   de acento sigue leyendo como «apretame» y el ojo lo busca igual. Sin caja,
   lo único que lo distingue es el color de la letra, así que ese tiene que
   cambiar de verdad. */
.comprar-boton:disabled {
  cursor: not-allowed;
  background: none;
  border: 0;
  color: var(--tinta-faint);
  box-shadow: none;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ── Mensual / anual ─────────────────────────────────────────────────────────
   El interruptor va en la misma fila que el título de los planes, alineado a
   la derecha. No gobierna la pantalla entera: los paquetes de crédito suelto
   no tienen período, y un selector flotando arriba de todo haría creer que sí.

   Son radios de verdad con el input escondido: el teclado los recorre con las
   flechas y el lector de pantalla anuncia el grupo. Lo que se pinta es la
   etiqueta, y el estado sale de :checked, no de una clase que hay que acordarse
   de sincronizar. */
.comprar-titulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.comprar-periodos {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--g7);
  border-radius: var(--r-pill);
  background: var(--g2);
}

.comprar-periodo-op {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-faint);
  transition: background .18s ease, color .18s ease;
}

/* El input se saca del flujo pero NO con display:none: así sigue recibiendo
   foco y el navegador lo encuentra con las flechas. */
.comprar-periodo-op input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.comprar-periodo-op:hover { color: var(--tinta); }

.comprar-periodo-op:has(input:checked) {
  background: var(--tinta);
  color: var(--g2);
}

/* El foco tiene que verse: sin esto, quien navega con teclado no sabe dónde
   está parado, porque el input real es invisible. */
.comprar-periodo-op:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Lo que se cobra hoy en el plan anual. Sin color: es un dato, no una oferta. */
.comprar-cobro-anual {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tinta-dim);
}

/* Los meses gratis. Verde y no acento: es una buena noticia, no una alarma. */
.comprar-ahorro {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--verde);
}

/* ── Cotización de Enterprise ────────────────────────────────────────────────
   El formulario se abre dentro de la ficha y la ensancha a todo el ancho de la
   grilla. Es deliberado: mientras se escribe, ese pedido es lo único que
   importa, y una columna de 196 px no alcanza para un formulario de seis
   campos. Al cerrarlo, la ficha vuelve a su lugar sin mover a las demás. */
.comprar-ficha:has(.cotiza) {
  grid-column: 1 / -1;
}

.cotiza {
  margin-top: 12px;
  border-top: 1px solid var(--g7);
  padding-top: 14px;
}

.cotiza-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cotiza-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* El mensaje y todo lo que va debajo ocupan la fila entera. */
.cotiza-campo.ancho,
.cotiza-aviso,
.cotiza-previo,
.cotiza-enviar { grid-column: 1 / -1; }

.cotiza-etiqueta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.cotiza-opcional {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--tinta-faint);
  opacity: .7;
}

.cotiza-campo input,
.cotiza-campo textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--g7);
  border-radius: var(--r-md);
  padding: 9px 11px;
  background: var(--g2);
  color: var(--tinta);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.cotiza-campo input:focus,
.cotiza-campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

.cotiza-campo.con-error input,
.cotiza-campo.con-error textarea { border-color: var(--acento); }

.cotiza-ayuda,
.cotiza-error {
  font-size: 11.5px;
  line-height: 1.45;
}

.cotiza-ayuda { color: var(--tinta-faint); }
.cotiza-error { color: var(--acento); }

.cotiza-aviso {
  margin: 0;
  border: 1px solid var(--acento);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--acento-soft);
  color: var(--tinta);
  font-size: 12.5px;
  line-height: 1.5;
}

/* El aviso previo. Tenue y arriba del botón: tiene que leerse antes de
   apretar, no competir con el formulario. */
.cotiza-previo {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--tinta-faint);
}

.cotiza-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}

.cotiza-listo {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta);
}

/* La oferta con fecha (servidor/ofertas.js, T31): una franja con el porcentaje, el alcance y el fin; en cada plan, el precio del primer pago.
   Sin reloj, sin precio tachado y sin cursivas. */
.comprar-oferta {
  margin: 0;
  border: 1px solid var(--verde);
  border-left-width: 2px;
  border-radius: var(--r-md);
  padding: 11px 14px;
  background: rgba(120, 200, 140, .07);
  font-style: normal;
}
.comprar-oferta-texto { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--tinta); }
.comprar-oferta-nota { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--tinta-dim); }
.comprar-con-oferta[hidden] { display: none; }
.comprar-con-oferta { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--verde); font-style: normal; }