/* Portal del cliente — lo poco que el portal tiene de hoja propia (ola 4 de su
   revisión de UX, 2026-09-05). Las píldoras son `status-pill.css`, los vacíos
   `empty-state.css`, los tokens `tokens.css`; acá va sólo lo que ninguna de
   esas cubre.

   Escala tipográfica (semana 6): el título de cada pantalla toma sus pasos de
   `tokens.css` en vez de `text-xl md:text-2xl` (20/24 px a mano). Móvil primero:
   `heading` en el teléfono y `title` desde md, que es donde el título tiene aire.
   Ninguna otra hoja define la píldora (lo cuida `web-sistema-visual`). */
.cli-h1 {
  font-size: var(--cnb-fs-heading, 20px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .cli-h1 { font-size: var(--cnb-fs-title, 28px); }
}

/* Los vacíos del portal viven sobre la MARCA de la agencia, no sobre el púrpura
   del admin: `empty-state.css` pinta la acción con blanco fijo y el enlace con
   la marca cruda, y para un teal como `#0d9488` las dos cosas dan 3,74:1. Van
   por los derivados que `branding.js` calcula para que se lean (`--lp-brand-on`
   encima de la marca, `--lp-brand-ink` como texto). Esta hoja se enlaza después
   de `empty-state.css` a propósito: misma especificidad, gana la última.
   El enlace además toma el piso táctil de 24 px (`cliente-portal-tactil`):
   un texto de 13 px mide 20 de alto y en un teléfono no se toca. */
.adm-empty__action {
  background: var(--lp-brand, #0055A5);
  color: var(--lp-brand-on, #fff);
}
.adm-empty__action:focus-visible { outline-color: var(--lp-brand, #0055A5); }
.adm-empty__link {
  color: var(--lp-brand-ink, #0055A5);
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 2px 0;
}

/* La tarjeta del casillero (ola 6, tema oscuro). Era `bg-gradient-to-br
   from-blue-600 to-blue-800 text-white`, y en oscuro el espejo de familias de
   Tailwind da vuelta la rampa: blue-600 pasa a blue-300 y blue-800 a blue-100
   — texto blanco sobre celeste. La tarjeta es una SUPERFICIE fija por diseño,
   como el color de marca del header: azul profundo en los dos temas, con el
   blanco encima medido (5,17:1 sobre #2563EB, 8,72:1 sobre #1E40AF). Son los
   mismos dos hex de blue-600/800 en claro, así que en claro no cambia nada;
   van acá y no en un `style=` para que un guardián los pueda leer (L515). */
.cli-locker-card {
  background-image: linear-gradient(to bottom right, #2563EB, #1E40AF);
}

/* Velo claro ENCIMA de una superficie de color (la tarjeta de invitar, el
   header): era `bg-white/20`, y en oscuro `bg-white` sigue a la rampa —el
   modo de falla #2 de `web-tema-invariantes`, correcto para las tarjetas y
   equivocado acá—: el velo pasaba a ser 20 % de #0F1729 sobre la marca, o sea
   la OSCURECÍA, y la tinta encima caía a 3,5:1 (medido en la primera corrida
   en oscuro de la ola 6). Un velo que aclara es blanco en los dos temas, como
   `text-white`: por eso vive en esta hoja y no en una clase de Tailwind. */
.cli-glass { background-color: rgb(255 255 255 / .22); }
.cli-glass:hover { background-color: rgb(255 255 255 / .32); }
/* Sólo al pasar el mouse: los botones de idioma y la lupa del header. */
.cli-glass-hover:hover { background-color: rgb(255 255 255 / .22); }