/* =============================================================================
   Soft Imperio — Estado de la licencia (/estado)

   Se monta sobre auth.css: misma barra y mismos campos. El FONDO, en cambio, es
   propio y negro — ver el bloque «LIENZO NEGRO» al final del archivo. Aquí viven
   la cabecera, la caja de consulta, las tarjetas de resultado y el centro de
   ayuda.

   Mide siempre a 320 px y con el texto del sistema al 130 %: la mayoría entra
   desde un Android con la letra grande. Por eso las rejillas van con
   minmax(0,1fr) y los textos largos con min-width:0.
   ============================================================================= */

.est-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 1rem + 4vw, 3.5rem) var(--gutter) 3rem;
  min-width: 0;
}

/* Botón de ayuda de la barra superior */
.est-help {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-body);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.est-help:hover { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }

/* ------------------------------------------------------------- Cabecera --- */
.est-head { text-align: center; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.est-logo {
  display: inline-grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-xl);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 32%, transparent);
  box-shadow: 0 12px 34px color-mix(in oklab, var(--brand) 26%, transparent);
  margin-bottom: 1.1rem;
}
.est-logo img { display: block; }
.est-head h1 {
  font-size: clamp(1.85rem, 1.2rem + 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 0.6rem;
}
.est-head h1 span { color: var(--brand); }
.est-head p { color: var(--ink-muted); font-size: 1.02rem; margin: 0; }

/* -------------------------------------------------- Caja de la consulta --- */
.est-box {
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.15rem, 0.9rem + 1.4vw, 1.9rem);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
}
.est-box form { display: grid; gap: 0.9rem; }
.est-note {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-faint);
  text-align: center;
  margin: 1rem 0 0;
}
.est-note a { color: var(--brand); font-weight: 600; }

/* ------------------------------------------------------------ Resultado --- */
.est-result { margin-top: 1.75rem; }
.est-saludo { color: var(--ink-muted); font-size: 0.96rem; margin: 0 0 0.9rem; }

.est-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--ink-muted);
  padding: 2.25rem 1rem;
  font-weight: 600;
}
.est-cargando i, .est-cargando svg { animation: est-giro 1.1s linear infinite; }
@keyframes est-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .est-cargando i, .est-cargando svg { animation: none; }
}

.est-cards { display: grid; gap: 1rem; }

.est-card {
  position: relative;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.05rem, 0.85rem + 1vw, 1.5rem);
  overflow: hidden;
  min-width: 0;
}
/* Filo de color por estado: se lee de un vistazo antes que el texto */
.est-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--est-c, var(--brand));
}
.est-card--ok   { --est-c: var(--success); }
.est-card--warn { --est-c: var(--warn); }
.est-card--bad  { --est-c: var(--danger); }
.est-card--info { --est-c: var(--info); }

.est-card__top { display: flex; gap: 0.85rem; align-items: flex-start; }
/* El logo del producto lo pinta SI.brandGlyph con su propio fondo de marca
   (rojo Adobe, turquesa Canva…): aquí solo se reserva el hueco. */
.est-card__ic { flex: none; display: grid; place-items: center; }
.est-card__ttl { min-width: 0; display: grid; gap: 0.45rem; }
.est-card__ttl h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}

.est-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  color: var(--est-c);
  background: color-mix(in oklab, var(--est-c) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--est-c) 34%, transparent);
}
.est-badge .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}
.est-badge--ok .dot { animation: est-late 2.2s ease-in-out infinite; }
@keyframes est-late { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .est-badge--ok .dot { animation: none; } }

.est-card__msg {
  color: var(--ink-body);
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0.95rem 0 0;
}

.est-barra {
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-faint) 22%, transparent);
  overflow: hidden;
  margin-top: 1rem;
}
.est-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--est-c);
}

/* Datos: cada uno en su propia casilla, no una lista suelta. Es la información
   que el cliente vino a buscar —hasta cuándo le dura y en qué equipo está—, y
   plana se leía como el pie de página de la tarjeta. Dos columnas en pantalla
   ancha, una sola en el celular. */
.est-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.6rem;
  margin: 1.15rem 0 0;
  padding: 0;
  border-top: 0;
}
.est-datos > div {
  min-width: 0;
  background: color-mix(in oklab, var(--est-c, var(--brand)) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--est-c, var(--brand)) 22%, transparent);
  border-radius: var(--r);
  padding: 0.7rem 0.85rem;
}
.est-datos dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--est-c, var(--brand)) 75%, var(--ink-body));
  margin-bottom: 0.25rem;
}
.est-datos dd {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* Paso intermedio de «No tengo acceso»: se le explica antes de tocar nada. */
.est-paso {
  width: 100%;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border: 1px dashed color-mix(in oklab, var(--brand) 34%, transparent);
  border-radius: var(--r);
  padding: 0.95rem 1rem;
}
.est-paso__txt {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.est-paso__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.est-card__acc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

/* -------------------------------------------- Sin resultados / mensajes --- */
.est-vacio {
  text-align: center;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.5rem) clamp(1.1rem, 0.9rem + 1.5vw, 2rem);
}
.est-vacio__ic {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--brand) 13%, transparent);
  color: var(--brand);
  margin-bottom: 0.95rem;
}
.est-vacio h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.est-vacio p { color: var(--ink-muted); font-size: 0.96rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.est-vacio__tip {
  background: color-mix(in oklab, var(--brand) 9%, transparent);
  border: 1px dashed color-mix(in oklab, var(--brand) 30%, transparent);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  margin: 1.1rem 0 0 !important;
  font-size: 0.9rem !important;
  text-align: left;
}
.est-vacio .btn { margin-top: 1.15rem; }

/* ------------------------------------------------------ Centro de ayuda --- */
.est-ayuda { margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
.est-ayuda h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
}
.est-ayuda__sub { color: var(--ink-faint); font-size: 0.94rem; margin: 0 0 1.35rem; }
.est-ayuda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.9rem;
}
.est-ayuda__card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  background: color-mix(in oklab, var(--surface) 74%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  min-width: 0;
}
.est-ayuda__ic {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--brand) 13%, transparent);
  color: var(--brand);
}
.est-ayuda__tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--brand);
  margin-top: 0.35rem;
}
.est-ayuda__card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.est-ayuda__card p { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }

.est-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
}
.est-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Pie --- */
.est-foot {
  margin-top: clamp(2.25rem, 2rem + 2vw, 3.25rem);
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.est-foot a { color: var(--brand); font-weight: 600; }
.est-foot .est-link { display: inline; font-size: inherit; }

/* Motivos de la reposición: mismo control que en la cuenta del cliente, pero
   aquí hace falta declararlo porque /estado no carga account.css. */
.rep-motivos { display: grid; gap: 0.5rem; }
.rep-motivo {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-body);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.rep-motivo:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
.rep-motivo__dot {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: border-color var(--t), box-shadow var(--t);
}
.rep-motivo.is-on { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 10%, transparent); color: var(--ink-strong); }
.rep-motivo.is-on .rep-motivo__dot { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); }
.rep-motivo__txt { min-width: 0; }

/* La foto del producto del catálogo. Cuadrada y recortada al centro, para que
   una portada apaisada no descuadre la fila del título. */
.est-card__img {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* =============================================================================
   AUTOSOPORTE (18-ago-2026)

   Lo que se añadió cuando /estado dejó de solo informar y volvió a tener
   botones: el parte del equipo, los programas asignados, y la zona donde el
   cliente arregla su Adobe sin escribirle a nadie.

   La regla que ordena todo esto: en la tarjeta hay TRES niveles de peso y se
   tienen que distinguir sin leer. Los datos (gris, tranquilo) · el parte del
   equipo (verde o rojo, informa) · la zona de arreglo (marco propio y un botón
   grande, actúa). Cuando todo pesaba igual, el cliente con el equipo caído no
   encontraba el único botón que le servía.
   ============================================================================= */

/* Extremos de la barra de vigencia: «desde» a la izquierda, «hasta» a la
   derecha. Sin esto la barra no dice nada: a media asta puede ser un mes o un
   año. */
.est-barra__pies {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- Programas asignados --- */
.est-progs { margin-top: 1.15rem; }
.est-progs__ttl {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.est-progs__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.est-pill {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-body);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.7rem;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------- Parte del equipo --- */
/* Va también cuando está BIEN. Un «tu equipo está activo» en verde le ahorra el
   WhatsApp de las nueve de la noche igual que el aviso rojo se lo ahorra al
   dueño: el cliente que no puede abrir Photoshop no sabe si es su computadora,
   su internet o el servicio, y esto se lo dice en una línea. */
.est-equipo {
  --eq: var(--success);
  margin-top: 1.15rem;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--eq) 30%, transparent);
  border-left: 3px solid var(--eq);
  background: color-mix(in oklab, var(--eq) 8%, transparent);
  padding: 0.85rem 1rem;
}
.est-equipo.is-mal { --eq: var(--danger); }
.est-equipo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.est-equipo__top strong {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.est-equipo__top strong i, .est-equipo__top strong svg { flex: none; color: var(--eq); }
.est-equipo__tag {
  flex: none;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--eq);
  background: color-mix(in oklab, var(--eq) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--eq) 36%, transparent);
  border-radius: var(--r-pill);
  padding: 0.2rem 0.5rem;
}
.est-equipo p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-body); }
.est-equipo__pie {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.74rem;
  color: var(--ink-faint);
}

/* ================================================ Zona de autosoporte === */
/* Marco propio, título propio y un solo botón dentro. Es lo único que el
   cliente con un problema tiene que encontrar, así que no comparte fila con
   «Ver mi acceso» ni con «Renovar». */
.est-auto {
  margin-top: 1.25rem;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--brand) 34%, transparent);
  background: color-mix(in oklab, var(--brand) 9%, transparent);
  padding: 1rem;
}
.est-auto__ttl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.8rem;
}
.est-auto__cuerpo { display: grid; gap: 0.55rem; }
.est-auto__nota {
  margin: 0.85rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.est-auto__pie, .est-auto__destino {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.est-auto__destino { font-weight: 600; color: var(--brand); }
/* «Prefiero elegir yo el equipo», debajo del botón rápido. Va discreto y
   centrado a propósito: el que está sin Adobe y con prisa tiene que ver un solo
   botón grande, y el que quiere mirar a dónde va lo encuentra sin buscar. */
.est-auto__elegir { justify-self: center; margin-top: 0.15rem; }

/* El botón grande. Late a propósito: en un celular a media luz, un botón más
   entre cinco no se encuentra, y este es el ÚNICO que le arregla el día. Se
   queda quieto para quien pidió menos movimiento en su sistema. */
.est-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: center;
  color: #04140c;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 72%, white));
  border: 0;
  border-radius: var(--r);
  padding: 1.05rem 1.1rem;
  cursor: pointer;
  box-shadow: 0 10px 28px color-mix(in oklab, var(--brand) 34%, transparent);
  animation: est-latido 1.9s ease-in-out infinite;
}
.est-grande:hover { filter: brightness(1.06); }
.est-grande:active { transform: translateY(1px); }
@keyframes est-latido {
  0%, 100% { box-shadow: 0 10px 28px color-mix(in oklab, var(--brand) 30%, transparent); }
  50%      { box-shadow: 0 10px 38px color-mix(in oklab, var(--brand) 62%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .est-grande { animation: none; } }

/* ------------------------------------------ Transferir de equipo -------- */
/* La pantalla «Transfer to Different Organization» del panel del proveedor,
   escrita para el cliente. Se le enseña TODO antes de tocar nada —con qué
   correo figura, en qué equipo está, a dónde puede ir y qué programas se
   lleva—: un botón que mueve su Adobe sin decirle a dónde da miedo, y el mismo
   botón con la ficha delante tranquiliza. */
.est-trans { display: grid; gap: 0.7rem; }
.est-trans__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 0.5rem 0.9rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  border: 1px solid var(--border);
  padding: 0.75rem 0.85rem;
}
.est-trans__ficha > div { display: grid; gap: 0.15rem; min-width: 0; }
.est-trans__ficha span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.est-trans__ficha b {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* El aviso, en ámbar y no en rojo: no es un error, es un «esto es lo que va a
   pasar». La frase que lo desactiva —sus días no cambian— va en negrita porque
   es exactamente el miedo con el que llega. */
.est-trans__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent);
  background: color-mix(in oklab, var(--warn) 12%, transparent);
  padding: 0.7rem 0.8rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.est-trans__aviso i, .est-trans__aviso svg { flex: none; color: var(--warn); margin-top: 0.12rem; }
.est-trans__aviso b { color: var(--ink-strong); }
/* LAS DOS PUERTAS del autosoporte (25-ago-2026): «mi equipo está caído» y «mi
   cuenta fue desactivada». Cada una con su explicación, porque el cliente no
   sabe cuál es lo suyo hasta que se lo cuentas — y el que pulsa la que no es
   acaba escribiendo. La destacada es la que el proveedor ya confirmó. */
.est-opciones { display: grid; gap: 0.6rem; }
.est-op {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  padding: 0.85rem 0.9rem;
}
.est-op.is-destacada {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--border));
  background: color-mix(in oklab, var(--brand) 8%, transparent);
}
.est-op__ic { display: inline-flex; color: var(--brand); }
.est-op__ic svg { width: 1.15rem; height: 1.15rem; }
.est-op__txt b { display: block; font-size: 0.95rem; color: var(--ink-strong); }
.est-op__txt p {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.est-op__btn { grid-column: 1 / -1; margin-top: 0.7rem; }

/* El correo nuevo, en el cambio de correo. Mismo aire que el desplegable de
   equipos para que las dos pantallas se lean como la misma cosa. */
.est-trans__mail {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--border));
  border-radius: var(--r);
  padding: 0.75rem 0.85rem;
}
.est-trans__mail::placeholder { font-weight: 500; color: var(--ink-faint); }
.est-trans__mail:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.est-trans__lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.est-trans__sel {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-strong);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--border));
  border-radius: var(--r);
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
}
.est-trans__sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.est-trans__prods { display: grid; gap: 0.4rem; }
.est-trans__prod {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  padding: 0.6rem 0.75rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-body);
  cursor: pointer;
}
.est-trans__prod:has(input:checked) {
  border-color: color-mix(in oklab, var(--brand) 48%, transparent);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--ink-strong);
}
.est-trans__prod input { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; flex: none; }
.est-trans__no { justify-self: center; }

/* --------------------------------------------------------- La espera --- */
/* Cuando el proveedor no tiene ningún equipo libre no hay nada que pulsar, y lo
   que tranquiliza no es un número: es saber que la página lo sigue mirando
   sola. Por eso el icono gira mientras no haya reloj que mirar. */
.est-espera {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px dashed color-mix(in oklab, var(--brand) 30%, transparent);
  padding: 0.9rem 1rem;
}
.est-espera__ic { flex: none; display: grid; place-items: center; color: var(--brand); margin-top: 0.1rem; }
.est-espera p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-body); }
.est-espera__reloj {
  display: inline-block;
  font-weight: 800;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Gira solo donde la espera NO tiene fin conocido: la que sí tiene reloj ya se
   explica con el número, y dos cosas moviéndose a la vez marean. */
.est-espera.is-obrando .est-espera__ic i,
.est-espera.is-obrando .est-espera__ic svg { animation: est-giro 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .est-espera .est-espera__ic i, .est-espera .est-espera__ic svg { animation: none; }
}

/* ------------------------------------------------- Resultado del botón --- */
/* Se queda en pantalla, no es un toast. El mensaje ES la instrucción que le
   falta —«cierra sesión en Adobe y vuelve a entrar»— y tiene que poder leerlo
   mientras la hace. */
.est-listo {
  --lt: var(--success);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-radius: var(--r);
  border: 1px solid color-mix(in oklab, var(--lt) 32%, transparent);
  background: color-mix(in oklab, var(--lt) 11%, transparent);
  padding: 0.95rem 1rem;
}
.est-listo.is-mal { --lt: var(--danger); }
.est-listo__ic { flex: none; display: grid; place-items: center; color: var(--lt); margin-top: 0.1rem; }
.est-listo p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink-strong);
}
.est-listo__wa { justify-self: start; margin-top: 0.1rem; }

/* ------------------------------------------- Pie de todo el resultado --- */
/* «Copiar mi enlace» es el mismo «Copy Link» que el dueño tiene en su panel,
   pero para el cliente: se lo guarda en favoritos y la próxima vez entra sin
   escribir nada, que en un celular es la mitad del esfuerzo. */
.est-tras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
}

/* ---------------------------------------------------- Centro de ayuda --- */
/* Las tres preguntas que llegaban por WhatsApp todos los días. Están escritas
   como respuestas, no como enlaces a otra página: quien entra aquí ya está
   buscando y mandarlo a un tercer sitio es perderlo. */
.est-ayuda__pasos {
  margin: 0.25rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.est-ayuda__pasos b { color: var(--ink-strong); }

/* La coletilla de la tarjeta de la cuenta desactivada: la salida del que no
   tiene otro correo. Va en pequeño y al final porque es el último recurso, no
   lo primero que se ofrece. */
.est-ayuda__nota {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}


/* =============================================================================
   LIENZO NEGRO — el rediseño de /estado  (25-ago-2026, pedido del dueño)
   -----------------------------------------------------------------------------
   POR QUÉ. Esta página dejó de ser un folleto: es por donde pasa TODO el
   soporte. Quien entra aquí no viene a mirar bonito, viene con el Adobe caído y
   quiere dos cosas — saber si funciona y arreglarlo. El fondo de galaxia verde
   del login competía con lo único que importa, que es el color del estado: con
   verde detrás, un cuadro verde ya no destaca.

   LA IDEA. Negro de verdad (#000) y encima un PANEL DE DIAGNÓSTICO. La tarjeta
   se lee como el instrumento que es: lo que dice el proveedor va en
   monoespaciada —el equipo, el correo, los programas, la hora de la
   comprobación—, y lo que decimos nosotros va en la de siempre. Esa mezcla no es
   un adorno: separa el DATO de la EXPLICACIÓN, que es justo lo que el cliente
   confunde cuando discute con la pantalla.

   El verde se queda para una sola cosa: la señal. Estado activo, botón que
   arregla. Nada más se pinta de verde, para que cuando algo lo esté, se vea.

   Va al final del archivo a propósito: solo redefine los tokens y retoca lo que
   el lienzo negro cambia. Todo lo de arriba sigue mandando en su sitio.
   ============================================================================= */

/* Los tokens, solo en esta página. Como el resto del archivo está escrito con
   ellos (var(--surface), var(--border)…), cambiarlos aquí lo repinta todo sin
   tener que perseguir una por una las reglas de arriba. */
body:is([data-page="estado"],[data-page="mail"]) {
  --surface: #0a0b0a;          /* la tarjeta, levantada apenas del negro */
  --surface-2: #101311;        /* las casillas de dentro */
  --border: #1c211e;
  --border-strong: #2b322d;
  --shadow-lg: 0 24px 60px -40px #000;
  /* La monoespaciada ya venía cargada en el <head> y no la usaba nadie. Lleva
     detrás una pila con soporte de japonés: los equipos del proveedor se llaman
     日本ビジネスアート (株) y JetBrains Mono no tiene esos caracteres. */
  --est-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
              "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", monospace;
  background: #000;
}

/* Fuera la galaxia. El nebulón verde y las estrellas son del login; aquí lo que
   tiene que brillar es el estado del cliente. */
body:is([data-page="estado"],[data-page="mail"]) .auth-bg { display: none; }
body:is([data-page="estado"],[data-page="mail"]) .auth::before,
body:is([data-page="estado"],[data-page="mail"]) .auth::after { display: none; }
body:is([data-page="estado"],[data-page="mail"]) .auth { background: #000; }
/* La barra de arriba era un velo verde translúcido del login: sobre negro se
   veía como una mancha. Aquí es negra y se separa con una raya, no con color. */
body:is([data-page="estado"],[data-page="mail"]) .auth-bar {
  background: color-mix(in srgb, #000 72%, transparent);
  border-bottom: 1px solid var(--border);
}

/* EL ICONO DEL PRODUCTO, CON PINTA DE APP. Cuadrado con las esquinas del
   tamaño que usa un icono de celular, un filo finísimo para que no se funda con
   el negro cuando la imagen trae fondo oscuro, y una sombra corta que lo despega
   de la tarjeta. Es lo primero que se ve al abrir el resultado. */
body:is([data-page="estado"],[data-page="mail"]) .est-card__img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 24%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f1210;
  box-shadow: 0 6px 16px -8px #000;
}
@media (max-width: 30rem) {
  body:is([data-page="estado"],[data-page="mail"]) .est-card__img { width: 2.75rem; height: 2.75rem; }
}

/* ------------------------------------------------------------- Cabecera --- */
/* El logo pierde el halo: sobre negro, un resplandor verde es una mancha. Queda
   la caja, con su filo justo. */
body:is([data-page="estado"],[data-page="mail"]) .est-logo {
  /* En bloque y centrado: como venía (inline-grid), el rótulo de debajo se le
     ponía al lado en la misma línea en vez de debajo. */
  display: grid;
  margin-inline: auto;
  background: #0a0b0a;
  border-color: var(--border-strong);
  box-shadow: none;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.1rem;
}
body:is([data-page="estado"],[data-page="mail"]) .est-logo img { width: 2rem; height: 2rem; }

/* EL RÓTULO DE ENCIMA DEL TÍTULO. Dice de qué va la página antes de leer nada, y
   en la misma monoespaciada que los datos: es la primera pista de que esto es un
   tablero en vivo y no una página de venta. */
.est-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--est-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.75rem;
  margin-bottom: 1rem;
}
.est-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  animation: est-late 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .est-eyebrow::before { animation: none; } }

body:is([data-page="estado"],[data-page="mail"]) .est-head h1 { letter-spacing: -0.035em; }

/* --------------------------------------------------------- Caja y campos --- */
body:is([data-page="estado"],[data-page="mail"]) .est-box {
  background: #08090800;
  background-color: #090a09;
  border-color: var(--border);
  backdrop-filter: none;   /* sobre negro no desenfoca nada: solo cuesta pintura */
}
body:is([data-page="estado"],[data-page="mail"]) .auth .input {
  background: #0f1210;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
}
body:is([data-page="estado"],[data-page="mail"]) .auth .input:hover { background: #131714; }
body:is([data-page="estado"],[data-page="mail"]) .auth .input:focus { background: #131714; border-color: var(--brand); }

/* ------------------------------------------------------------- Tarjetas --- */
/* El filo de color pasa de la izquierda ARRIBA y a todo lo ancho. Es la lectura
   del instrumento: lo primero que se ve al bajar es una franja verde o roja, sin
   haber leído una palabra. */
body:is([data-page="estado"],[data-page="mail"]) .est-card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow-lg);
  /* La tarjeta se mide a sí misma: lo de dentro se reordena por el ancho que
     tiene ella, no por el de la pantalla. */
  container-type: inline-size;
}
body:is([data-page="estado"],[data-page="mail"]) .est-card::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg,
    var(--est-c, var(--brand)),
    color-mix(in oklab, var(--est-c, var(--brand)) 30%, transparent) 60%,
    transparent);
}

/* Los DATOS del proveedor, en monoespaciada. El equipo, los días, las fechas:
   son lecturas, no frases. */
body:is([data-page="estado"],[data-page="mail"]) .est-datos > div {
  background: var(--surface-2);
  border-color: var(--border);
}
body:is([data-page="estado"],[data-page="mail"]) .est-datos dt {
  font-family: var(--est-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
body:is([data-page="estado"],[data-page="mail"]) .est-datos dd {
  font-family: var(--est-mono);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Los programas asignados: fichas de dato, no etiquetas de marketing. */
body:is([data-page="estado"],[data-page="mail"]) .est-pill {
  font-family: var(--est-mono);
  font-size: 0.76rem;
  font-weight: 400;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink-body);
}
body:is([data-page="estado"],[data-page="mail"]) .est-progs__ttl {
  font-family: var(--est-mono);
  letter-spacing: 0.12em;
}

/* EL PARTE DEL EQUIPO. Sobre negro no hace falta teñir la caja entera: basta un
   filo del color del estado a la izquierda y el nombre del equipo en
   monoespaciada. Menos pintura, más señal. */
body:is([data-page="estado"],[data-page="mail"]) .est-equipo {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--eq);
}
body:is([data-page="estado"],[data-page="mail"]) .est-equipo__top strong { font-family: var(--est-mono); font-weight: 500; }
body:is([data-page="estado"],[data-page="mail"]) .est-equipo__tag { font-family: var(--est-mono); font-weight: 500; }
body:is([data-page="estado"],[data-page="mail"]) .est-equipo__pie { font-family: var(--est-mono); font-size: 0.68rem; letter-spacing: 0.04em; }

/* ------------------------------------------------- Zona de las dos puertas -- */
body:is([data-page="estado"],[data-page="mail"]) .est-auto {
  background: #070807;
  border-color: var(--border-strong);
  border-radius: 1rem;
}
body:is([data-page="estado"],[data-page="mail"]) .est-auto__ttl { font-family: var(--est-mono); letter-spacing: 0.12em; color: var(--ink-muted); }
body:is([data-page="estado"],[data-page="mail"]) .est-op {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: 0.9rem;
}
body:is([data-page="estado"],[data-page="mail"]) .est-op.is-destacada {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--border));
  background: color-mix(in oklab, var(--brand) 7%, var(--surface-2));
}

/* El botón que arregla: sigue siendo lo más brillante de la pantalla, que para
   eso está. Sobre negro se le baja el resplandor — sin fondo verde detrás, con
   menos ya destaca de sobra. */
body:is([data-page="estado"],[data-page="mail"]) .est-grande {
  border-radius: 0.85rem;
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--brand) 55%, transparent);
}
@keyframes est-latido {
  0%, 100% { box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--brand) 45%, transparent); }
  50%      { box-shadow: 0 8px 30px -6px color-mix(in oklab, var(--brand) 75%, transparent); }
}

/* La ficha de la transferencia y el campo del correo nuevo: datos, monoespaciada. */
body:is([data-page="estado"],[data-page="mail"]) .est-trans__ficha {
  background: var(--surface-2);
  border-color: var(--border);
}
body:is([data-page="estado"],[data-page="mail"]) .est-trans__ficha span { font-family: var(--est-mono); letter-spacing: 0.1em; }
body:is([data-page="estado"],[data-page="mail"]) .est-trans__ficha b { font-family: var(--est-mono); font-weight: 500; }
body:is([data-page="estado"],[data-page="mail"]) .est-trans__mail,
body:is([data-page="estado"],[data-page="mail"]) .est-trans__sel {
  font-family: var(--est-mono);
  font-weight: 500;
  background: #0f1210;
  border-color: var(--border-strong);
}
body:is([data-page="estado"],[data-page="mail"]) .est-trans__lbl { font-family: var(--est-mono); letter-spacing: 0.1em; }
body:is([data-page="estado"],[data-page="mail"]) .est-trans__prod {
  background: var(--surface-2);
  border-color: var(--border);
  font-family: var(--est-mono);
  font-weight: 400;
}

/* ------------------------------------------------- Ayuda, vacío y pie ------ */
body:is([data-page="estado"],[data-page="mail"]) .est-ayuda__card {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 1rem;
}
body:is([data-page="estado"],[data-page="mail"]) .est-ayuda__ic { background: var(--surface-2); border: 1px solid var(--border); }
body:is([data-page="estado"],[data-page="mail"]) .est-ayuda__tag { font-family: var(--est-mono); letter-spacing: 0.12em; }
body:is([data-page="estado"],[data-page="mail"]) .est-vacio { background: var(--surface); border-color: var(--border); border-radius: 1.15rem; }
body:is([data-page="estado"],[data-page="mail"]) .est-vacio__ic { background: var(--surface-2); border: 1px solid var(--border); }
body:is([data-page="estado"],[data-page="mail"]) .est-help { background: #0b0d0b; border-color: var(--border); }

/* =============================================================================
   QUE ENTRE EN CUALQUIER CELULAR
   -----------------------------------------------------------------------------
   Casi todo el soporte se atiende desde el teléfono, y de los baratos: pantallas
   de 320 px, la letra del sistema al 130 % y nombres de equipo japoneses que no
   parten por ningún sitio. Estas reglas son las que evitan que algo de eso
   rompa la página.
   ============================================================================= */

/* Nada puede desbordar a lo ancho. Un correo largo o un nombre de equipo sin
   espacios sacaba una barra horizontal y descuadraba la página entera. */
body:is([data-page="estado"],[data-page="mail"]) { overflow-x: hidden; }
.est-main { padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.est-main :is(h1, h2, h3, p, b, dd, span, li) { overflow-wrap: anywhere; }

/* La tarjeta se ordena por SU ancho, no por el de la pantalla: así se ve igual
   de bien aquí que el día que se ponga en dos columnas. */
@container (max-width: 26rem) {
  .est-datos { grid-template-columns: 1fr; }
  .est-card__acc { display: grid; }
  .est-card__acc .btn { width: 100%; justify-content: center; }
}

/* CON SITIO, LAS DOS PUERTAS UNA AL LADO DE LA OTRA. En el celular van una
   debajo de otra —no hay más remedio— pero en pantalla ancha, apiladas, la
   segunda queda por debajo del pliegue y el cliente con la cuenta desactivada no
   la ve. Lado a lado se comparan de un vistazo, que es justo lo que necesita:
   elegir cuál de las dos le está pasando.
   Va con @container y no con @media a propósito: la tarjeta se mide a sí misma,
   así que esto sigue funcionando el día que se ponga en una columna estrecha. */
@container (min-width: 34rem) {
  .est-opciones { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .est-op {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 1rem;
  }
  /* El icono pasa a estar encima del título: en vertical la fila de icono y
     texto desperdicia media tarjeta. */
  .est-op__ic { margin-bottom: 0.5rem; }
  .est-op__txt { width: 100%; }
  /* El botón, pegado abajo en las dos: con textos de distinto largo, uno más
     alto que el otro se lee como un descuido. */
  .est-op__btn { margin-top: auto; width: 100%; }
}

/* Y con sitio de sobra, un poco más de aire dentro de la tarjeta. */
@container (min-width: 40rem) {
  .est-card { padding: 1.6rem; }
  .est-auto { padding: 1.15rem; }
}

/* Dedos, no ratones: nada por debajo de 44 px de alto. */
body:is([data-page="estado"],[data-page="mail"]) :is(.btn, .est-help, .est-link, .est-trans__sel, .est-trans__mail, .est-op__btn) {
  min-height: 44px;
}
body:is([data-page="estado"],[data-page="mail"]) .est-trans__prod { min-height: 44px; }

@media (max-width: 30rem) {
  /* En pantalla estrecha el título del producto y su estado se apilan: en una
     fila, «Adobe Creative Cloud» + la pastilla dejaban el nombre en tres
     renglones de dos letras. */
  .est-card__top { gap: 0.7rem; }
  .est-card__ic img, .est-card__ic svg { width: 2.4rem; height: 2.4rem; }
  .est-card__ttl h3 { font-size: 1.05rem; }

  /* La caja de la consulta pegada a los bordes se lee mejor que un margen
     grande: en 320 px cada milímetro es texto. */
  .est-box { padding: 1rem 0.9rem; }
  .est-card { padding: 1rem 0.9rem; }
  .est-auto { padding: 0.85rem 0.75rem; }
  .est-op { padding: 0.8rem 0.8rem; }

  /* Los dos botones de abajo, uno por línea y a todo lo ancho. Medio botón
     cortado invita a no pulsarlo. */
  .est-card__acc { display: grid; gap: 0.5rem; }
  .est-card__acc .btn { width: 100%; justify-content: center; }

  .est-eyebrow { font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* Pantallas MUY estrechas (320 px con la letra grande): se aprieta lo justo. */
@media (max-width: 22.5rem) {
  .est-head h1 { font-size: 1.6rem; }
  .est-head p { font-size: 0.94rem; }
  .est-datos dd { font-size: 0.9rem; }
  .est-grande { font-size: 0.95rem; padding: 0.95rem 0.8rem; }
  .est-trans__ficha { padding: 0.65rem 0.7rem; }
}

/* El teclado del móvil tapa media pantalla: el campo del correo nuevo se
   desplaza solo para quedar a la vista al enfocarlo. */
.est-trans__mail { scroll-margin-block: 6rem; }

/* Y abajo, el hueco de la barra de gestos del iPhone y de los Android nuevos. */
body:is([data-page="estado"],[data-page="mail"]) .est-foot { padding-bottom: env(safe-area-inset-bottom); }


/* =============================================================================
   LA BANDEJA DEL CORREO QUE LE DIMOS  (/mail, 27-ago-2026, dueño)
   -----------------------------------------------------------------------------
   Comparte todo con /estado —la barra, el lienzo negro, la caja de consulta y
   el centro de ayuda— porque es la misma casa y el mismo cliente. Lo único
   propio es esto: EL CÓDIGO.

   Y el código se pinta como un cartel, no como un dato dentro de una ficha. El
   cliente llega aquí con la pantalla de Adobe abierta al lado, casi siempre en
   un celular y casi siempre apurado: tiene que ver seis dígitos enormes y un
   botón de copiar, y nada más. Todo lo demás de esta página está por debajo de
   eso a propósito.

   VENCIDO NO SE ESCONDE. Un código de Adobe muere en minutos, y el que llega
   tarde necesita entender POR QUÉ no le entró — si aquí no saliera nada,
   pensaría que el correo no funciona y volvería al chat. Sale tachado y en gris,
   con el paso siguiente escrito debajo.
   ============================================================================= */
.mail-codigo {
  text-align: center;
  background: color-mix(in oklab, var(--brand) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.25rem) clamp(1.1rem, 0.9rem + 1.5vw, 2rem);
  box-shadow: 0 18px 50px color-mix(in oklab, var(--brand) 18%, transparent);
}
.mail-codigo__tag {
  display: inline-block;
  font-family: var(--est-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
/* El dato, en monoespaciada y con los dígitos separados: es un número que se
   copia a mano tanto como se pulsa el botón, y en la tipografía de texto un 1 y
   una l se confunden justo cuando no se puede fallar. */
.mail-codigo__n {
  display: block;
  font-family: var(--est-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.12em;
  /* El espaciado empuja el número medio dígito a la izquierda: se compensa para
     que quede centrado de verdad. */
  text-indent: 0.12em;
  color: var(--ink-strong);
  margin: 0 0 0.6rem;
  overflow-wrap: anywhere;
}
.mail-codigo__cuando {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 1.15rem;
}
.mail-codigo__nota {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.mail-codigo__nota b { color: var(--ink-strong); }

/* Vencido: se apaga entero. Sin verde, sin sombra y con el número tachado — no
   hace falta leer nada para saber que ese ya no sirve. */
.mail-codigo.is-vencido {
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border-color: var(--border);
  box-shadow: none;
}
.mail-codigo.is-vencido .mail-codigo__tag { color: var(--ink-muted); }
.mail-codigo.is-vencido .mail-codigo__n {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 0.06em;
}
.mail-codigo.is-vencido .btn { margin-top: 0.9rem; }

/* Los de antes. Pequeños y en fila: existen solo para el que pidió el código
   dos veces y no sabe cuál pegó. */
.mail-antes {
  margin-top: 1.1rem;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
}
.mail-antes__t {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.mail-antes__i {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.mail-antes__i:first-of-type { border-top: 0; }
.mail-antes__i b {
  font-family: var(--est-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.mail-antes__i span { font-size: 0.82rem; color: var(--ink-muted); }

/* -------------------------------------------------- Todavía no ha llegado ---
   La pantalla que más se ve, porque el cliente entra aquí ANTES de pedirle el
   código a Adobe. Por eso no dice «no hay nada»: dice qué le falta hacer. */
.mail-espera {
  text-align: center;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.5rem) clamp(1.1rem, 0.9rem + 1.5vw, 2rem);
}
.mail-espera__ic {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r);
  background: color-mix(in oklab, var(--brand) 13%, transparent);
  color: var(--brand);
  margin-bottom: 0.95rem;
}
/* Gira mientras espera: es la señal de que la página sigue mirando sola y de
   que no hace falta recargar nada. */
.mail-espera__ic i, .mail-espera__ic svg { animation: est-giro 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mail-espera__ic i, .mail-espera__ic svg { animation: none; }
}
.mail-espera h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.mail-espera p { color: var(--ink-muted); font-size: 0.96rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.mail-espera__pasos {
  text-align: left;
  margin: 1.1rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.mail-espera__pasos b { color: var(--ink-strong); }
.mail-espera__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
}

/* En el lienzo negro las cajas van opacas, igual que las de /estado. */
body:is([data-page="estado"],[data-page="mail"]) .mail-espera,
body:is([data-page="estado"],[data-page="mail"]) .mail-antes {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 1.15rem;
}
body:is([data-page="estado"],[data-page="mail"]) .mail-espera__ic {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* 320 px: el número entero tiene que caber en una línea. */
@media (max-width: 22.5rem) {
  .mail-codigo__n { font-size: 2.35rem; letter-spacing: 0.08em; text-indent: 0.08em; }
  .mail-espera__acciones .btn { width: 100%; justify-content: center; }
}

/* Y abajo, el hueco de la barra de gestos del iPhone y de los Android nuevos. */
body[data-page="mail"] .est-foot { padding-bottom: env(safe-area-inset-bottom); }

/* ------------------------------------------------------- La bandeja real ---
   Los correos guardados (27-ago-2026). Va DEBAJO del código y en gris: el
   código es lo urgente y no puede competir con una lista. Cada correo es un
   botón que se despliega; cerrado ocupa dos renglones, que es lo que cabe en
   un móvil sin empujar el código fuera de la pantalla. */
.mail-buzon {
  margin-top: 1.1rem;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
}
.mail-buzon__t {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.mail-buzon__nota {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.mail-msg { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.mail-msg:first-of-type { border-top: 0; }

.mail-msg__cab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.55rem 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.mail-msg__cab:hover .mail-msg__asunto { color: var(--ink-strong); }
.mail-msg__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.mail-msg__asunto {
  font-weight: 600;
  /* Un asunto largo no puede empujar la hora fuera de la tarjeta. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-msg__cuando {
  flex: none;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.mail-msg__de {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-msg__cuerpo pre {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.8rem;
  background: color-mix(in oklab, var(--surface) 45%, transparent);
  border-radius: calc(var(--r) * 0.6);
  /* El texto viene de un correo ajeno: se respeta como está pero se parte,
     porque un enlace largo desbordaría la página entera a lo ancho. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--est-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-height: 22rem;
  overflow-y: auto;
}

/* ------------------------------------------------- Bono: grupo de recursos --
   Va debajo de las licencias y se lee como un regalo, no como un trámite. El
   campo del @usuario solo aparece la primera vez: en cuanto lo da, esta misma
   tarjeta pasa a ser el botón de entrar al grupo. */
.est-bono {
  margin-top: 1rem;
  padding: clamp(1.05rem, 0.85rem + 1vw, 1.5rem);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--brand) 28%, var(--border));
  background: color-mix(in oklab, var(--brand) 6%, var(--surface));
}
.est-bono h3 {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
}
.est-bono h3 svg { width: 1.15rem; height: 1.15rem; color: var(--brand); }
.est-bono p { margin: 0 0 0.75rem; color: var(--ink-muted); font-size: 0.94rem; line-height: 1.55; }

.est-bono__fila { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.est-bono__fila .input { flex: 1 1 12rem; min-width: 0; }

.est-bono__nota { font-size: 0.86rem; color: var(--ink-faint, var(--ink-muted)); margin: 0.65rem 0 0 !important; }
.est-bono__err {
  margin: 0.6rem 0 0 !important;
  font-size: 0.88rem;
  color: var(--danger, oklch(0.58 0.2 25));
  font-weight: 600;
}