/* Guía de colores
-Primario: #8AB9D4
-Secundario: #295C75
-Terciario: ##A1A1AA
-Texto: #09090b
-Fondo: #F0F0F0
-Fondo Secundario: #eaf1f7;
-Texto Primario: #09090b
-Texto Secundario: #A1A1AA
-Texto Terciario: #8AB9D4
*/
/* .filepond--file-wrapper.error {
    background-color: red;
}

.filepond--file-wrapper {
    background-color: transparent;
} */

.fi-tabs-item-active {
    background-color: #b6b6b638; 
    color: white; 
}
/* hint de subida de documentos */
.fi-fo-field-wrp-hint {
    padding: 5px 10px;
    border-radius: 6px;
    color:#295C75;
    font-weight: 600;
    background-color: #eaf1f7;
}

/* Login
.fi-simple-main-ctn{
    background-image: url("/images/login.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
} */
/* Login Formulario */
.fi-simple-main-ctn .fi-simple-main {
    padding-bottom: 2.5rem;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #eaf1f7ad;
}   
.fi-form {
    padding: 1.5rem 2.5rem;
}
.fi-simple-main .fi-form .fi-fo-field-wrp-hint {
    background-color: #eaf1f700;
}
.fi-simple-header {
    background-color: #fff !important;
    padding: 5%;
    border-radius: 0.75rem 0.75rem 0rem 0rem;
}
 /* Login - Video de fondo */
#video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.login-background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}
/*Top Bar*/
.fi-topbar nav, .overflow-x-clip .fi-sidebar-header{
    background-color: #fff;
    border-bottom: 1px solid #8AB9D4;
    padding-left: 1rem;
    padding-right: .5rem;
    position: relative;
}

/* Asegurar que el botón hamburguesa esté siempre a la izquierda */
.fi-topbar .fi-sidebar-open-button {
    position: absolute !important;
    left: 1rem !important;
    z-index: 20 !important;
}

/* Asegurar que el logo/branding esté después del botón hamburguesa */
.fi-topbar .fi-brand {
    margin-left: 3rem !important;
}

/* Widgets de sistema en topbar */
.system-info-topbar-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.space-info-topbar {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.375rem;
    border: 1px solid rgba(138, 185, 212, 0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.space-info-topbar:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(138, 185, 212, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dark .space-info-topbar {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(138, 185, 212, 0.2);
}

.dark .space-info-topbar:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(138, 185, 212, 0.4);
}

.space-info-topbar img {
    filter: brightness(0.8);
}

.dark .space-info-topbar img {
    filter: brightness(1.2);
}

.clients-info-topbar {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.375rem;
    border: 1px solid rgba(138, 185, 212, 0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.clients-info-topbar:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(138, 185, 212, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dark .clients-info-topbar {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(138, 185, 212, 0.2);
}

.dark .clients-info-topbar:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(138, 185, 212, 0.4);
}

.clients-info-topbar img {
    filter: brightness(0.8);
}

.dark .clients-info-topbar img {
    filter: brightness(1.2);
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
    .system-info-topbar-container {
        gap: 0.5rem;
    }
    
    .space-info-topbar,
    .clients-info-topbar {
        padding: 0.125rem 0.375rem;
        font-size: 0.75rem;
    }
    
    .space-info-topbar img,
    .clients-info-topbar img {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .space-info-topbar span,
    .clients-info-topbar span {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .system-info-topbar-container {
        gap: 0.25rem;
    }
    
    .space-info-topbar,
    .clients-info-topbar {
        padding: 0.25rem;
        position: relative;
        overflow: visible;
    }
    
    /* Ocultar texto en pantallas pequeñas */
    .space-info-topbar span,
    .clients-info-topbar span {
        display: none;
    }
    
    /* Solo mostrar icono */
    .space-info-topbar img,
    .clients-info-topbar img {
        width: 1rem;
        height: 1rem;
    }
    
    /* Tooltip con información completa al hacer hover */
    .space-info-topbar:hover::after,
    .clients-info-topbar:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: -2.5rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        white-space: nowrap;
        z-index: 1000;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .space-info-topbar:hover::before,
    .clients-info-topbar:hover::before {
        content: '';
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        border: 0.25rem solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
    }
}
.fi-sidebar-header img{
    height: auto;
}
/*Sidebar*/
.fi-sidebar-nav {
    box-shadow: 6px 2px 6px #8ab9d41f;
    background-color: #fff;
    padding: 2rem 0rem !important;
}
/*Estilo de los títulos de los collapses*/
.fi-sidebar-group .fi-sidebar-group-button{
    padding: 0rem 2rem;
    border-bottom: 1px dashed #295C75;
    margin-right: -10px;
    padding-bottom: 5px;
}
.fi-sidebar-group-items{
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 10px;
}
.fi-sidebar-item a{
    margin-top: -4px;
    width: 100%;
    padding: 0.5rem 2rem;
    border-bottom: 1px dashed #8ab9d4a9;
    border-radius: 0px;
}
.fi-sidebar-item a:hover {
    background-color: #eaf1f7;
}
.fi-sidebar-item-active a {
    background-color: #8ab9d46e;
}
.fi-sidebar-item-active a span {
    font-weight: bold;
}

/*Carpetas inicio*/
.fi-section-content-ctn img{
    max-width: 77px !important;
}
.custom-grid a div:hover {
    border-radius: 0.75rem;
    box-shadow: 0px 2px 12px #8AB9D440;
}
/*Tabs*/
.flex .fi-tabs {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}
.flex .fi-tabs-item-active {
    background-color: #8AB9D4;
    border-radius: 0;
    font-weight: bold;
}
/*Tablas*/
nav .flex .fi-badge {
    background-color: #295C75;
    border-radius: 100%;
    color: #fff ;
}
nav .flex .fi-badge span {
    color: #fff !important;
}
.fi-ta-ctn{
    border-radius: 0 !important;
}
.fi-ta-ctn>div>div:nth-child(-n + 2), .fi-pagination{
    background-color: #eaf1f7;
    border-bottom: 1px solid #8AB9D4;
    border-radius: 0 !important;
}
.fi-ta-empty-state {
    background-color: #fff !important;
    border-top: 1px solid #8AB9D4 !important;
}
thead tr{
    background-color: #8AB9D4 !important;
}
tr{
    border: 0px !important;
    border-top: 1px solid #8AB9D4 !important;
    border-bottom: 1px solid #8AB9D4 !important;
}

/* Dropdown de Clientes - Estilo de Barra Lateral */
.sidebar-style {
    background-color: #f6f9fc;
    border-radius: 0;
    box-shadow: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-style .sidebar-item {
    background-color: #fff !important;
    border: none !important;
    color: #374151 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    border-top: 1px dashed #295c75 !important;
    border-bottom: 1px dashed #295c75 !important;
    margin-bottom: 0 !important;
}

.sidebar-style .sidebar-item:hover {
    background-color: #f8fafc !important;
}

.sidebar-style .sidebar-menu,
.clients-dropdown .sidebar-menu {
    background-color: #f8f9fa !important;
    border-top: 1px dotted #8AB9D4 !important;
    border-bottom: 1px dotted #8AB9D4 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: -1px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.5rem 2rem !important;
}

.sidebar-style .sidebar-menu-item {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    width: 100% !important;
    text-align: left !important;
    transition: background-color 0.2s ease !important;
}

.sidebar-style .sidebar-menu-item:hover {
    background-color: #f8fafc !important;
}

.sidebar-style .sidebar-menu-item.active {
    background-color: #e0f2fe !important;
    border-left: 3px solid #8AB9D4 !important;
}

.sidebar-style .sidebar-menu-item.active .font-medium {
    color: #1e40af !important;
    font-weight: 600 !important;
}

/* Separadores punteados */
.sidebar-style .border-dotted {
    border-top: 1px dotted #8AB9D4 !important;
    margin: 0 16px !important;
}

/* Iconos del sidebar */
.sidebar-style .sidebar-menu-item svg {
    color: #6b7280 !important;
    transition: color 0.2s ease !important;
}

.sidebar-style .sidebar-menu-item.active svg {
    color: #8AB9D4 !important;
}

/* Chevron icons */
.sidebar-style .sidebar-menu-item .flex-shrink-0 svg {
    color: #9ca3af !important;
}

/* Forzar líneas punteadas en el dropdown */
.clients-dropdown.sidebar-style .absolute.sidebar-menu {
    background-color: #fff !important;
    border-top: 1px dotted #8AB9D4 !important;
    border-bottom: 1px dotted #8AB9D4 !important;
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.5rem 2rem !important;
}

/* Estilo para el botón principal del dropdown */
.clients-dropdown button {
    background-color: #f8f9fa !important;
    border: 1px solid #8AB9D4 !important;
    color: #374151 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
}

.clients-dropdown button:hover {
    background-color: #f1f5f9 !important;
    border-color: #295C75 !important;
}

.clients-dropdown button:focus {
    outline: none !important;
    border-color: #295C75 !important;
    box-shadow: 0 0 0 2px rgba(138, 185, 212, 0.2) !important;
}

.clients-dropdown .font-medium {
    color: #374151 !important;
    font-weight: 500 !important;
}

.clients-dropdown .text-xs {
    color: #6b7280 !important;
}

.clients-dropdown svg {
    color: #6b7280 !important;
}

/* Panel desplegable */
.clients-dropdown .absolute,
.clients-dropdown .absolute.sidebar-menu {
    background-color: #fff !important; 
    border-top: 1px dotted #8AB9D4 !important;
    border-bottom: 1px dotted #8AB9D4 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: -1px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0px !important;
    padding: 0.5rem 1rem !important;
}

/* Buscador */
.clients-dropdown .border-b {
    border-bottom: 1px dotted #8AB9D4 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 16px !important;
}

.clients-dropdown input {
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    color: #374151 !important;
    padding: 12px 16px 12px 44px !important;
    font-size: 14px !important;
    width: 100% !important;
}

.clients-dropdown input:focus {
    outline: none !important;
    border-color: #8AB9D4 !important;
    box-shadow: 0 0 0 2px rgba(138, 185, 212, 0.2) !important;
}

.clients-dropdown input::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
}

.clients-dropdown .h-4 {
    color: #6b7280 !important;
}

/* Posición del ícono de búsqueda */
.clients-dropdown .absolute.inset-y-0 {
    top: 8px !important;
}

/* Lista de clientes */
.clients-dropdown .hover\:bg-blue-50:hover {
    background-color: #f8fafc !important;
}

.clients-dropdown .hover\:bg-gray-50:hover {
    background-color: #f8fafc !important;
}

.clients-dropdown .border-gray-200 {
    border-color: #e5e7eb !important;
}

.clients-dropdown .border-gray-100 {
    border-color: #e5e7eb !important;
}

.clients-dropdown .border-gray-300 {
    border-color: #e5e7eb !important;
}

/* Avatar "Todos" */
.clients-dropdown .bg-blue-100 {
    background-color: #dbeafe !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.clients-dropdown .text-blue-600 {
    color: #2563eb !important;
    font-size: 14px !important;
}

/* Avatar cliente individual */
.clients-dropdown .bg-gray-100 {
    background-color: #f3f4f6 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.clients-dropdown .text-gray-600 {
    color: #4b5563 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.clients-dropdown .text-gray-900 {
    color: #111827 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.clients-dropdown .text-gray-500 {
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* Checkmark de selección */
.clients-dropdown .text-blue-600 {
    color: #2563eb !important;
}

/* Elementos de la lista */
.clients-dropdown .max-h-48 button {
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.clients-dropdown .max-h-48 button:hover {
    background-color: #f8fafc !important;
}

/* Cliente seleccionado - usando clase específica */
.clients-dropdown .max-h-48 button.selected {
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
}

/* Espaciado de elementos */
.clients-dropdown .flex {
    gap: 12px !important;
}

.clients-dropdown .ml-3 {
    margin-left: 12px !important;
}

/* ===========================================
   MEDIA QUERIES RESPONSIVE
   =========================================== */

/* Tablets y pantallas medianas (768px - 1023px) */
@media (max-width: 1023px) {
    /* Sidebar responsive */
    .fi-sidebar-nav {
        padding: 1rem 0rem !important;
    }
    
    .fi-sidebar-group .fi-sidebar-group-button {
        padding: 0rem 1rem;
    }
    
    .fi-sidebar-item a {
        padding: 0.4rem 1rem;
    }
    
    /* Topbar responsive */
    .fi-topbar nav, .overflow-x-clip .fi-sidebar-header {
        padding-left: 0.5rem;
        padding-right: 0.25rem;
    }
    
    /* Formularios responsive */
    .fi-form {
        padding: 1rem 1.5rem;
    }
    
    /* Imágenes responsive */
    .fi-section-content-ctn img {
        max-width: 60px !important;
    }
    
    /* Dropdown de clientes responsive */
    .clients-dropdown button {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    
    .clients-dropdown .max-h-48 button {
        padding: 10px 12px !important;
    }
}

/* Móviles (hasta 767px) */
@media (max-width: 767px) {
    /* Sidebar completamente responsive */
    .fi-sidebar-nav {
        padding: 0.5rem 0rem !important;
    }
    
    .fi-sidebar-group .fi-sidebar-group-button {
        padding: 0rem 0.75rem;
        font-size: 14px;
    }
    
    .fi-sidebar-group-items {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 5px;
    }
    
    .fi-sidebar-item a {
        padding: 0.3rem 0.75rem;
        font-size: 14px;
    }
    
    /* Topbar móvil */
    .fi-topbar nav, .overflow-x-clip .fi-sidebar-header {
        padding-left: 0.25rem;
        padding-right: 0.125rem;
    }
    
    .fi-sidebar-header img {
        height: 30px !important;
    }
    
    /* Formularios móvil */
    .fi-form {
        padding: 0.75rem 1rem;
    }
    
    .fi-simple-main .fi-form {
        padding: 1rem 1.25rem;
    }
    
    /* Imágenes móvil */
    .fi-section-content-ctn img {
        max-width: 50px !important;
    }
    
    /* Tabs móvil */
    .flex .fi-tabs-item-active {
        font-size: 14px;
        padding: 0.5rem 0.75rem;
    }
    
    /* Tablas móvil */
    .fi-ta-ctn {
        font-size: 14px;
    }
    
    /* Dropdown de clientes móvil */
    .clients-dropdown button {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .clients-dropdown .max-h-48 button {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .clients-dropdown .bg-blue-100,
    .clients-dropdown .bg-gray-100 {
        width: 28px !important;
        height: 28px !important;
    }
    
    .clients-dropdown .text-blue-600,
    .clients-dropdown .text-gray-600,
    .clients-dropdown .text-gray-900 {
        font-size: 13px !important;
    }
    
    .clients-dropdown .text-gray-500 {
        font-size: 12px !important;
    }
    
    /* Login móvil */
    .fi-simple-header {
        padding: 3% !important;
    }
    
    /* Video de fondo móvil */
    #video-background {
        object-fit: cover;
        object-position: center;
    }
}

/* Pantallas muy pequeñas (hasta 480px) */
@media (max-width: 480px) {
    /* Sidebar ultra compacta */
    .fi-sidebar-group .fi-sidebar-group-button {
        padding: 0rem 0.5rem;
        font-size: 13px;
    }
    
    .fi-sidebar-item a {
        padding: 0.25rem 0.5rem;
        font-size: 13px;
    }
    
    /* Formularios ultra compactos */
    .fi-form {
        padding: 0.5rem 0.75rem;
    }
    
    .fi-simple-main .fi-form {
        padding: 0.75rem 1rem;
    }
    
    /* Imágenes ultra pequeñas */
    .fi-section-content-ctn img {
        max-width: 40px !important;
    }
    
    /* Dropdown ultra compacto */
    .clients-dropdown button {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    .clients-dropdown .max-h-48 button {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    .clients-dropdown .bg-blue-100,
    .clients-dropdown .bg-gray-100 {
        width: 24px !important;
        height: 24px !important;
    }
    
    .clients-dropdown .text-blue-600,
    .clients-dropdown .text-gray-600,
    .clients-dropdown .text-gray-900 {
        font-size: 12px !important;
    }
    
    .clients-dropdown .text-gray-500 {
        font-size: 11px !important;
    }
    
    /* Login ultra compacto */
    .fi-simple-header {
        padding: 2% !important;
    }
}

/* Pantallas grandes (1024px en adelante) */
@media (min-width: 1024px) {
    /* Optimizaciones para pantallas grandes */
    .fi-sidebar-nav {
        padding: 2.5rem 0rem !important;
    }
    
    .fi-section-content-ctn img {
        max-width: 85px !important;
    }
    
    .fi-form {
        padding: 2rem 3rem;
    }
    
    .clients-dropdown button {
        padding: 14px 18px !important;
        font-size: 16px !important;
    }
}

/* Pantallas extra grandes (1440px en adelante) */
@media (min-width: 1440px) {
    .fi-section-content-ctn img {
        max-width: 100px !important;
    }
    
    .fi-form {
        padding: 2.5rem 4rem;
    }
}