/*
 * Ajustes mínimos de marca para American Courier (amco_app).
 *
 * Se probó un rediseño más completo (sidebar en navy de marca, fondo
 * oscuro propio, escala de grises propia) y no convenció — se volvió al
 * tema oscuro/claro por defecto de Filament tal cual. Lo único que se
 * conserva de esa exploración:
 *   1) El ítem activo del menú lateral como bloque sólido de color (en
 *      vez del tinte translúcido + texto de color que usa Filament por
 *      defecto).
 *   2) Una scrollbar más delgada y a tono con el tema, en vez de la
 *      barra gruesa del sistema.
 */

/* Ítem activo del sidebar: bloque sólido en el color primario, con texto
   oscuro para buen contraste. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--primary-500);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #072028;
    font-weight: 700;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: #072028;
}

/* ===== Scrollbar a tono con el tema =====
   Usa las variables --gray-* que ya define Filament (el gris por
   defecto), así que no hace falta declarar colores nuevos acá. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--gray-400);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-500);
}

:where(.dark, .dark *)::-webkit-scrollbar-thumb {
    background-color: var(--gray-600);
}

:where(.dark, .dark *)::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-500);
}

:where(.dark, .dark *) {
    scrollbar-color: var(--gray-600) transparent;
}

/* Descarga de etiqueta en tema claro: botón blanco con borde verde,
   para que no compita con el primario relleno del resto del panel. */
html:not(.dark) .fi-btn.amco-btn-etiqueta {
    background-color: #fff !important;
    color: #0f766e !important;
    border: 1px solid #5eead4 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-weight: 600;
}

html:not(.dark) .fi-btn.amco-btn-etiqueta:hover {
    background-color: #f0fdfa !important;
    border-color: #0f766e !important;
}

html:not(.dark) .fi-btn.amco-btn-etiqueta .fi-icon {
    color: #0f766e !important;
}

/* Guías hijas: el título queda en una línea y los cuatro botones
   comparten altura. Un margen separa proceso de descargas. */
.fi-ta-header:has(.amco-action-proceso) .fi-ta-header-heading {
    white-space: nowrap;
}

.fi-ta-header:has(.amco-action-proceso) .fi-ta-actions {
    align-items: center;
    gap: 0.5rem;
}

.fi-ta-header:has(.amco-action-proceso) .fi-ta-actions .fi-btn {
    min-height: 2.25rem;
}

.fi-ta-header:has(.amco-action-proceso) .fi-ta-actions .fi-btn:not(.amco-action-export) + .amco-action-export {
    margin-inline-start: 0.75rem;
}