/* ══════════════════════════════════════════════════════════════════
   COP · BORRAR LA CUENTA — la hoja de confirmación (11/09/2026)
   ------------------------------------------------------------------
   La comparten `mi-perfil.html` y `borrar-cuenta.html`.

   ⚠ SIN CAJAS Y SIN FONDOS DISTINTOS (regla 1 del sistema): lo único
   que separa es una línea, y el relleno de todo lo que lleva borde en
   degradé es el fondo de la página.

   ⚠ Los dos botones son EL botón del sistema (`.cop-b .cop-borde`); acá
   sólo se les cambia el color, que es lo que hace `.pf-salir` en el
   perfil desde el 04/09. No hay un botón rojo aparte.
   ══════════════════════════════════════════════════════════════════ */

.cb-hoja{
  padding: 0 var(--aire-contenido, 16px) calc(1.4rem + env(safe-area-inset-bottom, 0px));
  color: var(--text, #f4f6fb);
}

.cb-tit{
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: var(--fs-2xl, 1.5rem);
  line-height: var(--lh-tight, 1.1);
  letter-spacing: .01em;
  margin: 0 0 var(--gap-sm, .5rem);
}

/* ⚠ EL AVISO VA EN ROJO Y EL RESTO EN BLANCO. El acento marca lo que
   no se puede deshacer; si todo el texto fuera rojo, nada lo estaría. */
.cb-aviso{
  margin: 0 0 var(--gap-lg, 1rem);
  font-size: var(--fs-base, 1rem);
  line-height: var(--lh-base, 1.3);
  color: #f87171;
}
.cb-aviso b{ font-weight: 800 }

.cb-sub{
  margin: var(--gap-lg, 1rem) 0 var(--gap-sm, .5rem);
  font-size: var(--fs-sm, .8rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim, #9aa3b5);
}

/* la lista se separa con líneas, no con cajas */
.cb-lista{
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-lista > li{
  padding: var(--gap-md, .7rem) 0;
  border-top: 1px solid var(--card-border, #1e2330);
  font-size: var(--fs-md, .88rem);
  line-height: var(--lh-base, 1.3);
  color: var(--text, #f4f6fb);
}
.cb-lista > li:first-child{ border-top: 0 }

.cb-label{
  display: block;
  margin: var(--gap-2xl, 1.8rem) 0 var(--gap-sm, .5rem);
  font-size: var(--fs-md, .88rem);
  color: var(--text-dim, #9aa3b5);
}
.cb-label b{ color: var(--text, #f4f6fb); font-weight: 800; letter-spacing: .08em }

/* ⚠ `box-sizing` SE ESCRIBE ACÁ y no se confía en el reset de la
   página: hay pantallas que no lo traen, y ahí el relleno se SUMA al
   100% y el campo se sale por la derecha. */
.cb-input{
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 var(--gap-lg, 1rem);
  background: var(--bg, #0b0e14);
  border: 1.5px solid var(--card-border, #1e2330);
  border-radius: var(--r-card, 14px);
  color: var(--text, #f4f6fb);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fs-lg, 1.15rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cb-input::placeholder{ color: var(--text-faint, #5a6275); letter-spacing: .12em }
.cb-input:focus{ outline: none; border-color: rgba(248,113,113,.7) }

.cb-error{
  margin: var(--gap-md, .7rem) 0 0;
  font-size: var(--fs-md, .88rem);
  line-height: var(--lh-base, 1.3);
  color: #f87171;
}
/* ⚠ el componente declara `display`, así que declara TAMBIÉN su
   `[hidden]` — sin esto el mensaje de error se ve siempre (van ocho
   apariciones de este bug en el proyecto) */
.cb-error[hidden]{ display: none }

.cb-acciones{
  display: flex;
  flex-direction: column;
  gap: var(--gap-md, .7rem);
  margin-top: var(--gap-xl, 1.2rem);
}
.cb-acciones[hidden]{ display: none }
/* los dos ocupan el ancho: es la acción principal de la hoja */
.cb-acciones > .cop-b{ width: 100% }

/* el destructivo, en el rojo del sistema — mismo cuerpo, otro color */
.cb-ok{ --borde-rgb: 248,113,113; color: #f87171 }

/* ── el disparador, en el pie del perfil ───────────────────────────
   ⚠⚠ ACÁ NO VA ROJO, Y ESO LO DECIDIÓ LA CAPTURA. La primera versión lo
   pintó del mismo rojo que «Cerrar sesión», que está justo encima — y
   con los dos en rojo, uno al lado del otro, **el rojo deja de
   significar algo**: el acento marca lo que no se puede deshacer, y si
   marca también lo que sí, no marca nada. Peor: a simple vista, en un
   teléfono, la mano que busca «Cerrar sesión» encuentra dos botones
   iguales y uno borra para siempre.
   Acá va apagado —se muestra, no se esconde (regla 9)— y **el rojo
   aparece adentro de la hoja**, sobre el botón que de verdad borra, que
   es donde está el peligro. */
.cb-disparador{
  --borde-rgb: 90,98,117;
  color: var(--text-dim, #9aa3b5);
  margin-top: var(--gap-lg, 1rem);
}