/* ============================================================================
   Alio · Eliminar la cuenta
   ----------------------------------------------------------------------------
   Las dos columnas —lo que se va y lo que se queda— van una al lado de la otra
   y ANTES del formulario. Es una acción sin vuelta atrás: leer qué pasa tiene
   que ser inevitable, no algo que se encuentre quien baje del todo.
   ========================================================================== */

.borrar {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 10vh, 96px);
}

.borrar .doc__head {
  padding-left: 0;
  padding-right: 0;
}

/* --- Qué se va y qué se queda -------------------------------------------- */

.borrar__que {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20);
  margin-top: clamp(28px, 4vh, 40px);
}

@media (max-width: 720px) {
  .borrar__que {
    grid-template-columns: minmax(0, 1fr);
  }
}

.borrar__col {
  padding: var(--sp-24);
  border-radius: 18px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
}

/* El que se va lleva el filete en ARCILLA, no en rojo: borrar tu cuenta no es
   un error del sistema, es una decisión tuya. El rojo queda para los fallos. */
.borrar__col--fuera {
  border-color: var(--sem-out);
}

.borrar__col h2 {
  margin: 0 0 var(--sp-16);
  font-size: var(--text-body);
  font-weight: 600;
}

.borrar__col--fuera h2 {
  color: var(--sem-out);
}

.borrar__col ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--p-sub);
}

.borrar__col li b {
  color: var(--p-text);
  font-weight: 600;
}

.borrar__nota {
  margin: var(--sp-16) 0 0;
  padding-top: var(--sp-16);
  border-top: 1px solid var(--p-border);
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--p-sub);
}

/* --- La acción ------------------------------------------------------------ */

.borrar__accion {
  margin-top: clamp(28px, 4vh, 40px);
  padding: var(--sp-24);
  border-radius: 18px;
  border: 1px solid var(--p-border);
  background: var(--p-bg);
}

.borrar__espera {
  text-align: center;
  color: var(--p-sub);
  font-size: var(--text-sm);
}

.borrar__h2 {
  margin: 0 0 var(--sp-12);
  font-size: var(--text-lg);
  font-weight: 600;
}

.borrar__accion p {
  margin: 0 0 var(--sp-16);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--p-sub);
}

.borrar__quien b {
  color: var(--p-text);
  overflow-wrap: anywhere;
}

.borrar__accion form {
  display: grid;
  gap: var(--sp-16);
}

.borrar__accion .cta__campo input {
  /* Se va a teclear una palabra concreta y en mayúsculas: tipografía holgada
     y sin corrección automática (eso último, en el HTML). */
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ESTE es el único botón rojo del sitio, y por eso lo es: destruir datos de
   forma irreversible es exactamente lo que el rojo del sistema significa. */
.borrar__btn {
  width: 100%;
  background: var(--sem-error);
  color: #ffffff;
  font-weight: 600;
}

.borrar__btn:hover:not(:disabled) {
  background: #933224;
}

.borrar__btn:disabled {
  background: var(--p-border);
  color: var(--p-sub);
  cursor: not-allowed;
  transform: none;
}

.borrar__salir {
  display: block;
  width: 100%;
  margin-top: var(--sp-16);
  padding: 12px;
  font-size: var(--text-sm);
  color: var(--p-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.borrar__salir:hover {
  color: var(--p-text);
}

.borrar__ayuda {
  margin-top: var(--sp-16) !important;
  font-size: var(--text-caption) !important;
}

.borrar__ayuda a {
  color: var(--p-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}