@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* =========================================================================
   Guía de diseño Midas — Inspección Vehicular (backoffice web)
   Fundaciones (color + tipografía) + barra superior + navegación + tablas.
   ========================================================================= */

:root {
    --miq-surface-dark: #0F131C;   /* superficie oscura del topbar/sidebar */
    --miq-line: #283142;           /* borde sobre oscuro */
    --miq-txt: #F4F7FB;            /* texto sobre oscuro */
    --miq-mut: #8A96AC;            /* texto tenue sobre oscuro */
    --miq-navy: #1352BB;           /* navy principal */
    --miq-mamey: #E85D04;          /* naranja acento (mamey) */
    --miq-mamey-light: #FF7B00;
}

/* ---- Tipografía de la guía ------------------------------------------------ */
.fi-body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* Superficie del backoffice (solo tema claro): contenido con gradiente azul
   claro y sidebar casi blanco, para que el sidebar se distinga del contenido. */
:root:not(.dark) .fi-body {
    background: linear-gradient(175deg, #e8f0f8, #f4f9ff);
    background-attachment: fixed;
}

:root:not(.dark) .fi-sidebar {
    background-color: #fbfcfe !important;
}

.fi-header-heading,
.fi-modal-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

.fi-header-heading {
    color: var(--miq-navy) !important;
}

/* «mono = dato»: el monoespaciado del panel usa IBM Plex Mono
   (placas, VIN, riesgo, IDs, timestamps), igual que el identificador del topbar. */
.fi-body .font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---- Barra superior oscura (topbar + cabecera del sidebar) ---------------- */
.fi-sidebar-header,
.fi-topbar nav {
    background-color: var(--miq-surface-dark) !important;
    border-bottom: 1px solid var(--miq-line) !important;
}

/* Contenido del topbar legible sobre oscuro */
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-dropdown-trigger,
.fi-topbar .fi-topbar-item {
    color: var(--miq-txt);
}

.fi-topbar .fi-global-search-field input {
    color: var(--miq-txt);
}

.fi-topbar .fi-global-search-field input::placeholder {
    color: var(--miq-mut);
}

/* ---- Divisor mamey + identificador del sistema ---------------------------- */
.miq-topbar-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 2px;
}

.miq-topbar-mamey {
    width: 3px;
    height: 30px;
    flex: none;
    border-radius: 2px;
    background-color: var(--miq-mamey);
}

.miq-topbar-id {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--miq-txt);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .miq-topbar-id { display: none; }
}

/* ---- Clúster de usuario (derecha): separador + avatar navy + nombre/rol + chevron */
.fi-topbar .fi-user-menu .fi-avatar,
.fi-topbar .fi-user-menu img {
    width: 34px;
    height: 34px;
}

.miq-user-sep {
    width: 1px;
    height: 26px;
    flex: none;
    align-self: center;
    background-color: var(--miq-line);
    margin: 0 6px 0 4px;
}

.miq-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 9px;
    cursor: pointer;
}

.miq-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.miq-user-name {
    font: 600 12.5px 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--miq-txt);
    white-space: nowrap;
}

.miq-user-role {
    font: 500 10.5px 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--miq-mut);
    white-space: nowrap;
}

.miq-user-caret {
    color: var(--miq-mut);
    font-size: 11px;
}

@media (max-width: 640px) {
    .miq-user-chip, .miq-user-sep { display: none; }
}

/* ---- Tablas e infolists --------------------------------------------------- */
/* Cabeceras de columna en mono mayúsculas muted (bandeja de inspecciones). */
.fi-ta-header-cell,
.fi-ta-header-cell span {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8A96AC;
}

/* Etiquetas del infolist (revisión de inspección) en mono mayúsculas muted. */
.fi-in-entry-wrp-label,
.fi-in-entry-wrp-label > * {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9AA6BA !important;
}

/* ---- Componentes ---------------------------------------------------------- */
.fi-btn {
    border-radius: 10px;
}

.fi-breadcrumbs-item-label,
.fi-breadcrumbs-item-separator {
    color: #5c6b82 !important;
}

/* Ítem de navegación activo: relleno navy suave + barra mamey a la izquierda
   (el naranja es solo el acento lateral; el relleno y el ícono van en navy). */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(19, 82, 187, 0.04), rgba(19, 82, 187, 0.13)) !important;
    border-left: 3px solid var(--miq-mamey) !important;
    border-radius: 8px !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--miq-navy) !important;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 600;
    color: #424962 !important;
    font-size: 2.2em;
}