/* ══════════════════════════════════════════════════════════════════════════
   El portal de Authelia con la identidad de ONDA.

   Authelia NO admite CSS propio —sólo logo, favicon y manifest—, así que esta
   hoja se inyecta con sub_filter desde el proxy y se sirve del mismo origen,
   que es lo que exige su CSP (`style-src 'self'`).

   No define ni un color: todo sale de marca-onda.css, que a su vez sale del
   Manual de Identidad ONDA.

   ─── CÓMO SE CUMPLEN LAS REGLAS DEL MANUAL AQUÍ ─────────────────────────

   EL CIAN, dos apariciones como máximo por pantalla. En el login son:
       1. el botón de acción principal
       2. el anillo de foco del campo activo — y sólo hay uno a la vez
   Por eso el enlace del pie NO es cian: sería la tercera y el cian dejaría
   de señalar. Va en gris, que es lo que el manual pide para texto corrido.

   NADA ENTRA POR ESCALA. La tarjeta entra con 10 px de desplazamiento y
   opacidad, dentro del rango de 6 a 12 px de la regla 02. El `scale` del
   botón al pulsarlo tampoco existe: se resuelve con luminosidad.

   UNA SOLA CURVA, --ease-onda, en el 100% de las transiciones.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── base ──────────────────────────────────────── */
body {
  background: var(--sup-fondo) !important;
  color: var(--sup-texto) !important;
  font-family: var(--onda-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* El manual: 400 texto, 500 subtítulos, 600 títulos. */
h1, h2, h3, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: var(--onda-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--sup-texto) !important;
}
.MuiTypography-body1, .MuiTypography-body2, p, label, span {
  font-family: var(--onda-sans) !important;
}

/* ────────────────────── la tarjeta del login ───────────────────────────── */
.MuiPaper-root {
  background: var(--sup-superficie) !important;
  color: var(--sup-texto) !important;
  border: 1px solid var(--sup-borde) !important;
  border-radius: 14px !important;
  box-shadow: none !important;   /* el manual construye con borde, no sombra */
  background-image: none !important;
}

/* Entrada: desplazamiento y opacidad. NUNCA escala — regla 02. */
@keyframes onda-llega {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.MuiPaper-root {
  animation: onda-llega var(--dur-largo) var(--ease-onda) both;
}

/* ───────────────────────────── botones ─────────────────────────────────── */
.MuiButton-root {
  font-family: var(--onda-sans) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
  transition: background-color var(--dur-micro) var(--ease-onda),
              filter var(--dur-micro) var(--ease-onda),
              box-shadow var(--dur-medio) var(--ease-onda) !important;
}

/* APARICIÓN 1 DE 2 DEL CIAN: la acción principal. */
.MuiButton-containedPrimary {
  background: var(--sup-accion) !important;
  color: var(--onda-noche) !important;
  box-shadow: none !important;
}
.MuiButton-containedPrimary:hover { filter: brightness(1.12); }
/* Al pulsar NO se escala: se apaga. La regla 02 vale también para el press. */
.MuiButton-containedPrimary:active { filter: brightness(0.92); }

/* Secundarios y enlaces: gris. Si fueran cian serían la tercera aparición. */
.MuiButton-textPrimary, .MuiButton-outlined, .MuiLink-root, a {
  color: var(--sup-tenue) !important;
}
.MuiLink-root:hover, a:hover { color: var(--sup-texto) !important; }
.MuiButton-outlined { border-color: var(--sup-borde) !important; }

/* ───────────────────────────── campos ──────────────────────────────────── */
.MuiOutlinedInput-root {
  background: transparent !important;
  border-radius: 10px !important;
  font-family: var(--onda-sans) !important;
  transition: border-color var(--dur-micro) var(--ease-onda),
              box-shadow var(--dur-micro) var(--ease-onda) !important;
}
.MuiOutlinedInput-notchedOutline { border-color: var(--sup-borde) !important; }
.MuiInputBase-input { color: var(--sup-texto) !important; }
.MuiInputLabel-root { color: var(--sup-tenue) !important; }

/* APARICIÓN 2 DE 2: el campo activo. «Elemento activo» está en la lista del
   manual, y sólo puede haber uno enfocado a la vez. */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--sup-accion) !important;
  border-width: 1px !important;
}
.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sup-accion) 20%, transparent) !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--sup-accion) !important; }

/* ─────────────────────── el estado de llegada ──────────────────────────── */
/* «El estado final se marca con un halo que no se repite. Es el único momento
   en que el sistema celebra algo.» Halo de 7 px, una sola vez. */
@keyframes onda-halo {
  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--onda-cian) 55%, transparent); }
  to   { box-shadow: 0 0 0 7px color-mix(in oklab, var(--onda-cian) 0%, transparent); }
}
.MuiSvgIcon-colorSuccess, svg[data-testid="CheckCircleIcon"] {
  color: var(--onda-cian) !important;
  border-radius: 50%;
  animation: onda-halo var(--dur-largo) var(--ease-onda) 1 both;
}

/* ─────────────────────────── secundarios ───────────────────────────────── */
.MuiCheckbox-root { color: var(--sup-tenue) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--sup-accion) !important; }
.MuiAvatar-root { background: var(--sup-superficie) !important; color: var(--sup-tenue) !important; }
code, kbd, pre, .mono { font-family: var(--onda-mono) !important; }

/* El foco con teclado, que es lo que nadie mira y todos necesitan. */
:focus-visible {
  outline: 2px solid var(--sup-accion) !important;
  outline-offset: 2px !important;
}

/* Movimiento reducido: el manual pide detener, no acelerar. */
@media (prefers-reduced-motion: reduce) {
  .MuiPaper-root,
  .MuiSvgIcon-colorSuccess,
  svg[data-testid="CheckCircleIcon"] { animation: none !important; }
}