/*
 * Superficie de marca (login, inicio y tests del facilitador): identidad propia con los colores
 * del logo de Biblyo. Sigue el tema: claro por defecto y oscuro con el switch. Sus tokens están en
 * tokens.css (bloque "Superficie de marca") y solo valen dentro de .brand-surface.
 */

/* Los componentes compartidos (campo, aviso, foco) toman los valores de la superficie. */
.brand-surface {
  --color-text: var(--brand-text);
  --color-text-muted: var(--brand-placeholder);
  --color-surface: var(--brand-elevated);
  --color-border: var(--brand-field-border);
  --color-focus: var(--brand-sky);
  --color-selection: var(--brand-selection);
  --color-error: var(--brand-error);
  --radius-field: var(--brand-radius-field);
  --icon-stroke: 1.5;
}

/* Fondo de la superficie a pantalla completa, con un resplandor de marca al pie. */
.brand-surface {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  background:
    radial-gradient(ellipse 90% 34% at 50% 100%, var(--brand-glow), transparent 72%),
    var(--brand-bg);
  color: var(--brand-text);
  caret-color: var(--brand-sky);
}

/* Switch de tema del login (que no tiene encabezado): centrado arriba, en el espacio libre entre
 * los arcos de las dos esquinas. En el inicio y en los tests va en el encabezado, junto al avatar
 * (view-transition-name theme-toggle: se desliza de un lugar al otro). */
.brand-surface__theme {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------
 * Formularios sobre la superficie (login, registro, diálogo del evento): fondo de campo, foco
 * azul con brillo y error de marca. Valen para cualquier campo de components.css.
 * ------------------------------------------------------------------ */
.brand-surface .field__label {
  color: var(--brand-text);
}

.brand-surface .field__control,
.brand-surface .phone-input {
  background: var(--brand-field-bg);
}

.brand-surface .field__control::placeholder,
.brand-surface .phone-input__number::placeholder {
  color: var(--brand-placeholder);
}

/* Foco: borde azul de 2 px con un brillo suave. */
.brand-surface .field__control:focus,
.brand-surface .phone-input:focus-within {
  border-color: var(--brand-sky);
  box-shadow:
    inset 0 0 0 1px var(--brand-sky),
    0 0 0 3px var(--brand-sky-halo),
    0 0 18px var(--brand-sky-glow);
}

.brand-surface .field__control[aria-invalid="true"]:focus,
.brand-surface .phone-input:has([aria-invalid="true"]):focus-within {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
}

/* Relleno automático del navegador: conserva el fondo y el texto de la vista. */
.brand-surface .field__control:autofill,
.brand-surface .phone-input__number:autofill {
  -webkit-text-fill-color: var(--brand-text);
  transition: background-color 600000s 0s, color 600000s 0s;
}

.brand-surface .phone-input__prefix .icon {
  color: var(--brand-text-muted);
}

/* Casilla: marcada, se llena con el degradado de marca. */
.brand-surface .checkbox-row {
  color: var(--brand-text-muted);
}

.brand-surface .checkbox {
  border-color: var(--brand-field-border);
  background: var(--brand-field-bg);
  color: var(--brand-on-gradient);
}

.brand-surface .checkbox:has(:checked) {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-magenta), var(--brand-violet) 55%, var(--brand-blue));
}

.brand-surface .checkbox:has([aria-invalid="true"]):not(:has(:checked)) {
  border-color: var(--color-error);
}

.brand-surface .link-button {
  color: var(--brand-text);
}

/* ------------------------------------------------------------------
 * Barra de progreso: el relleno es el degradado de marca a lo ancho del riel completo
 * (--progress, en %: el color avanza con el progreso).
 * ------------------------------------------------------------------ */
.brand-surface .progress-bar {
  background: var(--brand-glass-border);
}

.brand-surface .progress-bar__fill {
  background: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet) 40%, var(--brand-blue) 75%, var(--brand-sky));
  background-size: calc(10000% / var(--progress, 100)) 100%;
}

.brand-surface .step-count {
  color: var(--brand-text-muted);
}

/* ------------------------------------------------------------------
 * Columna de las pantallas del participante con aros y cinta (bienvenida y registro): debajo de
 * los arcos de las esquinas y con la franja de la cinta reservada al final.
 * ------------------------------------------------------------------ */
.brand-column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  min-height: 100dvh;
  margin-inline: auto;
  /* Debajo de los arcos (96 px) y del switch centrado entre ellos. */
  padding-top: max(76px, calc(env(safe-area-inset-top) + var(--space-12)));
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Franja de la cinta: el contenido nunca queda debajo de ella. */
.brand-ribbon-space {
  flex: 0 0 var(--decor-ribbon-zone);
}