/* ═══════════════════════════════════════════════════════════
   VERDANT COMMAND CENTER — Siscampos
   Sidebar premium · paleta crema · acentos verdes orgánicos
═══════════════════════════════════════════════════════════ */

/* ── Sidebar base: verde sage (campo agrícola premium) ─── */
.fi-sidebar,
.fi-sidebar-nav {
    background:
        radial-gradient(circle at 0% 0%, rgba(132,204,22,0.06), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(22,163,74,0.04), transparent 50%),
        #EEF4E5 !important;
}
.fi-sidebar {
    border-right: 1px solid rgba(20,83,45,0.10) !important;
    box-shadow: 4px 0 24px rgba(20,83,45,0.04) !important;
    container-type: inline-size !important;
    container-name: sidebar !important;
}
.fi-sidebar-nav {
    padding: 4px 8px 0 !important;
    gap: 0 !important;
    -ms-overflow-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,83,45,0.16) transparent;
}
.fi-sidebar-nav::-webkit-scrollbar { width: 5px; }
.fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(20,83,45,0.16);
    border-radius: 99px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(20,83,45,0.30); }

/* ── Header logo: banner verde profundo ────────────────── */
.fi-sidebar-header {
    background:
        linear-gradient(135deg, rgba(132,204,22,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #166534 0%, #14532d 100%) !important;
    border-bottom: 1px solid rgba(132,204,22,0.18) !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.10);
}
.fi-sidebar-header .fi-sidebar-collapse-btn {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.85) !important;
}
.fi-sidebar-header .fi-sidebar-collapse-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: white !important;
}

/* ── Items: tipografía limpia + hover orgánico ─────────── */
.fi-sidebar-item-button,
.fi-sidebar-item > a {
    border-radius: 6px !important;
    padding: 3px 9px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    gap: 8px !important;
    transition: background .15s ease, color .15s ease !important;
}
.fi-sidebar-item-button span,
.fi-sidebar-item > a span {
    color: #1f2937 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    transition: color .15s ease !important;
}
.fi-sidebar-item-button svg,
.fi-sidebar-item > a svg {
    color: #6b8e5a !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    transition: color .15s ease !important;
}

/* Hover orgánico — glow verde sutil */
.fi-sidebar-item-button:hover,
.fi-sidebar-item > a:hover {
    background: rgba(22,163,74,0.10) !important;
}
.fi-sidebar-item-button:hover span,
.fi-sidebar-item > a:hover span { color: #14532d !important; }
.fi-sidebar-item-button:hover svg,
.fi-sidebar-item > a:hover svg  { color: #15803d !important; }

/* Activo: barra verde lateral + bg sutil */
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item > a[aria-current="page"],
.fi-sidebar-item > a.fi-active {
    background: rgba(22,163,74,0.16) !important;
}
.fi-sidebar-item-button[aria-current="page"]::before,
.fi-sidebar-item > a[aria-current="page"]::before,
.fi-sidebar-item > a.fi-active::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 2.5px;
    background: linear-gradient(180deg, #4ade80, #16a34a);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(22,163,74,0.40);
}
.fi-sidebar-item-button[aria-current="page"] span,
.fi-sidebar-item > a[aria-current="page"] span,
.fi-sidebar-item > a.fi-active span {
    color: #15803d !important;
    font-weight: 600 !important;
}
.fi-sidebar-item-button[aria-current="page"] svg,
.fi-sidebar-item > a[aria-current="page"] svg,
.fi-sidebar-item > a.fi-active svg { color: #15803d !important; }

/* ── Grupos: labels tipográficos finos ─────────────────── */
.fi-sidebar-nav > ul,
.fi-sidebar-nav .fi-sidebar-nav-groups-ctn {
    gap: 2px !important;
    row-gap: 2px !important;
}
.fi-sidebar-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.fi-sidebar-group + .fi-sidebar-group {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 1px !important;
}
.fi-sidebar-group > div:first-child,
.fi-sidebar-group > button,
.fi-sidebar-group-button {
    padding: 5px 10px 4px !important;
    min-height: unset !important;
    background: linear-gradient(180deg, rgba(20,83,45,0.06), rgba(20,83,45,0.02)) !important;
    border-bottom: 1px solid rgba(20,83,45,0.10) !important;
    margin-bottom: 2px !important;
}
.fi-sidebar-group button span,
.fi-sidebar-group-label {
    color: #14532d !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
/* Chevron del grupo: alto contraste, rotación on toggle */
.fi-sidebar-group button > svg:last-child {
    color: #15803d !important;
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.5 !important;
    opacity: 0.85;
    transition: transform 0.2s ease, color 0.15s ease, opacity 0.15s ease !important;
}
.fi-sidebar-group button:hover > svg:last-child {
    color: #14532d !important;
    opacity: 1;
}
.fi-sidebar-group > div:first-child,
.fi-sidebar-group > button {
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background .12s ease !important;
}
.fi-sidebar-group > button:hover {
    background: rgba(22,163,74,0.06) !important;
}

.fi-sidebar-group-items {
    padding: 2px 0 4px 12px !important;
    margin: 1px 0 4px 10px !important;
    position: relative !important;
    border-left: 1.5px solid rgba(22,163,74,0.22) !important;
    transition: border-color .15s ease !important;
}
/* Línea-guía resalta cuando el grupo contiene la página activa */
.fi-sidebar-group:has(.fi-sidebar-item-active) > .fi-sidebar-group-items,
.fi-sidebar-group:has(a[aria-current="page"]) > .fi-sidebar-group-items {
    border-left-color: rgba(22,163,74,0.50) !important;
}

/* ── Botón colapsar ────────────────────────────────────── */
.fi-sidebar-collapse-btn {
    background: white !important;
    border: 1px solid rgba(22,101,52,0.10) !important;
    border-radius: 7px !important;
    color: #16a34a !important;
    transition: all .15s ease !important;
}
.fi-sidebar-collapse-btn:hover {
    background: rgba(22,163,74,0.08) !important;
    border-color: rgba(22,101,52,0.20) !important;
}

/* ── Tooltip nativo: oculto en colapsado (lo reemplaza VCC) ── */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-tooltip,
.fi-sidebar:not(.fi-sidebar-open) [x-tooltip] {
    display: none !important;
}
.fi-sidebar-item-tooltip {
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}

/* ── VCC Rail Tooltip — Botanical Dark Refined ────────── */
.vcc-rail-tooltip {
    position: fixed;
    z-index: 99999;
    background: #14532d;
    color: white;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid rgba(132,204,22,0.12);
    box-shadow:
        0 12px 28px rgba(15,23,42,0.22),
        0 4px 10px rgba(15,23,42,0.10);
    font-family: inherit;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease;
    max-width: 280px;
    min-width: 170px;
}
.vcc-rail-tooltip.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.vcc-rail-tooltip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 9px;
    height: 9px;
    background: #14532d;
    border-left: 1px solid rgba(132,204,22,0.12);
    border-bottom: 1px solid rgba(132,204,22,0.12);
    transform: translateY(-50%) rotate(45deg);
}
.vcc-rail-tooltip-group {
    display: inline-block;
    background: rgba(0,0,0,0.22);
    color: #86efac;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 9px;
    line-height: 1.3;
}
.vcc-rail-tooltip-group:empty {
    display: none;
}
.vcc-rail-tooltip-label {
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: white;
}
.vcc-rail-tooltip-desc {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(132,204,22,0.14);
    font-size: 0.74rem;
    color: rgba(167,243,208,0.85);
    line-height: 1.45;
    font-weight: 400;
}
.vcc-rail-tooltip-desc:empty {
    display: none;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ── Topbar ────────────────────────────────────────────── */
.fi-topbar {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(22,101,52,0.07) !important;
}

/* Notifications de Filament POR ENCIMA del topbar y todo lo
   demás (z-50 default no alcanza con topbar custom). El
   max-width evita que se estiren a lo ancho en monitores
   grandes (se veían enormes). */
.fi-no {
    z-index: 100000 !important;
    max-width: 26rem !important;
}
.fi-no-notification {
    max-width: 26rem !important;
}
/* Modales tampoco deben quedar tapados por el topbar.
   Estructura interna real del modal de Filament:
     .fi-modal
       └─ <div x-cloak x-show=isOpen>
            ├─ .fi-modal-close-overlay (fixed inset-0 z-40)
            └─ .fixed.inset-0 (container con la ventana)
   Hay que elevar AMBOS arriba del topbar, pero dejando
   que el container quede encima del overlay (sino el
   overlay oscurece la ventana). */
.fi-modal .fixed.inset-0 {
    z-index: 99999 !important;
}
.fi-modal-close-overlay,
.fi-modal .fi-modal-close-overlay {
    z-index: 99998 !important;
}

/* ── Background de fi-main ─────────────────────────────── */
.fi-main, .fi-layout {
    background:
        radial-gradient(circle at 0% 0%, rgba(132,204,22,0.04), transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(22,163,74,0.03), transparent 40%),
        #f9fafb !important;
}

/* ── Botones primarios ────────────────────────────────── */
.fi-btn-color-primary,
button.fi-btn-color-primary {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(22,163,74,0.20),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
}
.fi-btn-color-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22,163,74,0.30) !important;
}
.fi-btn-color-primary:active { transform: translateY(0) !important; }

/* ── Botones para elegir una opción (ToggleButtons) ───────
   Son <input class="peer"> + <label class="fi-btn ..."> y la regla de arriba
   los pintaba TODOS de verde: no se sabía cuál estaba elegida y el ícono gris
   claro de Filament se perdía sobre el verde (Tipos de documento, 22-10-2026).
   El verde queda solo para la opción elegida. */
input.peer + label.fi-btn-color-primary {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.14) !important;
    font-weight: 600 !important;
}
input.peer + label.fi-btn-color-primary .fi-btn-icon { color: #15803d !important; }
input.peer + label.fi-btn-color-primary:hover {
    background: #f0fdf4 !important;
    box-shadow: inset 0 0 0 1px rgba(22,163,74,0.45) !important;
    transform: none !important;
}
input.peer:checked + label.fi-btn-color-primary,
input.peer:checked + label.fi-btn-color-primary:hover {
    /* Más oscuro que el botón primario: texto blanco con contraste 5:1 o más. */
    background: linear-gradient(135deg, #15803d, #166534) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(22,101,52,0.30) !important;
}
input.peer:checked + label.fi-btn-color-primary .fi-btn-icon { color: #ffffff !important; }
input.peer:focus-visible + label.fi-btn-color-primary { outline: 2px solid #16a34a !important; outline-offset: 2px; }
/* Elegida en gris, azul o verde: el tono de Filament deja el texto blanco bajo
   4,5:1 («No se pide» quedaba blanco sobre gris claro). Se oscurece. */
input.peer:checked + label.fi-btn-color-gray,
input.peer:checked + label.fi-btn-color-gray:hover { background: #475569 !important; color: #ffffff !important; }
input.peer:checked + label.fi-btn-color-info,
input.peer:checked + label.fi-btn-color-info:hover { background: #0369a1 !important; color: #ffffff !important; }
input.peer:checked + label.fi-btn-color-success,
input.peer:checked + label.fi-btn-color-success:hover { background: #15803d !important; color: #ffffff !important; }
input.peer:checked + label.fi-btn-color-gray .fi-btn-icon,
input.peer:checked + label.fi-btn-color-info .fi-btn-icon,
input.peer:checked + label.fi-btn-color-success .fi-btn-icon { color: #ffffff !important; }

/* ── Tablas ────────────────────────────────────────────── */
.fi-ta-table {
    box-shadow: 0 1px 3px rgba(22,101,52,0.04) !important;
}
.fi-ta-header-cell {
    background: linear-gradient(180deg, #f0fdf4 0%, #fafaf7 100%) !important;
    border-bottom: 1px solid rgba(22,163,74,0.10) !important;
}

/* ── Breadcrumbs ───────────────────────────────────────── */
.fi-breadcrumbs a {
    color: #15803d !important;
    font-weight: 500 !important;
    transition: color .12s ease !important;
}
.fi-breadcrumbs a:hover { color: #16a34a !important; }

/* ── Sub-headers inyectados por JS (Mano de Obra, Maestros, …) ──
   Estilo "parent timeline" igual al patrón nativo de SISCALIDAD
   (Fenología/Muestreo/Monitoreo): subheader se ve como parent
   bold verde y los items siguientes cuelgan con dot + línea
   vertical timeline. Acordado 2026-05-22 a pedido del usuario. */
.fi-sidebar-group .mo-subheader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px 14px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #047857;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    pointer-events: none;
    list-style: none;
}
.fi-sidebar-group .mo-subheader::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #34d399, #047857);
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.95;
}
.fi-sidebar-group .mo-subheader.mo-subheader-divider {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(20,83,45,0.12);
}
/* Items que viven bajo un subheader: dot circular + línea
   vertical conectora, replicando el estilo timeline de
   SISCALIDAD (parentItem nativo de Filament). */
.fi-sidebar-group .mo-subheader ~ .fi-sidebar-item > a,
.fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button {
    position: relative;
    padding-left: 30px !important;
}
.fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    z-index: 2;
}
.fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button[aria-current="page"]::before {
    background: #059669;
    box-shadow: 0 0 0 3px rgba(5,150,105,0.18);
}
/* Línea vertical conectora entre dots (entre items consecutivos
   bajo el mismo subheader). Se corta al llegar al siguiente
   subheader porque ese reinicia el flujo visual. */
.fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(107, 142, 90, 0.28);
    z-index: 1;
}
/* Primer item bajo un subheader: línea solo desde el centro hacia abajo */
.fi-sidebar-group .mo-subheader + .fi-sidebar-item .fi-sidebar-item-button::after {
    top: 50%;
}

/* ── Separadores en Administración (post Temporadas y ante
   el bloque ex-«Sistema»: Estado de Digitación en adelante) ── */
.fi-sidebar-group[data-group-label="Administración"] .fi-sidebar-group-items > .fi-sidebar-item:nth-child(3),
.fi-sidebar-group[data-group-label="Administración"] .fi-sidebar-group-items > .fi-sidebar-item:nth-child(6) {
    border-top: 1px solid rgba(20,83,45,0.10) !important;
    margin-top: 5px !important;
    padding-top: 5px !important;
}

/* ── Grupo Plataforma: footer doc style ────────────────── */
.fi-sidebar-group[data-group-label="Plataforma"] {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(20,83,45,0.10) !important;
}
.fi-sidebar-group[data-group-label="Plataforma"] button span {
    color: #6b8e5a !important;
    font-size: 0.55rem !important;
}
.fi-sidebar-group[data-group-label="Plataforma"] .fi-sidebar-item > a span {
    color: #6b8e5a !important;
    font-size: 0.74rem !important;
    font-style: italic !important;
}
.fi-sidebar-group[data-group-label="Plataforma"] .fi-sidebar-item > a svg {
    color: #95a87f !important;
}

/* ═══════════════════════════════════════════════════════════
   VCC — Widgets propios (Footer)
═══════════════════════════════════════════════════════════ */

.vcc-footer {
    margin-top: auto;
    padding: 7px 10px;
    border-top: 1px solid rgba(20,83,45,0.10);
    background: rgba(20,83,45,0.04);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    color: #4a5d40;
}
.vcc-footer-version {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(20,83,45,0.20);
}
.vcc-footer-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.6);
    animation: vcc-pulse 2.4s ease-in-out infinite;
}
@keyframes vcc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}
.vcc-footer-status { font-weight: 600; color: #14532d; }
.vcc-footer-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #6b8e5a;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   MODO COLAPSADO — Filament aplica :not(.fi-sidebar-open)
   cuando el sidebar está cerrado en desktop. Forzamos
   que se vea (62px de ancho) con iconos centrados.
═══════════════════════════════════════════════════════════ */

/* Forzar visibilidad y width cuando colapsado en desktop.
   Filament aplica :not(.fi-sidebar-open) pero no asigna
   width — debe llegar de --collapsed-sidebar-width. Lo
   forzamos para que el rail siempre se vea. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        transform: translateX(0) !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 1 !important;
    }
}

/* Header colapsado: solo logo centrado */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    padding: 12px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header > a,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .fi-sidebar-collapse-btn {
    margin: 0 auto !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header img {
    width: 32px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Nav colapsado: padding cero a los lados, items centrados */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    padding: 4px 0 0 !important;
    align-items: center !important;
}

/* Group label colapsado: oculto (solo iconos visibles) */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group > div:first-child,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group > button,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button {
    display: none !important;
}

/* Riel corto (2026-08-22): colapsado muestra SOLO Inicio +
   los iconos del grupo activo. Antes se pintaban TODAS
   las páginas de TODOS los módulos (~120 iconos, 5.330px
   de scroll) y el colapsado "parecía abierto".

   No sirve "respetar el acordeón": al cerrar el sidebar,
   el x-show de Filament re-evalúa contra el store y PISA
   el display inline que dejó el acordeón — todo vuelve a
   verse. Por eso acá se decide por CSS, con dos anclas:

   1) El grupo del ítem activo REAL: fi-active con un <a>
      navegable. El :not([href="#"]) es obligatorio — los
      3 padres sintéticos de SISCALIDAD son fi-active con
      href="#" en TODAS las páginas (trampa documentada en
      el acordeón) y sin esa exclusión SISCALIDAD
      aparecería siempre en el riel.
   2) El grupo sin etiqueta (Inicio): visible siempre. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group ul {
    display: none !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:not([data-group-label]) > .fi-sidebar-group-items,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label=""] > .fi-sidebar-group-items,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:has(.fi-sidebar-item.fi-active > a:not([href="#"])) > .fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    gap: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none !important;
}

/* Con el riel corto, los grupos cerrados quedan de alto 0:
   fuera separadores y espaciado entre grupos, o el riel
   sería una escalera de líneas vacías. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    gap: 0 !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group {
    margin: 0 !important;
    padding: 0 !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* El highlight del ítem activo vive en theme.css con un
   border-left de 3px + corrimiento de padding pensados
   para el ítem ancho con texto: sobre la píldora de 38px
   el borde redondeado se ve como un "(" pegado al icono —
   4 veces, porque los padres sintéticos de SISCALIDAD son
   fi-active en todas las páginas. En el riel basta el
   fondo verde. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-active > .fi-sidebar-item-button {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Items colapsados: cuadrados con icono centrado */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a {
    width: 38px !important;
    padding: 8px 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    border-radius: 8px !important;
    gap: 0 !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button span,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a span {
    display: none !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button svg,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a svg {
    width: 17px !important;
    height: 17px !important;
}

/* Subheaders MO: ocultos en colapsado */
.fi-sidebar:not(.fi-sidebar-open) .mo-subheader {
    display: none !important;
}

/* CRÍTICO — las decoraciones "timeline" NO deben sobrevivir
   al colapso.

   El punto y la línea conectora cuelgan de los HERMANOS del
   subencabezado (`.mo-subheader ~ .fi-sidebar-item`), no del
   subencabezado en sí. Ocultar `.mo-subheader` (arriba) por
   lo tanto no los apaga: quedaban un punto suelto en
   left:16px y una línea de 1px en left:19px dentro de un
   riel de 62px, más un padding-left de 30px que corría los
   iconos fuera del centro. Se veía como una hilera de
   puntos rotos.

   Sin etiquetas que conectar, la timeline no significa nada:
   en colapsado el único lenguaje es el icono centrado. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item > a,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button {
    padding-left: 0 !important;
}
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button::before,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item .fi-sidebar-item-button::after,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item > a::before,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group .mo-subheader ~ .fi-sidebar-item > a::after {
    content: none !important;
    display: none !important;
}

/* Los separadores de Administración cuentan hijos por posición:
   con el grupo colapsado marcaban un ítem cualquiera con una
   línea que no separa nada. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Administración"] .fi-sidebar-group-items > .fi-sidebar-item:nth-child(3),
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Administración"] .fi-sidebar-group-items > .fi-sidebar-item:nth-child(6) {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* La barra de "página actual" se dibuja en left:0 pensada
   para un item ancho con texto. Sobre la píldora de 38px
   queda pegada al borde y se lee como un recorte: en
   colapsado basta el fondo. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button[aria-current="page"]::before,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a[aria-current="page"]::before,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a.fi-active::before {
    content: none !important;
    display: none !important;
}

/* Footer colapsado: solo el dot pulsante centrado */
.fi-sidebar:not(.fi-sidebar-open) .vcc-footer {
    padding: 10px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-direction: column !important;
}
.fi-sidebar:not(.fi-sidebar-open) .vcc-footer-version,
.fi-sidebar:not(.fi-sidebar-open) .vcc-footer-status,
.fi-sidebar:not(.fi-sidebar-open) .vcc-footer-time {
    display: none !important;
}
.fi-sidebar:not(.fi-sidebar-open) .vcc-footer-dot {
    margin: 0 auto !important;
}

/* Botón colapsar (header): siempre visible para reabrir */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-collapse-btn {
    display: inline-flex !important;
    background: rgba(255,255,255,0.20) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: white !important;
}