/* ============================================================
   SATI · UI "Cobre & Acero" — fuentes y detalles de marca (piloto).
   Las fuentes se fuerzan sobre las clases de MudBlazor (estable entre versiones).
   Space Grotesk = display · IBM Plex Sans = UI · IBM Plex Mono = datos.
   ============================================================ */

:root {
    --sati-cobre: #B45309;
    --sati-cobre-claro: #D97A3D;
    --sati-acero: #1B2430;
    --sati-acero-2: #2B3543;
}

/* Cuerpo / UI general → IBM Plex Sans */
body,
.mud-typography,
.mud-typography-body1, .mud-typography-body2,
.mud-typography-subtitle1, .mud-typography-subtitle2,
.mud-typography-button, .mud-typography-caption, .mud-typography-overline,
.mud-input, .mud-input-root, .mud-input-control, .mud-select,
.mud-button-root, .mud-nav-link, .mud-nav-link-text, .mud-list-item,
.mud-table, .mud-table-cell, .mud-chip, .mud-tooltip, .mud-menu-item {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important;
}

/* Títulos / display → Space Grotesk */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
h1, h2, h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    letter-spacing: -0.01em;
}

/* Datos numéricos (RUT, fechas, montos, contadores) → IBM Plex Mono */
.sati-mono, .sati-mono * {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-feature-settings: "tnum" 1;
}

/* Filete cobre bajo la topbar */
.mud-appbar {
    border-bottom: 2px solid var(--sati-cobre) !important;
}

/* Marca (wordmark) en la topbar */
.sati-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
}
.sati-brand .sati-brand-dot { color: var(--sati-cobre); }

/* Ítem de navegación activo: barra cobre a la izquierda */
.mud-nav-link.active {
    border-left: 3px solid var(--sati-cobre) !important;
    background: rgba(180, 83, 9, 0.12) !important;
    color: #FFFFFF !important;
}
.mud-nav-group .mud-nav-link.active { color: #FFFFFF !important; }

/* ============================================================
   Login — panel de marca (cobre/acero) + textura sutil
   ============================================================ */
.sati-login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 900px) {
    .sati-login-wrap { grid-template-columns: 1fr; }
    .sati-login-brand { display: none !important; }
}

.sati-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem;
    color: #F4EEE6;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(217,122,61,0.45), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(180,83,9,0.35), transparent 55%),
        linear-gradient(135deg, #14110E 0%, #1B2430 55%, #11161D 100%);
}
/* Trama de "acero" (líneas finas) sobre el panel */
.sati-login-brand::before {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 22px);
    pointer-events: none;
}
.sati-login-brand-mark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: 0.06em;
    position: relative;
}
.sati-login-brand-mark .dot { color: var(--sati-cobre-claro); }
.sati-login-brand-tagline {
    position: relative;
    max-width: 30ch;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #CBB9A6;
}
.sati-login-brand-foot {
    position: relative;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: #8A7E70;
    letter-spacing: 0.02em;
}
.sati-login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}
.sati-login-card { width: 100%; max-width: 380px; }

/* Form de login SSR (estático) — estilo Cobre & Acero sin componentes interactivos */
.sati-login-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--sati-acero);
}
.sati-login-sub { margin: 0 0 1.5rem; color: #6b7280; font-size: 0.95rem; }
.sati-login-fields { display: flex; flex-direction: column; }
.sati-login-label {
    font-size: 0.8rem; font-weight: 600; color: #475569;
    margin: 0.6rem 0 0.3rem; letter-spacing: 0.01em;
}
.sati-login-input {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #14110E;
    transition: border-color .15s, box-shadow .15s;
}
.sati-login-input:focus {
    outline: none;
    border-color: var(--sati-cobre);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15);
}
.sati-login-btn {
    margin-top: 1.4rem;
    padding: 0.75rem 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: var(--sati-cobre);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.sati-login-btn:hover { background: #9a4708; }
.sati-login-error {
    background: #fef2f2; color: #b91c1c;
    border: 1px solid #fecaca; border-radius: 8px;
    padding: 0.7rem 0.9rem; font-size: 0.9rem; margin-bottom: 1rem;
}
.sati-login-foot { margin-top: 1.4rem; font-size: 0.8rem; color: #94a3b8; }

/* Pequeño acento cobre como "chip" de sección */
.sati-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sati-cobre);
    border: 1px solid rgba(180,83,9,0.35);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}