.sort-header{cursor: pointer;}

/* Tablas conectadas de un registro (ver static/backend/js/connected-table.js).
   Las cabeceras ordenables se distinguen de las que no lo son. */
.ct-sort-header{cursor: pointer;}
.ct-sort-header:hover{text-decoration: underline;}

/* Visor de archivos subidos (ver static/backend/js/blob-viewer.js). */
.blob-visor{cursor: pointer;}
.blob-imagen img{transition: opacity .15s ease-in-out;}
.blob-imagen img:hover{opacity: .85;}
.blob-marco{width: 100%; height: 78vh; border: 0;}
.btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-light, .btn-dark{
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: #6c757d;
    border-color: #6c757d;
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: #6c757d;
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: #6c757d;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.tags-container { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: 5px; width: 100%;}
.tag { background-color: #007bff; color: white; padding: 5px 10px; border-radius: 3px; display: flex; align-items: center; }
.tag .remove-tag { margin-left: 5px; cursor: pointer; font-weight: bold; }
.tag-input { border: none; outline: none; flex: 1; min-width: 150px; }
.suggestions { border: 1px solid #ccc; border-top: none; max-height: 150px; overflow-y: auto; position: relative; background: white; width: 100%; z-index: 10; }
.suggestion-item { padding: 5px; cursor: pointer; }
.suggestion-item:hover { background-color: #f0f0f0; }
.dropzone {
border-style: dashed;
max-width: 200px;
}

#version-info {
    position: fixed; 
    bottom: 10px;    /* Distancia desde el borde inferior */
    right: 10px;     /* Distancia desde el borde derecho */
    font-size: 0.8em; /* Tamaño de letra más pequeño */
    color: #6c757d;   /* Color gris para discreción */
    padding: 3px 5px; /* Espacio interno */
    z-index: 1000;    /* Asegura que esté encima de otros elementos */
}

#image-preview-image, #image-preview-image img {
    max-width: 300px;
}
    /* Contenedor principal de Select2 */
    .select2-container .select2-selection--multiple {
        min-height: 40px !important;
        padding: .375rem .75rem; /* Padded como form-control */
        border: 1px solid #ced4da !important; /* Color de borde BS */
        border-radius: .25rem !important; /* Bordes redondeados BS */
        background-color: #fff !important;
        /* Quitamos focus styling por defecto de Select2 y lo gestionamos con BS */
        box-shadow: none !important; 
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* Estilo de los chips de tags (los elementos ya seleccionados) */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #6c757d !important; /* BS Primary Blue */
        border: 1px solid #6c757d !important; 
        color: white !important;
        border-radius: .25rem;
        padding: 2px 8px;
        font-size: 0.875rem;
        line-height: 1.5;
        margin-top: 4px;
    }

    /* Estilo del botón de remover (X) en el chip */
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff !important;
        margin-right: 4px;
        float: none; 
    }
    
    /* Efecto de focus (similar al de form-control:focus) */
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25) !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 15px;
    padding-right: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: #2b2b2b57;
    outline: none;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 4px;
    float: none;
    border-right: none;
    }
/* Estilos Surround anterior */
        body {
            background-color: #f8f9fa;
        }

        .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            color: #4b4b4b;
            font-size: 0.85rem;
        }

        .nav-tabs .nav-link.active {
            color: #bb3726;
            background-color: #e9ecef;
            border-color: #dee2e6 #dee2e6 #fff;
        }
        .nav-pills .nav-link:not(.active):hover {
            background: #f3f3f3;
            color: #333436;
            border-color: #dee2e6;
        }
        .nav-pills .nav-link {
            font-size: 0.75rem;
            padding: 0.25rem 0.9rem;
            border-radius: 0.2rem;
            background: transparent;
            color: #495057;
            border: 1px solid transparent;
            transition: background 0.2s, color 0.2s, border 0.2s;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            color: #fff;
            background-color: #495057;
            border-color: #495057;
        }
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: #e9ecef;
            padding: 0.75rem 1.25rem;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
        }

        .card-body {
            padding: 1.25rem;
        }

        .form-label {
            font-weight: 500;
            color: #495057;
        }

        .form-text {
            display: flex;
            align-items: center;
        }

        .material-icons {
            font-size: 1rem;
            margin: 0.25rem;
        }

        .btn-light {
            border: 1px solid #dee2e6;
        }

        /* Tablas ordenables arrastrando (`clazz.sortable`): el asa es la propia
           fila, asi que el cursor lo dice y la fila en movimiento se resalta.
           El atributo lo pone la plantilla solo cuando la tabla esta ordenada
           por el campo de posicion, de modo que aqui no hay nada que decidir. */
        tbody[data-orden-url] > tr {
            cursor: grab;
        }

        tbody[data-orden-url] > tr.sin-registros {
            cursor: default;
        }

        tbody[data-orden-url] > tr.fila-arrastrando {
            opacity: 0.6;
            background-color: #e9ecef;
        }

/* Estilos de Barra lateral */
:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --navbar-height: 65px;
    --sidebar-bg: #1e1e2d;
}

body { background-color: #f4f5f7; }

/* NAVBAR SUPERIOR */
.top-navbar {
    height: var(--navbar-height);
    z-index: 1050; /* Elevado para asegurar visibilidad */
}


/* SIDEBAR - Configuración Base (Desktop) */
.btn-close-sidebar {
    display: none;
}
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    height: calc(100vh - var(--navbar-height));
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    transition: all 0.3s ease-in-out;
    z-index: 1040;
    overflow-y: auto;
}

#sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Enlaces del Sidebar */
.sidebar-link {
    color: #a2a3b7;
    text-decoration: none;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.2s;
}
.sidebar-link:hover { background: #2b2b40; color: #fff; }
.sidebar-link.active { border-left: 3px solid #0d6efd; background: rgba(13, 110, 253, 0.1); color: #fff; }

/* Submenús */
.submenu-link {
    color: #7e8299;
    text-decoration: none;
    padding: 8px 20px 8px 5px;
    display: block;
    font-size: 0.9rem;
}
.submenu-link:hover { color: #fff; }
.arrow { transition: transform 0.3s; margin-left: auto; }
[aria-expanded="true"] .arrow { transform: rotate(90deg); }

/* CONTENIDO PRINCIPAL - Desktop */
.main-content {
    margin-left: var(--sidebar-width);
    padding-top: 20px;
    transition: all 0.3s ease-in-out;
}

.main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

@media (max-width: 767.98px) {
    #sidebar {
        /* Flotante por encima y oculto a la izquierda */
        top: 0 !important;
        height: 100vh !important;
        /* SOLUCIÓN: Usar calc() para el valor negativo */
        left: calc(-1 * var(--sidebar-width)) !important; 
        z-index: 1100 !important;
        position: fixed !important;
    }

    #sidebar.show-mobile {
        /* Se desliza sobre el contenido al activar */
        left: 0 !important;
    }

    .main-content, 
    .main-content.expanded {
        /* El contenido ocupa todo el ancho */
        margin-left: 0 !important;
    }

    .sidebar-overlay {
        z-index: 1090 !important;
    }

    .navbar-brand span {
        display: none !important;
    }
}
@media (max-width: 767.98px) {
    .btn-close-sidebar {
        display: flex !important;
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        color: #a2a3b7;
        border-radius: 5px;
        width: 35px;
        height: 35px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        z-index: 10;
    }

    .btn-close-sidebar:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    /* Le damos un poco de espacio al primer elemento del menú para que la X no lo tape */
    #sidebar .mt-3 {
        margin-top: 60px !important; 
    }
}
/* Utilidades de Colapso Desktop */
#sidebar.collapsed span, 
#sidebar.collapsed .bi-chevron-right { display: none; }
#sidebar.collapsed .sidebar-link { justify-content: center; padding: 15px 0; }
#sidebar.collapsed .sidebar-link i { font-size: 1.4rem; margin: 0 !important; }

/* OVERLAY */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1010;
}

.sidebar-overlay.active {
    display: block;
}

#sidebar.collapsed .collapse {
    display: none !important;
}

/* Scrollbar */
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-thumb {
    background: #3e3e52;
    border-radius: 10px;
}


/* ------------------------------------------------------------------- */
/* SOLUCIÓN: Sobrescribir estilos de jsTree para usar Material Icons */
/* ------------------------------------------------------------------- */
/* 1. LIMPIEZA Y FUENTE DE BOOTSTRAP ICONS */
.jstree-ocl, 
.jstree-checkbox, 
.jstree-themeicon {
    background: none !important;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: normal !important;
    text-transform: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* 2. FLECHAS (OCL) - Usando Chevron de Bootstrap */
.jstree-node > .jstree-ocl::before {
    content: "\F231"; /* bi-chevron-right */
    font-size: 0.9rem;
    color: #6c757d;
    transition: transform 0.2s ease;
}

/* Rotación al abrir */
.jstree-open > .jstree-ocl::before {
    transform: rotate(90deg);
}

/* Ocultar en hojas finales */
.jstree-leaf > .jstree-ocl::before {
    content: ""; 
}

/* 3. CHECKBOXES - Estilo Bootstrap */
.jstree-checkbox::before {
    content: "\F5D5"; /* bi-square */
    font-size: 1.1rem;
    color: #dee2e6;
}

/* Estado Seleccionado */
.jstree-checked > .jstree-checkbox::before,
.jstree-clicked > .jstree-checkbox::before {
    content: "\F5D6"; /* bi-check-square-fill */
    color: #0d6efd;
}

/* Estado Indeterminado (semi-seleccionado) */
.jstree-anchor > .jstree-undetermined::before {
    content: "\F5D7"; /* bi-check-square */
    color: #6c757d;
}

/* 4. ICONOS DE CARPETA Y ARCHIVO */
.jstree-themeicon-custom.icon-folder::before {
    content: "\F3D1"; /* bi-folder-fill */
    color: #6c757d;
    font-size: 1.1rem;
    margin-right: 4px;
}

.jstree-themeicon-custom.icon-file::before {
    content: "\F38A"; /* bi-file-earmark-text */
    color: #6c757d;
    font-size: 1.1rem;
    margin-right: 4px;
}

/* 5. AJUSTES DE ESPACIADO Y ESTILO */
.jstree-anchor {
    display: inline-flex !important;
    align-items: center;
    height: 35px !important;
    border-radius: 4px;
    padding-right: 10px !important;
    color: #333 !important;
}

.jstree-hovered {
    background-color: rgba(13, 110, 253, 0.05) !important;
    box-shadow: none !important;
}

.jstree-clicked {
    background-color: rgba(13, 110, 253, 0.1) !important;
    box-shadow: none !important;
}