/* MaVu — línea gráfica global (tema + MudBlazor).
   Cambia el aspecto de TODAS las pantallas sin editarlas: solo selectores de MudBlazor y variables del tema.
   Los colores salen de la paleta del tema (--mud-palette-*), así sirven igual en modo claro y oscuro. */

:root {
    --mavu-font-heading: 'Bricolage Grotesque', 'Figtree', 'Helvetica Neue', sans-serif;
    --mavu-font-body: 'Figtree', 'Helvetica Neue', Helvetica, sans-serif;
    --mavu-font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
    --mavu-radius: 10px;
    --mavu-radius-card: 14px;
    --mavu-touch: 44px;
}

body { font-family: var(--mavu-font-body); }

/* ── Botones: sin MAYÚSCULAS, peso 600, un botón principal que se note ── */
.mud-button-root { text-transform: none; font-weight: 600; letter-spacing: 0; border-radius: var(--mavu-radius); }
.mud-button-root.mud-button { min-height: 40px; }
.mud-button-filled { box-shadow: none; }
.mud-button-filled:hover { box-shadow: none; filter: brightness(1.08); }
/* El botón de acento (naranja, p. ej. «Recargar») ya no compite con el principal: queda en contorno. */
.mud-button-filled.mud-button-filled-secondary {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1.5px solid var(--mud-palette-secondary);
}
.mud-button-filled.mud-button-filled-secondary:hover { background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent); filter: none; }
.mud-icon-button { border-radius: var(--mavu-radius); }

/* ── Texto de ayuda: gris, no naranja (varias pantallas usan Color.Secondary en MudText) ── */
.mud-typography.mud-secondary-text { color: var(--mud-palette-text-secondary); }

/* ── Títulos y cifras ── */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--mavu-font-heading); }
.mud-table-cell, .mud-input-slot, .mud-typography-caption { font-variant-numeric: tabular-nums; }

/* ── Tarjetas y papeles: borde fino en lugar de sombra pesada ── */
.mud-card, .mud-paper.mud-elevation-1, .mud-paper.mud-elevation-2, .mud-paper.mud-elevation-3, .mud-paper.mud-elevation-4 {
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}
.mud-card { border-radius: var(--mavu-radius-card); }
.mud-dialog { border-radius: 16px; }

/* ── Tablas ── */
.mud-table { border-radius: var(--mavu-radius-card); }
.mud-table-head .mud-table-cell {
    font-weight: 600; font-size: .78rem; letter-spacing: .02em; text-transform: none;
    color: var(--mud-palette-text-secondary); background: transparent; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-table-body .mud-table-row:hover { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.mud-table-cell { border-bottom: 1px solid var(--mud-palette-table-lines); }

/* ── Campos: borde más legible, error con borde grueso ── */
.mud-input-outlined .mud-input-outlined-border { border-width: 1.5px; border-color: var(--mud-palette-lines-inputs); border-radius: var(--mavu-radius); }
.mud-input-outlined.mud-input-error .mud-input-outlined-border { border-width: 2px; }
.mud-input-helper-text.mud-input-error { font-weight: 600; }

/* ── Etiquetas de estado (chips): forma y peso, no solo color ── */
.mud-chip { font-weight: 600; border-radius: 999px; }

/* ── Menú y barra lateral ── */
.mud-nav-link { border-radius: var(--mavu-radius); font-weight: 500; }
.mud-nav-link.active:not(.mud-nav-link-disabled) { font-weight: 600; }
.mud-drawer { border-right: 1px solid var(--mud-palette-lines-default); }

/* ── Móvil (≤ 600 px): objetivos táctiles de 44 px y campos de 52 px, sin desbordes ── */
@media (max-width: 600px) {
    html, body { overflow-x: hidden; }
    .mud-icon-button { min-width: var(--mavu-touch); min-height: var(--mavu-touch); }
    .mud-button-root.mud-button { min-height: var(--mavu-touch); }
    .mud-input-outlined .mud-input-slot { min-height: 52px; font-size: 16px; } /* 16 px evita el zoom automático de iOS */
    .mud-dialog { margin: 12px; max-width: calc(100vw - 24px); }
    .mud-dialog .mud-dialog-actions .mud-button-root { flex: 1; }
    .mud-table-container { overflow-x: auto; }
}