/* ============================================
   RSM THEME - BOTONES ACTIVOS SIDEBAR Y ACCIONES
   ============================================ */

/* Botón del sidebar activo - fondo azul - sobreescribiendo variables Tailwind */
.fi-sidebar-item.fi-active .fi-sidebar-item-button.bg-gray-100,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button.bg-gray-100 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(var(--marca-500)) !important;
    background: rgb(var(--marca-500) / var(--tw-bg-opacity, 1)) !important;
}

/* Botón activo modo dark */
.fi-sidebar-item.fi-active .fi-sidebar-item-button.dark\:bg-white\/5,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button.dark\:bg-white\/5 {
    background-color: rgb(var(--marca-500)) !important;
    background: rgb(var(--marca-500)) !important;
}

/* Hover del botón activo - azul más oscuro */
.fi-sidebar-item.fi-active .fi-sidebar-item-button.bg-gray-100:hover,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button.bg-gray-100:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(var(--marca-600)) !important;
    background: rgb(var(--marca-600) / var(--tw-bg-opacity, 1)) !important;
}

/* Hover modo dark */
.fi-sidebar-item.fi-active .fi-sidebar-item-button.dark\:bg-white\/5:hover,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button.dark\:bg-white\/5:hover {
    background-color: rgb(var(--marca-700)) !important;
    background: rgb(var(--marca-700)) !important;
}

/* Texto e iconos del botón activo en blanco - ENFOQUE AGRESIVO GLOBAL */

/* Definir variables de color blanco a nivel del botón activo */
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button {
    --primary-600: 255 255 255 !important;
    --primary-400: 255 255 255 !important;
    --tw-text-opacity: 1 !important;
}

/* Forzar texto blanco usando todas las técnicas posibles */
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .text-primary-600,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .dark\:text-primary-400,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button svg,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button span,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .fi-sidebar-item-label {
    --primary-600: 255 255 255 !important;
    --primary-400: 255 255 255 !important;
    --tw-text-opacity: 1 !important;
    color: white !important;
    background-color: transparent !important; /* Evitar que afecte al fondo */
    text-shadow: 0 0 1px rgba(0,0,0,0.5) !important; /* Sombra para legibilidad */
}

/* También para hover */
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button:hover {
    --primary-600: 255 255 255 !important;
    --primary-400: 255 255 255 !important;
    --tw-text-opacity: 1 !important;
}

.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button:hover .text-primary-600,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button:hover .dark\:text-primary-400,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button:hover svg,
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button:hover span {
    --primary-600: 255 255 255 !important;
    --primary-400: 255 255 255 !important;
    --tw-text-opacity: 1 !important;
    color: white !important;
    background-color: transparent !important;
    text-shadow: 0 0 1px rgba(0,0,0,0.5) !important;
}

/* Último recurso - selectores específicos por elemento */
.fi-sidebar-item.fi-active .text-primary-600,
.fi-sidebar-item.fi-active .dark\:text-primary-400,
.fi-sidebar-item.fi-active svg,
.fi-sidebar-item.fi-active span {
    color: white !important;
    --primary-600: 255 255 255 !important;
    --primary-400: 255 255 255 !important;
    --tw-text-opacity: 1 !important;
}

/* ============================================
   BOTONES DE ACCIONES EN TABLAS - ESTILOS COMPACTOS
   ============================================ */

/* Contenedor de acciones - más compacto */
.fi-ta-actions {
    gap: 0.5rem !important;
}

/* Botones de acciones - estilo compacto */
.fi-ta-actions .fi-link {
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    min-height: 1.75rem !important;
    transition: all 0.15s ease !important;
    border: 1px solid transparent !important;
}

/* Botón Edit (Primary) - azul claro */
.fi-ta-actions .fi-link.fi-color-primary {
    background-color: #e0f7ff !important;
    color: #00619c !important;
    border-color: #b3edff !important;
}

.fi-ta-actions .fi-link.fi-color-primary:hover {
    background-color: #b3edff !important;
    color: rgb(var(--marca-600)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 3px rgba(0, 149, 214, 0.2) !important;
}

/* Botón Delete (Danger) - rojo claro */
.fi-ta-actions .fi-link.fi-color-danger {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.fi-ta-actions .fi-link.fi-color-danger:hover {
    background-color: #fecaca !important;
    color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2) !important;
}

/* Botón Estado (Info) - azul muy claro */
.fi-ta-actions .fi-link.fi-color-info {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #dbeafe !important;
}

.fi-ta-actions .fi-link.fi-color-info:hover {
    background-color: #dbeafe !important;
    color: #075985 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 3px rgba(3, 105, 161, 0.2) !important;
}

/* Botón View (Gray) - gris muy claro */
.fi-ta-actions .fi-link.fi-color-gray {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

.fi-ta-actions .fi-link.fi-color-gray:hover {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 3px rgba(100, 116, 139, 0.2) !important;
}

/* Iconos de los botones - más pequeños */
.fi-ta-actions .fi-link-icon {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

/* Textos de los botones - más compactos */
.fi-ta-actions .fi-link span {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

/* Eliminar subrayado en hover */
.fi-ta-actions .fi-link.group-hover\/link .group-hover\/link\:underline {
    text-decoration: none !important;
}

.fi-simple-main-ctn.flex.w-full.flex-grow.items-center.justify-center {
    background-image: url("/images/background/bk-login-d.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

/* Asegurar que el formulario sea visible sobre el fondo */
.fi-simple-main-ctn.flex.w-full.flex-grow.items-center.justify-center::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255 255 255 / 0%);
    backdrop-filter: blur(1px);
    z-index: 0;
}
                    
/* Elevar el contenido sobre el fondo */
.fi-simple-main-ctn .fi-simple-page {
    position: relative;
    z-index: 1;
}
/* --------------------------------------------------------------------------
   El contador del menú lateral

   Arriba hay una regla que pinta de blanco TODO span que cuelgue del ítem
   activo —para que el rótulo se lea sobre el teal—. El contador de Filament
   no es un span: son tres anidados,

       <span class="fi-badge"><span class="grid"><span>3</span></span></span>

   así que pintar solo la pastilla no basta; el número está dentro y seguía
   saliendo blanco sobre blanco. Estas reglas bajan hasta él.

   Se invierte una con otra: pastilla blanca con número en color sobre el
   ítem activo, y pastilla en color con número blanco sobre los demás. Y se
   deshace el secuestro de --primary-600, que es de donde la pastilla saca su
   color: sin eso, un aviso «primary» quedaría blanco sobre blanco otra vez.
   -------------------------------------------------------------------------- */
.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .fi-badge,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-badge {
    --primary-600: var(--marca-600) !important;
    --primary-400: var(--marca-400) !important;
    background-color: #ffffff !important;
    color: rgb(var(--c-600, var(--marca-600))) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.fi-sidebar-item[aria-current="page"] .fi-sidebar-item-button .fi-badge span,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-badge span {
    color: rgb(var(--c-600, var(--marca-600))) !important;
    background-color: transparent !important;
    text-shadow: none !important;
}

/* El ítem en reposo va al revés: pastilla en color sobre la fila blanca. El
   relleno que trae de serie es tan claro que no se distingue del fondo. */
.fi-sidebar-item:not([aria-current="page"]):not(.fi-active) .fi-sidebar-item-button .fi-badge {
    background-color: rgb(var(--c-600, var(--marca-600))) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.fi-sidebar-item:not([aria-current="page"]):not(.fi-active) .fi-sidebar-item-button .fi-badge span {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   El logo de la marca, centrado en su hueco

   Filament pone el logo pegado a la izquierda de la cabecera del menú, que
   mide lo que mida el menú. Un logo estrecho queda descolgado contra el
   borde, con un palmo de blanco a la derecha.

   El envoltorio del logo pasa a ocupar la cabecera entera y a centrar lo que
   lleva dentro. Cuando el menú se pliega ese envoltorio se oculta, así que el
   botón de desplegar sigue centrándose por su cuenta como hasta ahora.
   -------------------------------------------------------------------------- */
.fi-sidebar-header > div:first-of-type {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.fi-sidebar-header > div:first-of-type > a {
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* Que un logo muy ancho no desborde: se ajusta y conserva su proporción. */
.fi-sidebar-header img.fi-logo {
    max-width: 100%;
    object-fit: contain;
}

/* El nombre, cuando no hay logo, también centrado. */
.fi-sidebar-header div.fi-logo {
    justify-content: center;
    text-align: center;
}