/* =====================================================================
   Cancelar la renovación (/cuenta/cancelar · agente 08).
   Solo disposición: colores, tipografías, botones, avisos, fichas, opciones
   y campos salen de ferretero.css, y los fondos de lectura de
   preferencias.css (por eso todo va con los tokens del sistema).
   Responde al ancho real de la página (container "pagina"), de 320 a 1440 px.
   ===================================================================== */

.cancelar-envoltura { padding-bottom: 88px; }

.cancelar-principal {
  display: flex; flex-direction: column; gap: 32px;
  max-width: 46rem; min-width: 0; margin-top: 20px;
}
.cancelar-encabezado { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cancelar-encabezado .titulo-1 { overflow-wrap: anywhere; }

/* Aviso del último rechazo: recibe el foco si se lo pide un enlace (#cancelar-rechazo). */
.cancelar-aviso:focus { outline: none; }
.cancelar-aviso:focus-visible { outline: 2px solid var(--clarete); outline-offset: 3px; }

/* ---------- Tu suscripción ---------- */

.cancelar-resumen { border-top: 2px solid var(--tinta); }
.cancelar-resumen-cuerpo { gap: 10px; padding: 22px 24px 8px; }
/* La tarjeta ya lleva la regla fuerte arriba: la ficha no repite la suya. */
.cancelar-ficha { border-top: 0; }
.cancelar-ficha .ficha-fila:last-child { border-bottom: 0; }
.cancelar-ficha dd { overflow-wrap: anywhere; }

/* ---------- Qué pasa si cancelás ---------- */

.cancelar-bloque { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.cancelar-puntos { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cancelar-puntos li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--fuente-interfaz); font-size: 15px; line-height: 1.55; color: var(--cuerpo);
}
.cancelar-puntos li > span:last-child { min-width: 0; }
.cancelar-punto-icono { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--clarete); }
.cancelar-punto-icono svg { width: 18px; height: 18px; }

/* ---------- Formulario ---------- */

.cancelar-formulario { gap: 26px; padding-top: 18px; border-top: 2px solid var(--tinta); }

/* El fieldset sin marco del navegador (la regla la lleva el formulario). */
.cancelar-motivos { min-width: 0; margin: 0; padding: 0; border: 0; }
.cancelar-motivos > legend {
  display: block; max-width: 100%; padding: 0;
  font-family: var(--fuente-editorial); font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--tinta);
}
.cancelar-motivos > * + * { margin-top: 10px; }
.cancelar-marca {
  font-family: var(--fuente-interfaz); font-size: 14px; font-weight: 500;
  color: var(--gris-bajada); white-space: nowrap;
}
.cancelar-motivos > legend .cancelar-marca { font-size: 14px; }

/* Cada opción mide al menos 44 px de alto (.opcion); dos columnas si entran. */
.cancelar-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  column-gap: 24px;
}
.cancelar-opciones .opcion { padding-block: 8px; }
.cancelar-opciones .opcion > span { min-width: 0; overflow-wrap: anywhere; }

.cancelar-motivos > .cancelar-otro { margin-top: 16px; }
.cancelar-texto { display: block; max-width: 100%; }

/* Sin :has() (o sin CSS) el cuadro se ve siempre, con su etiqueta. Con :has(),
   aparece solo cuando la persona elige «Otro». */
@supports selector(:has(*)) {
  .cancelar-formulario:not(:has(input[name="motivo"][value="otro"]:checked)) .cancelar-otro { display: none; }
}

/* ---------- La única acción final ---------- */

.cancelar-acciones { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--regla); }

/* ---------- Estados sin formulario (pendiente, cancelada, nada que cancelar) ---------- */

.cancelar-estado { max-width: 44rem; }
.cancelar-principal > .fila-botones { margin-top: -8px; }

/* ---------- Responsive ---------- */

@container pagina (max-width: 760px) {
  .cancelar-envoltura { padding-bottom: 64px; }
  .cancelar-principal { gap: 28px; }
  .cancelar-resumen-cuerpo { padding: 20px 18px 6px; }
}
@container pagina (max-width: 520px) {
  .cancelar-ficha .ficha-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cancelar-ficha dd { text-align: left; }
  .cancelar-motivos > legend { font-size: 19px; }
}