/* Pantalla Inicio */
.fi-simple-main-ctn{
    background-image: url("/images/fondo-usuario.webp");
 }
 .fi-simple-main{
     background-color: #EFF4CC;
 }
 
 /* Cabecera */
 .overflow-x-clip .fi-sidebar-header{
     background-color: #e8ebcc;
     border-bottom: 1px solid #B2CA04;
 }
 .fi-topbar nav{
     background-color: #e8ebcc;
     border-bottom: 1px solid #B2CA04;
 }
 .fi-sidebar-nav{
     background-color: white;
 }
/* Navegacion lateral */

/* Solo sobrescribir el color de fondo del badge, mantener todas las clases de Filament */
.fi-sidebar-item .fi-badge {
    background-color: #4F5907 !important;
}

/* Asegurar que el texto dentro del badge sea blanco */
.fi-sidebar-item .fi-badge .truncate,
.fi-sidebar-item .fi-badge span {
    color: white !important;
}

/* Asegurar que el badge esté correctamente posicionado dentro del enlace del sidebar */
/* Filament ya usa flexbox en el enlace, solo necesitamos asegurar que el badge esté alineado a la derecha */
.fi-sidebar-item a .fi-badge,
.fi-sidebar-item a span:has(.fi-badge) {
    margin-left: auto !important;
    flex-shrink: 0;
}
 
 /* Fondo rojo para notificaciones no leídas en la barra lateral */
 .fi-sidebar-item:has(.fi-badge-danger) {
     background-color: rgb(248, 215, 218) !important;
     border-color: rgb(196, 90, 90) !important;
 }
 
 .fi-sidebar-item:has(.fi-badge-danger):hover {
     background-color: rgb(239, 155, 155) !important;
 }
 
 /* Fondo rojo para elemento de notificaciones cuando hay no leídas */
 .fi-sidebar-item:has(.fi-badge.has-notifications),
 .fi-sidebar-item.has-notifications {
     background-color: rgb(248, 215, 218) !important;
     border-color: rgb(196, 90, 90) !important;
     border-radius: 11px;
 }
 
 .fi-sidebar-item:has(.fi-badge.has-notifications):hover,
 .fi-sidebar-item:has(.fi-badge.has-notifications):hover a,
 .fi-sidebar-item.has-notifications:hover,
 .fi-sidebar-item.has-notifications:hover a {
     background-color: rgb(239, 155, 155) !important;
     border-radius: 11px;
 }
 
 /* Clase para badge rojo cuando hay notificaciones no leídas */
 .fi-sidebar-item .fi-badge.has-notifications {
     background-color: #b81818 !important;
 }
 
 .fi-sidebar-item .fi-badge.has-notifications span {
     color: white !important;
 }
 
 /* Mantener badge rojo incluso cuando el elemento está activo */
 .fi-sidebar-item-active .fi-badge.has-notifications {
     background-color: #b81818 !important;
 }
 
 .fi-sidebar-item-active .fi-badge.has-notifications span {
     color: white !important;
 }
 
 /* Mantener fondo rojo cuando el elemento está activo y tiene notificaciones */
 .fi-sidebar-item-active.has-notifications {
     background-color: rgb(248, 215, 218) !important;
 }
 
 /* Ajustar el posicionamiento del badge de notificaciones en la barra superior */
 .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn {
     /* Cambiar la posición para evitar que tape el botón del perfil */
     left: auto !important;
     right: 2px !important;
     transform: translateX(50%) translateY(-20%) !important;
     top: 2px !important;
 }
 
 /* Quitar margen izquierdo de la campana para acercarla a los botones de fichar */
 .fi-topbar-database-notifications-btn {
     margin-left: -15px !important;
     margin-right: 1rem !important; /* Aumentar separación del panel de usuario */
     align-self: center !important; /* Centrar verticalmente */
 }
 
 
 /* Hacer el badge de notificaciones redondo */
 .fi-topbar-database-notifications-btn .fi-badge {
     border-radius: 50% !important;
     min-width: 1.2rem !important;
     height: 1.2rem !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     font-size: 0.75rem !important;
     padding: 0 !important;
 }
 
 /* Eliminar el fondo blanco cuadrado detrás del badge */
 .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn {
     background: none !important;
     padding: 0 !important;
 }
 
 /* Agregar espacio entre elementos de la barra superior */
 .fi-topbar nav .ms-auto {
     gap: 0.75rem !important; /* Aumentar el espacio entre elementos */
 }
 
 /* Agregar margen al botón del perfil para evitar que se salga en móvil */
 .fi-user-menu {
     margin-left: -5px !important;
     margin-right: 1rem !important;
     align-self: center !important; /* Centrar verticalmente */
 }
 
 /* Asegurar padding adecuado en la barra superior */
 .fi-topbar nav {
     padding-right: 1rem !important;
 }
 
 /* Asegurar que el badge no tape el botón del usuario en dispositivos móviles */
 @media (max-width: 768px) {
     .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn {
         right: 4px !important;
         transform: translateX(30%) translateY(-30%) !important;
         background: none !important;
         padding: 0 !important;
         top: 2px !important;
     }
     
     .fi-topbar-database-notifications-btn .fi-badge {
         min-width: 1rem !important;
         height: 1rem !important;
         font-size: 0.6rem !important;
     }
     
     .fi-topbar nav .ms-auto {
         gap: 0.125rem !important; /* Reducir al mínimo el espacio en móvil */
     }
     
     .fi-user-menu {
         margin-left: 0 !important; /* Eliminar margen izquierdo */
         margin-right: 0.25rem !important; /* Reducir al mínimo margen derecho */
         align-self: center !important; /* Centrar verticalmente */
     }
     
     /* En móvil, reducir al mínimo el margen de la campana */
     .fi-topbar-database-notifications-btn {
         margin-right: 0.5rem !important; /* Agregar margen derecho en móvil */
         margin-left: -15px !important; /* Mantener margen izquierdo negativo */
         align-self: center !important; /* Centrar verticalmente */
     }
     
     /* Asegurar que la barra superior no se desborde */
     .fi-topbar nav {
         padding-right: 0.25rem !important; /* Reducir al mínimo padding derecho */
         padding-left: 0.25rem !important; /* Reducir al mínimo padding izquierdo */
     }
     
     /* Forzar que el contenedor no se desborde */
     .fi-topbar {
         overflow-x: hidden !important;
     }
     
     /* Ajustar el tamaño de los botones en móvil */
     .fi-topbar-database-notifications-btn,
     .fi-user-menu {
         min-width: auto !important;
         width: auto !important;
     }
     
     /* Ajustes adicionales para pantallas muy pequeñas */
     @media (max-width: 480px) {
         .fi-topbar nav .ms-auto {
             gap: 0.0625rem !important; /* 1px de gap */
         }
         
         .fi-user-menu {
             margin-right: 0.125rem !important;
         }
         
         .fi-topbar nav {
             padding-right: 0.125rem !important;
             padding-left: 0.125rem !important;
         }
         
         /* Reducir aún más el tamaño del badge */
         .fi-topbar-database-notifications-btn .fi-badge {
             min-width: 0.875rem !important;
             height: 0.875rem !important;
             font-size: 0.5rem !important;
         }
     }
 }
 
 /* Ajustes específicos para pantallas medianas */
 @media (min-width: 769px) and (max-width: 1023px) {
     .fi-topbar-database-notifications-btn {
         margin-right: 0.75rem !important; /* Aumentar margen derecho en tablet */
         margin-left: -12px !important;
     }
     
     .fi-topbar nav .ms-auto {
         gap: 0.5rem !important;
     }
     
     .fi-user-menu {
         margin-left: 0.5rem !important;
         margin-right: 0.75rem !important;
         align-self: center !important; /* Centrar verticalmente */
     }
 }
 
 /* Ajustes específicos para pantallas grandes */
 @media (min-width: 1024px) {
     .fi-topbar-database-notifications-btn {
         margin-right: 1.25rem !important; /* Más separación en pantallas grandes */
     }
     
     .fi-topbar nav .ms-auto {
         gap: 1rem !important; /* Más espacio entre elementos en pantallas grandes */
     }
 }
 .fi-sidebar-item-active:has(.fi-badge.has-notifications) a,
 .fi-sidebar-item-active.has-notifications a {
     background-color: rgb(248, 215, 218) !important;
     border-color: #b81818 !important;
     border-radius: 11px;
 }
 
 .fi-sidebar-item-active:has(.fi-badge.has-notifications) a,
 .fi-sidebar-item-active.has-notifications a {
     background-color: rgb(248, 215, 218) !important;
     border-radius: 11px;
 }
 
 /* Selector más específico para sobrescribir estilos activos */
 .fi-sidebar-item.fi-sidebar-item-active.has-notifications a,
 .fi-sidebar-item.fi-sidebar-item-active:has(.fi-badge.has-notifications) a {
     background-color: rgb(248, 215, 218) !important;
     border-color: #b81818 !important;
     border-radius: 11px;
 }
 
 .fi-sidebar-item.fi-sidebar-item-active.has-notifications a,
 .fi-sidebar-item.fi-sidebar-item-active:has(.fi-badge.has-notifications) a {
     background-color: rgb(248, 215, 218) !important;
     border-radius: 11px;
 }
 
 /* Selector con máxima especificidad para el enlace activo */
 .fi-sidebar-item.fi-sidebar-item-active.has-notifications a,
 .fi-sidebar-item.fi-sidebar-item-active:has(.fi-badge.has-notifications) a,
 .fi-sidebar-item-active.has-notifications a {
     background-color: rgb(248, 215, 218) !important;
     border-radius: 11px;
 }
 
 /* CSS con máxima prioridad para sobrescribir estilos activos de Filament */
 .fi-sidebar-item-active.has-notifications a {
     background-color: rgb(248, 215, 218) !important;
     border-radius: 11px !important;
 }
 
 .fi-sidebar-item-active.has-notifications {
     background-color: rgb(248, 215, 218) !important;
     border-color: #b81818 !important;
     border-radius: 11px !important;
 }
 
 /* Fondo naranja para notificaciones pendientes activas (sin no leídas) */
 .fi-sidebar-item:has(.fi-badge.has-pending-act),
 .fi-sidebar-item.has-pending-act {
     background-color: rgb(255, 243, 205) !important;
     border-color: rgb(255, 193, 7) !important;
     border-radius: 11px;
 }
 
 .fi-sidebar-item:has(.fi-badge.has-pending-act):hover,
 .fi-sidebar-item:has(.fi-badge.has-pending-act):hover a,
 .fi-sidebar-item.has-pending-act:hover,
 .fi-sidebar-item.has-pending-act:hover a {
     background-color: rgb(255, 235, 153) !important;
     border-radius: 11px;
 }
 
 /* Clase para badge naranja cuando hay notificaciones pendientes activas */
 .fi-sidebar-item .fi-badge.has-pending-act {
     background-color: #ff8c00 !important;
     background: #ff8c00 !important;
 }
 
 .fi-sidebar-item .fi-badge.has-pending-act span {
     color: white !important;
 }
 
 /* Selectores más específicos para badge naranja */
 .fi-sidebar-nav .fi-sidebar-item .fi-badge.has-pending-act {
     background-color: #ff8c00 !important;
     background: #ff8c00 !important;
 }
 
 .fi-sidebar-nav .fi-sidebar-item .fi-badge.has-pending-act span {
     color: white !important;
 }
 
 /* Mantener badge naranja incluso cuando el elemento está activo */
 .fi-sidebar-item-active .fi-badge.has-pending-act {
     background-color: #ff8c00 !important;
 }
 
 .fi-sidebar-item-active .fi-badge.has-pending-act span {
     color: white !important;
 }
 
 /* Mantener fondo naranja cuando el elemento está activo y tiene notificaciones pendientes */
 .fi-sidebar-item-active:has(.fi-badge.has-pending-act) a,
 .fi-sidebar-item-active.has-pending-act a {
     background-color: rgb(255, 243, 205) !important;
     border-color: #ff8c00 !important;
     border-radius: 11px;
 }
 
 /* Selector más específico para sobrescribir estilos activos con naranja */
 .fi-sidebar-item.fi-sidebar-item-active.has-pending-act a,
 .fi-sidebar-item.fi-sidebar-item-active:has(.fi-badge.has-pending-act) a {
     background-color: rgb(255, 243, 205) !important;
     border-color: #ff8c00 !important;
     border-radius: 11px;
 }
 
 /* CSS con máxima prioridad para sobrescribir estilos activos de Filament con naranja */
 .fi-sidebar-item-active.has-pending-act a {
     background-color: rgb(255, 243, 205) !important;
     border-radius: 11px !important;
 }
 
 .fi-sidebar-item-active.has-pending-act {
     background-color: rgb(255, 243, 205) !important;
     border-color: #ff8c00 !important;
     border-radius: 11px !important;
 }
 .fi-sidebar-item-active a{
     background-color: #B2CA04;
 }
 .fi-sidebar-item:hover a{
     background-color:#e8ebcc;
 }
 .fi-wi-stats-overview-stat{
     background-color: #EBF0C9;
     border-radius: 11px;
 }
 /* barra lateral */
 .fi-sidebar-nav{
     box-shadow: 2px 0px 2px rgb(179, 179, 179);
 }
 /* tabs */
 .flex .fi-tabs{
     background-color: transparent;
     border-radius: 0;
     box-shadow: none;
 }
 .flex .fi-tabs-item {
     background-color: transparent ; 
     border-radius: 0;
 }
 
 .flex .fi-tabs-item-active {
     background-color: #B2CA04; 
     font-weight: bold;
 }
 nav .flex .fi-badge{
     background-color: #4F5907; 
     border-radius: 0;
 }
 nav .flex .fi-badge span{
     color: white;
 }
 
 
 
 /* widget inicio */
 .fi-wi-stats-overview-stats-ctn a{
     box-shadow: 0 0 8px rgb(218, 218, 218);
     border-radius: 0px;
 }
 
 #closeModal{
     right: 0;
 }
 
 .fi-simple-header img {
     border-radius: 5px;
 }
 .flex .fi-wi-stats-overview-stat-icon{
     width: 3.25rem;
     height: 3.25rem;
 }
 .fi-wi-stats-overview-stats-ctn
 {
    border-radius: 0%; 
 }
 /* botones resource */
 .fi-ac a{
     border-radius: 0%; 
 }

 /* Forzar posición de acciones de tabla al inicio */
 .fi-table thead tr th:first-child,
 .fi-table tbody tr td:first-child {
     order: -1 !important;
 }
 
 /* Si la tabla usa flexbox, forzar el orden */
 .fi-table [class*="actions"] {
     order: -1 !important;
 }
 
 /* Select de empresa en el sidebar - Dropdown personalizado */
 .empresa-selector-sidebar {
     margin-bottom: 0.75rem;
 }
 
 .empresa-select-sidebar {
     width: 105%;
     padding: 0.5rem;
     padding-right: 4.5rem;
     font-size: 0.875rem;
     border: 1px solid #d1d5db;
     border-radius: 0.75rem;
     background-color: white;
     color: #374151;
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
     background-position: right .5rem center;
     background-repeat: no-repeat;
     background-size: 1.5em 1.5em;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
     margin-left: -0.5rem;
 }
 
 .empresa-select-sidebar:focus {
     outline: none;
     border-color: #4F5907;
     box-shadow: 0 0 0 1px #4F5907;
 }
 
 /* Contenedor del dropdown cuando el sidebar está expandido */
 .empresa-dropdown-container-sidebar {
     position: relative;
 }
 
 .empresa-dropdown-button-sidebar {
     width: 100%;
     background: white;
     border: 1px solid #d1d5db;
     border-radius: 0.375rem;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     color: #374151;
     cursor: pointer;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 2.25rem;
 }
 
 .empresa-dropdown-button-sidebar:hover {
     border-color: #9ca3af;
 }
 
 .empresa-dropdown-button-sidebar:focus {
     outline: none;
     border-color: #4F5907;
     box-shadow: 0 0 0 1px #4F5907;
 }
 
 .empresa-button-content-sidebar {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     width: 100%;
 }
 
 .empresa-icon-sidebar {
     width: 1rem;
     height: 1rem;
     color: #6b7280;
     flex-shrink: 0;
 }
 
 .empresa-text-sidebar {
     flex: 1;
     text-align: left;
     font-size: 0.875rem;
     color: #374151;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .empresa-arrow-sidebar {
     width: 1rem;
     height: 1rem;
     color: #6b7280;
     flex-shrink: 0;
     transition: transform 0.15s ease-in-out;
 }
 
 .empresa-dropdown-menu-sidebar {
     position: absolute;
     top: calc(100% + 0.25rem);
     left: 0;
     right: 0;
     background: white;
     border: 1px solid #d1d5db;
     border-radius: 0.375rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     z-index: 50;
     max-height: 10rem;
     overflow-y: auto;
 }
 
 .empresa-dropdown-item-sidebar {
     display: block;
     width: 100%;
     padding: 0.5rem 0.75rem;
     text-align: left;
     background: transparent;
     border: none;
     color: #374151;
     font-size: 0.875rem;
     cursor: pointer;
     transition: background-color 0.15s ease-in-out;
     border-bottom: 1px solid #f3f4f6;
 }
 
 .empresa-dropdown-item-sidebar:last-child {
     border-bottom: none;
 }
 
.empresa-dropdown-item-sidebar:hover {
    background-color: #e8ebcc;
}
 
 .empresa-dropdown-item-active-sidebar {
     background-color: #4F5907;
     color: white;
 }
 
 .empresa-dropdown-item-active-sidebar:hover {
     background-color: #3d4706;
 }
 
/* Contenedor del dropdown cuando el sidebar está colapsado */
.empresa-dropdown-container-sidebar-collapsed {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
}
.empresa-dropdown-container-sidebar-collapsed:hover {
   
    background-color: rgb(232, 235, 204);
    border-radius: 0.5rem;
}

/* Botón del selector cuando el sidebar está colapsado - mismo estilo que los botones del sidebar */
.empresa-dropdown-container-sidebar-collapsed button {
    width: 100%;
    height: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    transition: all 0.15s ease-in-out;
}

.empresa-dropdown-container-sidebar-collapsed button:hover {
    background-color: #e8ebcc;
}

.empresa-dropdown-container-sidebar-collapsed button:focus {
    outline: none;
    background-color: #e8ebcc;
}
 
 /* Estilos para modo oscuro */
 @media (prefers-color-scheme: dark) {
     .empresa-dropdown-button-sidebar {
         background: #1f2937;
         border-color: #374151;
         color: #f9fafb;
     }
     
     .empresa-dropdown-button-sidebar:hover {
         border-color: #6b7280;
     }
     
     .empresa-icon-sidebar,
     .empresa-arrow-sidebar {
         color: #9ca3af;
     }
     
     .empresa-text-sidebar {
         color: #f9fafb;
     }
     
     .empresa-dropdown-menu-sidebar {
         background: #1f2937;
         border-color: #374151;
     }
     
     .empresa-dropdown-item-sidebar {
         color: #f9fafb;
         border-bottom-color: #374151;
     }
     
    .empresa-dropdown-item-sidebar:hover {
        background-color: #e8ebcc;
    }
 }
 
 /* Responsive */
 @media (max-width: 768px) {
     .empresa-selector-sidebar {
         margin-bottom: 0.5rem;
         padding: 0 0.25rem;
     }
     
     .empresa-dropdown-button-sidebar {
         padding: 0.375rem 0.5rem;
         min-height: 2rem;
     }
     
     .empresa-text-sidebar {
         font-size: 0.8125rem;
     }
     
     .empresa-dropdown-container-sidebar-collapsed {
         margin-bottom: 0.5rem;
         padding: 0 0.25rem;
     }
 }

/* Widgets de actividades - Ocultar en móvil y mostrar texto simple */
@media (max-width: 768px) {
    /* Ocultar los widgets de actividades en móvil (los que Filament renderiza automáticamente) */
    .fi-resource-actividades-resource .fi-page-header-widgets,
    .fi-resource-list-records-page.fi-resource-actividades-resource .fi-page-header-widgets,
    .fi-resource-actividades-resource .fi-wi-stats-overview-stats-ctn,
    .fi-resource-list-records-page.fi-resource-actividades-resource .fi-wi-stats-overview-stats-ctn,
    .fi-page.fi-resource-list-records-page.fi-resource-actividades-resource .fi-page-header-widgets,
    .fi-page.fi-resource-list-records-page.fi-resource-actividades-resource .fi-wi-stats-overview-stats-ctn {
        display: none !important;
    }
    
    /* Ocultar cualquier widget de stats overview en la página de actividades en móvil */
    .fi-resource-actividades-resource [class*="fi-wi-stats-overview"],
    .fi-resource-list-records-page.fi-resource-actividades-resource [class*="fi-wi-stats-overview"] {
        display: none !important;
    }
    
    /* Asegurar que el texto móvil se muestre */
    .actividades-mobile-summary {
        display: block !important;
    }
}