/* ═══════════════════════════════════════════════════════════════════════════
   TUXORA — LAYER 3, WHAT MUDBLAZOR DOES NOT COVER

   This file used to hold a full set of component recipes: buttons, inputs,
   tables, alerts, pills. MudBlazor now provides all of those, and
   mudblazor-bridge.css makes them read our tokens — so keeping the recipes
   around would leave two visual systems fighting over the same elements, which
   is exactly what we avoided by not mixing in Tailwind.

   What remains is the handful of things MudBlazor has no opinion about: the
   brand block in the drawer, a couple of content utilities, and the framework's
   own error overlay.

   Same rule as before: every value comes from a semantic token. Not one
   hard-coded colour, radius or row height.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Drawer brand block ─────────────────────────────────────────────────────
   Sits above MudNavMenu. MudBlazor has no component for "who am I logged into",
   which is the first thing someone checks when they work across companies. */
.nav-brand {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.nav-brand .brand {
    display: block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-h3);
    letter-spacing: -.02em;
    color: var(--brand);
}

.nav-brand .company {
    display: block;
    margin-top: 2px;
    font-size: var(--text-caption);
    color: var(--ink-muted);
}

.nav-notice {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-small);
    color: var(--ink-muted);
}

/* ── Content ────────────────────────────────────────────────────────────── */

.content {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-10);
}

/* Marks work that is deliberately unfinished and visible in the UI, like the
   importer hint on the empty customers list. Italic and muted so it reads as a
   note rather than as a feature. */
.pending {
    font-style: italic;
    color: var(--ink-muted);
}

.total {
    color: var(--ink-muted);
}

/* R-04 — digits line up. Comparing misaligned amounts forces reading them one
   at a time. Applied through MudTd Class="num" and on plain figures. */
.num,
.tabular {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Blazor's error overlay ─────────────────────────────────────────────────
   Rendered by the framework outside the component tree, so MudBlazor never
   styles it. Left looking like the default, it is a grey bar that says nothing
   at the worst possible moment. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2000;
    padding: var(--sp-3) var(--sp-5);
    background: var(--warning-bg);
    color: var(--warning);
    border-top: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    box-shadow: var(--shadow-2);
    font-family: var(--font-ui);
    font-size: var(--text-small);
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: 600;
    margin-left: var(--sp-2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-3);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Campos de las páginas de cuenta
   ──────────────────────────────────────────────────────────────────────────

   Inputs NATIVOS y no MudTextField, y no es una preferencia estética.

   MudBlazor no emite el atributo `name` en sus inputs: sus componentes están
   pensados para render interactivo, donde el valor viaja por el circuito y no
   por un POST. Las páginas de cuenta son Static SSR obligatoriamente — hay que
   escribir una cookie — así que un submit real del navegador no manda nada y
   el login falla sin ningún error: el handler corre con los campos vacíos y
   responde "el correo o la contraseña no son correctos".

   InputText, InputCheckbox e InputSelect sí emiten `name`, derivado del modelo
   del EditForm. Estos estilos los dejan a tono con el resto usando los mismos
   tokens; el resto del chrome (MudPaper, MudAlert, MudButton) sigue siendo
   MudBlazor porque no participa del binding.
   ────────────────────────────────────────────────────────────────────────── */

.tux-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.tux-field > label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-secondary);
}

.tux-field > input,
.tux-field > select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.tux-field > input:focus-visible,
.tux-field > select:focus-visible {
    outline: none;
    border-color: var(--brand);

    /* El anillo va con box-shadow y no con outline: outline no sigue el
       border-radius en todos los navegadores, y un rectángulo alrededor de un
       campo redondeado se lee como un defecto. */
    box-shadow: 0 0 0 3px var(--brand-subtle);
}

.tux-field > input[aria-invalid="true"] {
    border-color: var(--danger);
}

.tux-field-inline {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-small);
}

.tux-validation {
    color: var(--danger);
    font-size: var(--text-small);
}

/* Renglón de permiso en la pantalla de roles: la casilla y, cuando corresponde,
   la marca de irreversible al lado. */
.tux-permission {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}