/* ============================================================
   Site.css — Tema UFIX (tenant `ufix`, host ufix.vsj.es)
   ------------------------------------------------------------
   Identidad tomada de ufixapp.es (leída del sitio, no inventada):
   - Coral  (#FB4F5A) — color de marca. Hero a sangre, botones,
     "Existe y se llama Ufix". Es EL color.
   - Grafito (#1F2124) y Pizarra (#484A4A) — las dos tintas de la
     web: cuerpo y titulares de sección.
   - Roboto en 400/500/700/900. Botones pastilla (radio 100px).

   ── Reparto del color ───────────────────────────────────────
   El coral a sangre funciona en una portada que se mira treinta
   segundos. El interior de la aplicación se mira ocho horas, así
   que aquí va la misma proporción que sigue Validia en esta
   plataforma: ~70% grafito/neutros · ~25% superficies · ~5% coral.

   El coral queda para el CTA primario, el enlace, el foco y el
   ítem activo. La barra lateral va en Grafito — que es la tinta
   de la propia web de Ufix, no un color prestado.

   La PORTADA sí es coral a sangre, como el hero de ufixapp.es:
   la marca entra fuerte al abrir y luego deja trabajar.

   ── Estados semánticos ──────────────────────────────────────
   ⚠ Los estados NO usan el coral, y es deliberado: en este módulo
   el rojo ya significa "urgente / error / rechazado". Si el color
   de marca fuera el mismo que el de alarma, media pantalla
   parecería estar avisando de algo. El error va en Ladrillo
   (#B3261E), más oscuro y menos saturado, que se distingue del
   coral incluso de reojo.

   Contrato del tenant: TenantHelper.GetCssPath() resuelve el slug
   como la PRIMERA PARTE DEL HOST — ufix.vsj.es → `ufix` — y carga
   Styles/{slug}/Site.css encima de Styles/Layout.css. Las
   variables de este :root son las que consume Layout.css; los
   nombres --ux-* son internos de este fichero.

   ⚠ No confundir con Styles/ufix.css (sin carpeta), que es el CSS
   del MÓDULO Ufix dentro de la plataforma y se carga en todos los
   tenants. Este fichero viste al tenant; aquel viste unas
   pantallas concretas.

   Fecha: 2026-09-08
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Paleta de marca Ufix ── */
    /* El coral de marca, tal cual sale de ufixapp.es. Va en las
       superficies SIN texto pequeño encima: panel de la portada,
       filete del ítem activo, filo superior del KPI. */
    --ux-coral:       #FB4F5A;

    /* El mismo coral, más profundo, para TODO lo que es texto o
       lleva texto encima.
       ⚠ No es un capricho estético: blanco sobre #FB4F5A da 3.30:1 y
       #FB4F5A sobre blanco, 3.30:1 — por debajo del 4.5:1 que pide
       WCAG AA para texto normal. Un botón de marca ilegible no es de
       marca, es un botón malo. Con #C93F48 sube a 4.90:1 y el tono
       sigue leyéndose como el coral de Ufix. */
    --ux-coral-ink:   #C93F48;
    --ux-coral-hover: #B83A42;
    --ux-coral-dark:  #A6343B;
    --ux-coral-soft:  rgba(251,79,90,.10);

    --ux-grafito:   #1F2124;   /* sidebar y tinta principal */
    --ux-grafito-2: #2A2D31;   /* elevación dentro del sidebar */
    --ux-pizarra:   #484A4A;   /* titulares de sección en la web */
    --ux-texto:     #333333;   /* cuerpo */
    --ux-humo:      #6B7075;   /* texto secundario */
    --ux-gris:      #D5D8DC;
    --ux-linea:     #E4E6E8;
    --ux-paper:     #F6F7F8;   /* fondo del área de trabajo */
    --ux-nieve:     #FAFBFB;

    /* ── Estados semánticos ──
       Familia PROPIA, separada del coral a propósito (ver cabecera). */
    --st-solicitud:   #2D6E8E;   /* azul acero — en curso / informativo */
    --st-pendienteca: #E08A00;   /* ámbar — esperando a alguien */
    --st-aprobado:    #277653;   /* verde — conforme */
    --st-emitido:     #2E7450;   /* verde — hecho */
    --st-rechazado:   #B3261E;   /* ladrillo — NO es el coral */
    --st-revocado:    #606569;   /* gris — fuera de juego */

    /* Tints de los chips (fondos claros) */
    --st-tint-solicitud:   #E4EEF3;
    --st-tint-pendienteca: #FBF0DB;
    --st-tint-aprobado:    #E4F1EA;
    --st-tint-emitido:     #E8F2EC;
    --st-tint-rechazado:   #F8E5E3;
    --st-tint-revocado:    #ECEDEE;

    /* Ámbar oscurecido: el #E08A00 sobre su tint no llega a 4.5:1.
       Los verdes de arriba están oscurecidos por lo mismo — los
       tonos "bonitos" (#2E8B62, #3E9B6B) daban 3.62 y 3.00 sobre sus
       propios tints, que es un chip que no se lee. */
    --st-pendienteca-ink:  #9A5F00;

    /* ── Notificaciones gestionadas (bloque del dashboard) ──
       Alias de los --st-* de ESTE fichero, igual que en los demás
       tenants: cada uno hereda su propio re-tint sin hex que
       mantener. Las reglas .kpi-* / .dash-num-* que los consumen
       viven en Layout.css, compartido. */
    --nt-avisada:       var(--st-emitido);
    --nt-fallida:       var(--st-rechazado);
    --nt-pendiente:     var(--st-pendienteca);
    --nt-sinaviso:      var(--st-revocado);
    --nt-volumen:       var(--st-solicitud);
    --nt-pendiente-ink: var(--st-pendienteca-ink);

    --nt-tint-avisada:   var(--st-tint-emitido);
    --nt-tint-fallida:   var(--st-tint-rechazado);
    --nt-tint-pendiente: var(--st-tint-pendienteca);
    --nt-tint-sinaviso:  var(--st-tint-revocado);
    --nt-tint-volumen:   var(--st-tint-solicitud);

    /* ── Mapeo a las variables genéricas de Layout.css ── */
    --bg:        var(--ux-paper);
    --surface:   #ffffff;
    --surface2:  var(--ux-nieve);
    --border:    var(--ux-linea);
    --text:      var(--ux-grafito);
    --muted:     var(--ux-humo);

    /* Alias que consume el módulo Ufix (Styles/ufix.css). Sin esto
       cae a sus fallbacks grises y se ve como si no tuviera tema:
       son los mismos valores con los nombres que aquel usa. */
    --surface-alt: var(--ux-nieve);
    --text-muted:  var(--ux-humo);
    --accent-soft: var(--ux-coral-soft);

    --sidebar-bg:         var(--ux-grafito);
    --sidebar-bg-hover:   rgba(255,255,255,.06);
    --sidebar-text:       rgba(255,255,255,.74);
    --sidebar-text-muted: rgba(255,255,255,.55);
    --sidebar-active-bg:  rgba(255,255,255,.10);
    --sidebar-active-text:#ffffff;

    /* --accent lo consumen Layout.css y el módulo Ufix sin saber si
       lo van a usar como texto o como fondo. Apunta al coral SEGURO
       por eso: en la duda, que se lea. */
    --accent:       var(--ux-coral-ink);
    --accent-hover: var(--ux-coral-hover);

    --danger:  var(--st-rechazado);
    --success: var(--st-aprobado);
    --warning: var(--st-pendienteca);

    /* ── Sombras ── */
    --shadow-sm:  0 1px 2px rgba(31,33,36,.05);
    --shadow:     0 1px 3px rgba(31,33,36,.07), 0 1px 2px rgba(31,33,36,.04);
    --shadow-md:  0 4px 14px rgba(31,33,36,.10);
    --shadow-card:0 1px 2px rgba(31,33,36,.05);

    /* ── Forma ──
       Radios algo más generosos que en Validia: la web de Ufix usa
       pastilla pura en los botones y esquinas redondas por todas
       partes. Los controles NO llegan a pastilla —un input de 999px
       se lee como un buscador— pero sí los chips y el CTA. */
    --radius:      12px;
    --radius-sm:   10px;
    --radius-lg:   16px;
    --radius-pill: 999px;
    --r-card:      16px;
    --r-ctrl:      12px;
    --r-item:      10px;

    /* ── Alias del Site.css base ──────────────────────────────
       Los bloques que se copian del `Styles/Site.css` base (kebab,
       modales, cabecera del sidebar…) están escritos con los nombres
       `--vd-*` del tema Validia. En vez de re-traducir cada regla a
       mano —y equivocarse en una— se declaran aquí como alias de la
       paleta Ufix: copiar una mejora del base a este fichero vuelve a
       ser un copia-pega.

       Mismo criterio que `ivsign/Site.css` y `fettaf/Site.css`, que
       también conservan los nombres `--vd-*` con sus propios valores. */
    --vd-linea:    var(--ux-linea);
    --vd-pizarra:  var(--ux-humo);
    --vd-petroleo: var(--ux-coral-ink);
    --vd-pino:     var(--ux-texto);

    /* Los tres del ámbar los usa el base SIEMPRE con fallback a
       `--st-pendienteca*`, así que ya resolvían bien; se declaran
       igualmente para que la familia esté completa y una revisión de
       "variables usadas sin definir" salga limpia. */
    --vd-ambar:         var(--st-pendienteca);
    --vd-ambar-oscuro:  var(--st-pendienteca-ink);
    --vd-ambar-suave:   var(--st-tint-pendienteca);

    /* ── Layout ── */
    --navbar-h:            66px;
    --sidebar-w:           266px;
    --sidebar-w-collapsed: 72px;
    --sidebar-transition:  .25s ease;

    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Tipografía base ────────────────────────────────────────── */
body {
    background: var(--bg);
    color: var(--ux-texto);
    font-family: 'Roboto', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none;
}

/* Roboto Mono y no una monoespaciada cualquiera: comparte esqueleto
   con la Roboto del resto, así que un número en una tabla no parece
   pegado de otra aplicación. */
.mono, .text-mono, code, kbd, samp,
.grid-table td.mono,
.grid-table .col-numeric,
.kpi-label,
.sidebar-section-label,
.dash-num-solicitud, .dash-num-pendienteca, .dash-num-aprobado,
.dash-num-emitido, .dash-num-rechazado, .dash-num-revocado {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Navbar (topbar blanca, 66px, borde inferior) ───────────── */
.navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--ux-linea);
    box-shadow: none;
    padding: 0 24px;
}
.navbar-brand,
.navbar-brand:hover {
    color: var(--ux-grafito);
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    letter-spacing: -.02em;
}
.navbar-user      { color: var(--ux-humo); font-size: .85rem; }
.navbar-perfil    { color: var(--ux-humo); }
.navbar-perfil:hover { color: var(--ux-grafito); }

/* El avatar es de los pocos sitios del interior donde el coral sale
   a plena saturación: es pequeño, identifica a la persona y no
   compite con ningún estado. */
.navbar-avatar {
    background: var(--ux-coral-ink);
    color: #ffffff;
    font-weight: 700;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar a.logout,
.navbar-logout { color: var(--ux-humo); font-size: .82rem; }
.navbar a.logout:hover,
.navbar-logout:hover { color: var(--ux-grafito); }

.sidebar-toggle,
.sidebar-hamburger { color: var(--ux-humo); }
.sidebar-toggle:hover,
.sidebar-hamburger:hover { background: transparent; color: var(--ux-grafito); }

/* Buscador global de la navbar */
.navbar-search {
    background: var(--ux-paper);
    border: 1px solid var(--ux-linea);
    border-radius: var(--r-ctrl);
    height: 42px;
}
.navbar-search:focus-within {
    border-color: var(--ux-coral-ink);
    box-shadow: 0 0 0 3px var(--ux-coral-soft);
    background: #ffffff;
}
.navbar-search-input { color: var(--ux-grafito); }
.navbar-search-input::placeholder { color: var(--ux-humo); }

/* ── La barra superior sobra en escritorio ──────────────────── */
/*  En escritorio esa barra sólo contiene el avatar y el botón de
    salir: el hamburguesa está oculto fuera de móvil y el buscador
    global va Visible="false" salvo para quien tenga canReadRequests.
    66px de alto de los que casi todo es hueco, encima del contenido
    de todas las pantallas.

    Y lo que hay dentro es REDUNDANTE: la barra lateral ya tiene su
    sección "Cuenta" con "Mi perfil" y "Salir" — los mismos dos
    destinos. Ocultarla no quita nada, sólo deja de repetirlo.

    ⚠ Sólo por encima de 768px, que es el corte que usa Layout.css.
    En móvil la barra se queda: ahí vive el botón hamburguesa, que es
    la ÚNICA forma de abrir el menú, y el sidebar se posiciona
    respecto a ella (top: var(--navbar-h)).

    El min-height del shell se recalcula porque el suyo descuenta la
    altura de la navbar; sin esto, la barra lateral se quedaría 66px
    corta y dejaría una franja clara al pie. */
@media (min-width: 769px) {
    .navbar { display: none; }
    .layout-shell { min-height: 100vh; }
}

/* ── Sidebar (Grafito, 266px) ───────────────────────────────── */
.sidebar {
    background: var(--ux-grafito);
    border-right: none;
    box-shadow: none;
    padding-top: 22px;
}

.sidebar .navbar-brand,
.sidebar-brand,
.sidebar-logo-wrap {
    padding: 26px 24px 22px;
    background: transparent;
}
.sidebar .navbar-brand-logo,
.sidebar-brand-logo {
    height: 34px;
    width: auto;
    filter: none;
}

.sidebar-section-label {
    /* .55 y no .40: a 10px en versalitas, el .40 daba 3.76:1 sobre
       el grafito. */
    color: rgba(255,255,255,.55);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 18px 20px 8px;
}

.sidebar-nav { padding: 0 12px; }

.sidebar-link {
    color: rgba(255,255,255,.74);
    border-radius: var(--r-item);
    padding: 10px 12px;
    margin: 1px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.sidebar-link:hover {
    background: rgba(255,255,255,.06);
    color: #ffffff;
}

/* El activo: fondo levantado + filete coral a la izquierda. El
   filete es de los pocos coral del interior, y basta — teñir el
   fondo entero de coral haría que "dónde estoy" gritara más que
   cualquier aviso de la pantalla. */
.sidebar-link.active,
.sidebar-link[data-active="true"] {
    background: rgba(255,255,255,.10);
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ux-coral);
}
.sidebar-icon { opacity: .7; width: 19px; }
.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon { opacity: 1; }

/* "Salir": rosado apagado, no coral. Sobre grafito, el coral pleno
   competiría con el ítem activo y parecería la acción principal. */
.sidebar-link-danger,
.sidebar-link.sidebar-logout { color: #F2A6AB !important; }
.sidebar-link-danger:hover,
.sidebar-link.sidebar-logout:hover {
    color: #ffffff !important;
    background: rgba(242,166,171,.14);
}

/* ── El logo del tenant sobre fondo claro ───────────────────── */
/*  El platformlogo.png de Ufix es la versión del hero de la web:
    BLANCO puro con transparencia. En el sidebar (grafito) y en la
    portada (coral) va perfecto — y en esta navbar, que es blanca,
    sería sencillamente invisible.

    Se resuelve con un filtro y no pidiendo un segundo fichero
    porque el PNG es monocromo: `brightness(0)` lo lleva a negro
    respetando el trazo y la transparencia, y el .87 de opacidad
    deja exactamente el grafito de la marca (#1F2124 sobre blanco
    es negro al 87%). Un logo, dos fondos.

    Si algún día llega la versión en color, esta regla se borra y
    ya está: el resto del tema no depende de ella. */
.navbar .navbar-brand-logo {
    filter: brightness(0);
    opacity: .87;
}

/*  Red de seguridad: si el marcado llegara a anidar el brand del
    sidebar dentro de un contenedor .navbar, el filtro de arriba lo
    volvería negro sobre negro. Aquí se restaura. */
.sidebar .navbar-brand-logo,
.login-brand-logo img {
    filter: none;
    opacity: 1;
}

/* ── Contenido principal ────────────────────────────────────── */
.main-content { background: var(--ux-paper); }

/* ── Tarjetas ───────────────────────────────────────────────── */
.card, .dash-card, .confirm-card {
    background: var(--surface);
    border: 1px solid var(--ux-linea);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
}

/* ── Títulos ────────────────────────────────────────────────── */
/* Roboto 900 en el título de página: es el peso del hero de
   ufixapp.es, y es lo que hace que una pantalla de gestión se
   reconozca como de Ufix sin necesidad de pintarla de coral. */
.page-title {
    color: var(--ux-grafito);
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 33px;
    letter-spacing: -.025em;
    line-height: 1.15;
}
h2, .section-title {
    color: var(--ux-pizarra);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 15px;
}
.eyebrow, .kpi-label {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ux-humo);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-item        { color: var(--ux-coral-ink); }
a.breadcrumb-item:hover { color: var(--ux-coral-hover); }
.breadcrumb-active      { color: var(--ux-humo); }

/* ── Botones ────────────────────────────────────────────────── */
/* Pastilla, como en la web. El CTA primario es el único elemento
   del interior que va coral relleno: si hubiera dos, ninguno sería
   el principal. */
.btn-primary {
    background: var(--ux-coral-ink);
    border: none;
    color: #ffffff;
    font-weight: 700;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(201,63,72,.30);
    font-family: 'Roboto', sans-serif;
}
.btn-primary:hover {
    background: var(--ux-coral-hover);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(201,63,72,.38);
}
.btn-primary:active { background: var(--ux-coral-dark); color: #ffffff; }

/* El secundario invierte el patrón de la web: fondo blanco, texto y
   borde coral al pasar por encima. */
.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--ux-gris);
    color: var(--ux-grafito);
    font-weight: 500;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    font-family: 'Roboto', sans-serif;
}
.btn-secondary:hover {
    border-color: var(--ux-coral-ink);
    color: var(--ux-coral-ink);
    background: #ffffff;
}

/* Ladrillo, no coral: borrar algo no puede parecerse al botón de
   "guardar". */
.btn-danger {
    background: var(--st-rechazado);
    border-color: var(--st-rechazado);
    color: #ffffff;
    font-weight: 500;
    /* Alto y padding explícitos: con forma de pastilla, un botón sin
       ellos se encoge hasta parecer un chip al lado de los otros dos.
       En el tema anterior no hacían falta porque los radios eran
       pequeños y el desajuste no se notaba. */
    height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
}
.btn-danger:hover { background: #96201A; border-color: #96201A; }

/* ── Formularios / foco coral ───────────────────────────────── */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--ux-coral-ink);
    box-shadow: 0 0 0 3px var(--ux-coral-soft);
    outline: none;
}

/* ── Search bar ─────────────────────────────────────────────── */
.search-bar {
    background: var(--surface);
    border: 1px solid var(--ux-linea);
    border-radius: var(--r-card);
}
/*  ⚠ `input[type="date"]` va en la lista: los `TextMode="Date"` de
    ASP.NET generan ese tipo, y sin nombrarlo el navegador les pone su
    alto, su borde y su padding — quedan más bajos y estrechos que el
    desplegable de al lado, que es justo lo que se ve en Auditoría.
    Mismo tropiezo que ya documentó el tema de ivsign. */
.search-bar input[type="text"],
.search-bar input[type="date"],
.search-bar select {
    height: 44px;
    border-radius: var(--r-ctrl);
    border: 1px solid var(--ux-gris);
    background: var(--ux-paper);
    padding: 0 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ux-texto);
    box-sizing: border-box;
}
.search-bar input:focus,
.search-bar select:focus {
    background: #ffffff;
    border-color: var(--ux-coral-ink);
    outline: none;
}

/*  El icono del calendario nativo se pinta con currentColor y a plena
    opacidad llama más la atención que el propio dato. */
.search-bar input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
}
.search-bar input[type="date"]:hover::-webkit-calendar-picker-indicator,
.search-bar input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: .85;
}

/* ── Filter pills ───────────────────────────────────────────── */
.filter-pill {
    background: #ffffff;
    border: 1px solid var(--ux-gris);
    color: var(--ux-texto);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}
.filter-pill:hover {
    background: var(--ux-paper);
    border-color: var(--ux-coral-ink);
    color: var(--ux-coral-ink);
}
.filter-pill.active {
    background: var(--ux-coral-ink);
    border-color: var(--ux-coral-ink);
    color: #ffffff;
}

/* ── Tablas / grid ──────────────────────────────────────────── */
.grid-table thead th {
    background: var(--ux-paper);
    color: var(--ux-humo);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid var(--ux-linea);
}
.grid-table tbody tr { border-bottom: 1px solid #EFF1F2; }
.grid-table tbody tr:hover { background: var(--surface2); }

.grid-table td.mono,
.grid-table td.col-numeric,
.grid-table td.col-codigo {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 500;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/*  Fechas y horas en la rejilla — la clase que pone el marcado es
    `text-mono` (ItemStyle-CssClass en el BoundField), no `mono`.
    Layout.css le da `font-family: monospace` a secas, que en Edge es
    Courier New: junto a la Roboto del resto de la tabla se lee como
    pegado de otra aplicación, y a .78rem queda además suelto y
    desalineado.

    Se mantiene en monoespaciada a propósito —comparar dos marcas de
    tiempo es lo que se hace con ellas, y para eso los dígitos tienen
    que caer en columna— pero con la Roboto Mono del tema y el paso
    ajustado, para que "08/09/2026 14:56:02" se lea como UNA fecha y
    no como tres grupos sueltos. */
.grid-table td.text-mono,
.grid-table .text-mono {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 12.5px;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--ux-texto);
}
.grid-table td.col-codigo { text-align: left; color: var(--ux-coral-ink); }

/* ── KPI cards ──────────────────────────────────────────────── */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--ux-linea);
    border-radius: var(--r-card);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--ux-linea);
    transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.kpi-label {
    color: var(--ux-humo);
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.kpi-value {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* El KPI "total" lleva el coral: es el número que resume la
   pantalla, y el único de la fila que puede permitírselo. */
.kpi-total       { border-top-color: var(--ux-coral); }
.kpi-total       .kpi-value { color: var(--ux-grafito); }
.kpi-solicitud   { border-top-color: var(--st-solicitud); }
.kpi-solicitud   .kpi-value { color: var(--st-solicitud); }
.kpi-pendienteca { border-top-color: var(--st-pendienteca); }
.kpi-pendienteca .kpi-value { color: var(--st-pendienteca-ink); }
.kpi-aprobado    { border-top-color: var(--st-aprobado); }
.kpi-aprobado    .kpi-value { color: var(--st-aprobado); }
.kpi-emitido     { border-top-color: var(--st-emitido); }
.kpi-emitido     .kpi-value { color: var(--st-emitido); }
.kpi-rechazado   { border-top-color: var(--st-rechazado); }
.kpi-rechazado   .kpi-value { color: var(--st-rechazado); }
.kpi-revocado    { border-top-color: var(--st-revocado); }
.kpi-revocado    .kpi-value { color: var(--st-revocado); }

.dash-num-solicitud   { color: var(--st-solicitud); }
.dash-num-pendienteca { color: var(--st-pendienteca-ink); }
.dash-num-aprobado    { color: var(--st-aprobado); }
.dash-num-emitido     { color: var(--st-emitido); }
.dash-num-rechazado   { color: var(--st-rechazado); }
.dash-num-revocado    { color: var(--st-revocado); }

/* ── Badges de estado ───────────────────────────────────────── */
.badge-solicitud   { background: var(--st-tint-solicitud);   color: var(--st-solicitud); }
.badge-pendienteca { background: var(--st-tint-pendienteca); color: var(--st-pendienteca-ink); }
.badge-aprobado    { background: var(--st-tint-aprobado);    color: var(--st-aprobado); }
.badge-emitido     { background: var(--st-tint-emitido);     color: var(--st-emitido); }
.badge-rechazado   { background: var(--st-tint-rechazado);   color: var(--st-rechazado); }
.badge-revocado    { background: var(--st-tint-revocado);    color: var(--st-revocado); }

.badge-active   { background: var(--st-tint-emitido);  color: var(--st-emitido); }
.badge-inactive { background: var(--st-tint-revocado); color: var(--st-revocado); }

/* ── Alertas ────────────────────────────────────────────────── */
.alert-error {
    background: var(--st-tint-rechazado);
    border-left: 4px solid var(--st-rechazado);
    color: #7A1A15;
    border-top: none; border-right: none; border-bottom: none;
}
.alert-success {
    background: var(--st-tint-aprobado);
    border-left: 4px solid var(--st-aprobado);
    color: #17553B;
    border-top: none; border-right: none; border-bottom: none;
}
.alert-info {
    background: var(--st-tint-solicitud);
    border-left: 4px solid var(--st-solicitud);
    color: #1C4759;
    border-top: none; border-right: none; border-bottom: none;
}

/* ── Paginador ──────────────────────────────────────────────── */
.paginador a { color: var(--ux-humo); }
.paginador a:hover { color: var(--ux-coral-ink); }
.paginador .active,
.paginador span.current-page {
    background: var(--ux-coral-ink);
    color: #ffffff;
    border-color: var(--ux-coral-ink);
}

/* ════════════════════════════════════════════════════════════
   PORTADA (login) — dos paneles: marca coral + formulario
   ────────────────────────────────────────────────────────────
   Aquí sí manda el coral, igual que el hero de ufixapp.es: es la
   pantalla donde la marca tiene que entrar, y dura lo que se tarda
   en teclear una contraseña.

   El corte diagonal de la web se reproduce con pseudo-elementos y
   no con SVG en el marcado: así la portada del tenant no necesita
   tocar el .aspx, que es compartido.
   ──────────────────────────────────────────────────────────── */

.login-body {
    margin: 0;
    background: var(--ux-paper);
    min-height: 100vh;
}

.login-split {
    display: grid;
    grid-template-columns: 1fr min(500px, 42%);
    min-height: 100vh;
    background: var(--ux-paper);
}

/* ── Panel izquierdo: MARCA ───────────────────────────────── */
.login-brand-panel {
    position: relative;
    /* Degradado y no color plano, y no es decoración: es lo que
       resuelve la única tensión real de este tema.

       El coral de marca #FB4F5A con blanco encima da 3.30:1. Basta
       para el claim (40px/900 = texto grande, mínimo 3:1) y NO basta
       para el eyebrow de 10px ni para el subtítulo de 15px, que
       piden 4.5:1.

       Un velo uniforme lo arreglaba y dejaba el panel en un burdeos
       que ya no era Ufix. Así, en cambio: coral PLENO en la franja
       de arriba —donde está el logo y donde la marca se aprecia— y
       oscurecido de la mitad hacia abajo, que es exactamente donde
       cae el texto pequeño. Cada zona tiene el contraste que su
       tamaño de letra necesita, sin apagar la identidad. */
    background: linear-gradient(168deg,
                    #FB4F5A 0%,
                    #FB4F5A 20%,
                    #CE414A 44%,
                    #BE3A43 100%);
    color: #ffffff;
    padding: 56px 64px 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

/* El corte diagonal del hero. `::before` es la cuña clara de abajo
   a la izquierda; `::after`, un velo muy suave que da profundidad
   al coral plano. Los dos detrás del contenido y sin capturar
   clics. */
.login-brand-panel::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12%;
    height: 46%;
    background: rgba(255,255,255,.10);
    transform: rotate(-7deg);
    transform-origin: bottom left;
    z-index: -1;
    pointer-events: none;
}
.login-brand-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Brillo diagonal sobre el degradado: le da volumen al coral sin
       tocar el contraste (aclara, y el texto es blanco). */
    background: linear-gradient(150deg,
                    rgba(255,255,255,.14) 0%,
                    rgba(255,255,255,0) 55%);
    z-index: -1;
    pointer-events: none;
}

/* Contenedor de decoración del marcado compartido: si el .aspx trae
   el SVG de hexágonos de otro tenant, aquí se apaga — la diagonal
   ya es la figura de esta marca. */
.login-brand-hex { display: none; }

/* Logo del panel — sale de Styles/ufix/platformlogo.png si existe;
   si no, TenantHelper pinta el texto y esto lo compone igual. */
.login-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    height: 36px;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -.03em;
}
.login-brand-logo .navbar-brand-logo,
.login-brand-logo img {
    height: 36px;
    width: auto;
}

.login-brand-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 480px;
}
.login-brand-eyebrow {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    /* Blanco pleno: a 10px en versalitas sobre el coral velado, ni
       siquiera el .92 llegaba (4.19:1). Cada punto de opacidad que se
       baja aquí se paga en legibilidad, y el eyebrow ya es el texto
       más pequeño del panel. */
    color: #ffffff;
    margin: 0 0 18px;
}

/* 900 y apretado: es el titular del hero de ufixapp.es. */
.login-brand-claim {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #ffffff;
    margin: 0 0 20px;
}
.login-brand-sub {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    /* Blanco pleno. A 15px sobre el coral velado da 4.69:1; al 88%
       se quedaba en 4.11 y no llegaba. */
    color: #ffffff;
    margin: 0;
    max-width: 420px;
}

.login-brand-foot {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #ffffff;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .05em;
}
/* Blanco y no verde: sobre coral, el verde de "conexión segura" se
   ensucia. El punto se lee igual y no ensancha la paleta. */
.login-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.28);
    display: inline-block;
}

/* ── Panel derecho: FORMULARIO ────────────────────────────── */
.login-form-panel {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.login-form-inner {
    width: 100%;
    max-width: 380px;
}

.login-eyebrow {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ux-coral-ink);
    margin: 0 0 10px;
}
.login-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -.03em;
    color: var(--ux-grafito);
    margin: 0 0 6px;
    line-height: 1.15;
}
.login-subtitle {
    color: var(--ux-humo);
    font-size: 14px;
    margin: 0 0 26px;
}

.login-field {
    display: block;
    margin-bottom: 16px;
}
.login-field label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ux-grafito);
    margin-bottom: 6px;
    letter-spacing: .02em;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ux-humo);
    width: 18px;
    height: 18px;
    pointer-events: none;
    display: inline-flex;
}
.login-input-icon svg { width: 18px; height: 18px; }

.login-input,
.login-input-wrap input[type="text"],
.login-input-wrap input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 12px 0 40px;
    border: 1px solid var(--ux-gris);
    border-radius: var(--r-ctrl);
    background: var(--ux-paper);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--ux-grafito);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-input:focus,
.login-input-wrap input:focus {
    background: #ffffff;
    border-color: var(--ux-coral-ink);
    box-shadow: 0 0 0 3px var(--ux-coral-soft);
    outline: none;
}

.login-input-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ux-humo);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.login-input-toggle:hover {
    color: var(--ux-coral-ink);
    background: var(--ux-coral-soft);
}
.login-input-toggle svg { width: 18px; height: 18px; }

.login-input[type="password"],
.login-input-wrap input[type="password"] { padding-right: 42px; }

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 20px;
    font-size: 13px;
}
.login-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ux-texto);
    cursor: pointer;
    user-select: none;
}
.login-check input[type="checkbox"] {
    accent-color: var(--ux-coral-ink);
    width: 16px;
    height: 16px;
    margin: 0;
}
.login-forgot-link {
    color: var(--ux-coral-ink);
    text-decoration: none;
    font-weight: 500;
}
.login-forgot-link:hover { color: var(--ux-coral-hover); text-decoration: underline; }

/* CTA "Entrar" — coral relleno y pastilla, como el "Solicita una
   demo" de la web. Es el único botón de la pantalla. */
.btn-login {
    display: block;
    width: 100%;
    height: 48px;
    background: var(--ux-coral-ink);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(201,63,72,.30);
    transition: background .15s, box-shadow .15s, transform .05s;
}
.btn-login:hover {
    background: var(--ux-coral-hover);
    box-shadow: 0 3px 12px rgba(201,63,72,.38);
}
.btn-login:active {
    background: var(--ux-coral-dark);
    transform: translateY(1px);
}

.login-support {
    text-align: center;
    color: var(--ux-humo);
    font-size: 13px;
    margin: 22px 0 0;
}
.login-support a {
    color: var(--ux-coral-ink);
    font-weight: 500;
    text-decoration: none;
}
.login-support a:hover { text-decoration: underline; }

/* ── Responsive: en móvil apilamos vertical ──────────────── */
@media (max-width: 860px) {
    .login-split { grid-template-columns: 1fr; }
    .login-brand-panel {
        padding: 40px 32px 32px;
        min-height: 42vh;
    }
    .login-brand-claim { font-size: 30px; }
    .login-form-panel { padding: 32px 24px; }
    /* La diagonal se aplana: con el panel bajito, -7º se comen el
       claim en vez de decorarlo. */
    .login-brand-panel::before { transform: rotate(-4deg); height: 38%; }
}

/* ── Movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .kpi-card,
    .btn-login,
    .sidebar-link,
    .login-input { transition: none; }
    .kpi-card:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   PARIDAD CON EL Site.css BASE — bloques que faltaban
   -------------------------------------------------------------------
   ⚠ El Site.css de tenant SUSTITUYE al base, no se suma
   (memoria tenant-css-sustituye-no-suma). Este fichero nació sin 27
   clases que el base sí tiene, y eso es lo que hacía que en
   ufix.vsj.es el kebab de los grids saliera abierto y con los enlaces
   en azul de navegador: sin `.row-kebab-menu { display:none }` no hay
   nada que lo cierre, y sin `.row-kebab-item` los `<a>` son enlaces a
   secas.

   Lo mismo afectaba —sin que se hubiera visto todavía— a TODOS los
   modales (`.modal-overlay` y compañía), a la cabecera del sidebar
   (`.sidebar-brand-wrap`, `.toggle-icon`) y a un par de variantes de
   botón y de pill.

   Las reglas son copia del base, con la paleta traducida: los
   `--vd-*` van por los alias del `:root` de arriba, la tipografía a
   Roboto y los acentos de petróleo a coral. Si el base cambia, esto
   hay que volver a copiarlo.

   Añadido: 2026-09-08
   ═══════════════════════════════════════════════════════════════════ */

.navbar-search-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--vd-pizarra);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-search-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.filter-pill-highlight {
    background: var(--vd-ambar-suave, var(--st-tint-pendienteca));
    border-color: var(--vd-ambar, var(--st-pendienteca));
    color: var(--vd-ambar-oscuro, var(--st-pendienteca-ink));
}

.filter-pill-highlight:hover {
    background: var(--vd-ambar, var(--st-pendienteca));
    border-color: var(--vd-ambar, var(--st-pendienteca));
    color: #ffffff;
}

.filter-pill-highlight.active {
    background: var(--vd-ambar, var(--st-pendienteca));
    border-color: var(--vd-ambar, var(--st-pendienteca));
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(224,138,0,.20);
}

.login-input-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--vd-pizarra);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.login-input-toggle:hover {
    color: var(--vd-petroleo);
    background: rgba(251,79,90,.06);
}

.login-input-togg

.row-kebab {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.row-kebab-btn {
    background: #ffffff;
    border: 1px solid var(--vd-linea);
    color: var(--vd-pizarra);
    width: 34px;
    height: 34px;
    border-radius: var(--r-item);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}

.row-kebab-svg {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

.row-kebab-btn:hover {
    background: var(--ux-paper);
    border-color: var(--vd-petroleo);
    color: var(--vd-petroleo);
}

.row-kebab-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9500;
    width: 220px;               
    background: #ffffff;
    border: 1px solid var(--vd-linea);
    border-radius: var(--r-card);
    box-shadow: 0 12px 32px rgba(31,33,36,.14);
    padding: 6px 0;
    box-sizing: border-box;
}

.row-kebab-menu.is-open { display: block; }

.row-kebab.open .row-kebab-menu { display: block; }

.row-kebab.open .row-kebab-btn {
    background: var(--ux-paper);
    border-color: var(--vd-petroleo);
    color: var(--vd-petroleo);
}

.row-kebab-item {
    display: block;
    padding: 9px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: .85rem;
    color: var(--vd-pino);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
}

.row-kebab-item:hover {
    background: var(--ux-paper);
    text-decoration: none;
    color: var(--vd-pino);
}

.row-kebab-item-primary {
    color: var(--vd-petroleo);
    font-weight: 600;
}

.row-kebab-item-primary:hover {
    background: rgba(251,79,90,.08);
    color: var(--accent-hover);
}

.row-kebab-item-danger {
    color: var(--st-rechazado);
}

.row-kebab-item-danger:hover {
    background: var(--st-tint-rechazado);
    color: #8A1D17;
}

.row-kebab-item-disabled,
.row-kebab-item-disabled:hover {
    color: var(--vd-pizarra);
    opacity: .55;
    cursor: not-allowed;
    background: transparent;
}

.row-kebab-divider {
    height: 1px;
    background: var(--vd-linea);
    margin: 6px 0;
    padding: 0;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    
    z-index: 10000;
    background: rgba(31,33,36,.55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.active { display: flex; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--vd-linea);
}

.modal-header h3 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vd-pino);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--vd-pizarra);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.modal-close:hover {
    background: var(--ux-paper);
    color: var(--vd-pino);
}

.modal-body { padding: 20px 22px; }

.modal-desc {
    color: var(--vd-pino);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 16px;
}

.modal-label {
    display: block;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ux-humo);
    margin-bottom: 8px;
}

.modal-required {
    color: var(--st-rechazado);
    font-weight: 700;
}

.modal-body textarea {
    width: 100%;
    background: var(--ux-paper);
    border: 1px solid var(--ux-gris);
    border-radius: var(--r-ctrl);
    padding: 10px 12px;
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    color: var(--vd-pino);
    resize: vertical;
    min-height: 96px;
    box-sizing: border-box;
}

.modal-body textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--vd-petroleo);
    box-shadow: 0 0 0 3px var(--ux-coral-soft);
}

.modal-list {
    margin: 8px 0 0 0;
    padding: 10px 12px 10px 28px;
    background: var(--st-tint-rechazado);
    border-left: 3px solid var(--st-rechazado);
    color: #8A1D17;
    font-size: .88rem;
    border-radius: 4px;
    list-style-type: disc;
}

.modal-list li { margin: 2px 0; }

.modal-error {
    display: none;
    background: var(--st-tint-rechazado);
    border-left: 3px solid var(--st-rechazado);
    color: #8A1D17;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: .82rem;
    margin-top: 10px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--vd-linea);
    background: var(--ux-nieve);
}

.modal-footer .btn-danger {
    background: var(--st-rechazado);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 6px rgba(179,38,30,.30);
}

.modal-footer .btn-danger:hover {
    background: #8A1D17;
    color: #ffffff;
}

.btn.btn-row-action,
.btn-row-action {
    display: inline-block;
    padding: 6px 14px;
    height: 30px;
    line-height: 18px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
}

.sidebar-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 20px 14px;
}

.sidebar-brand-wrap .sidebar-brand {
    padding: 0;
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
}

.sidebar-brand-wrap .sidebar-toggle {
    flex-shrink: 0;
    color: rgba(255,255,255,.72);
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sidebar-brand-wrap .sidebar-toggle:hover {
    background: rgba(255,255,255,.08);
    color: #ffffff;
}

.sidebar-brand-wrap .toggle-icon { line-height: 1; font-size: 1.1rem; }

.search-bar .filter-pills {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
}