/* Custom CSS */

/* Global: No rounded buttons — all .btn variants must have square corners */
.btn,
.btn-sm,
.btn-lg,
[class*="btn-"] {
    border-radius: 0 !important;
}


/* Fix alert warning text visibility */
[data-bs-theme="light"] .alert-warning,
[data-bs-theme="light"] .alert-warning p,
[data-bs-theme="light"] .alert-warning span,
[data-bs-theme="light"] .alert-warning strong,
[data-bs-theme="light"] .alert-warning .form-text,
[data-bs-theme="light"] .alert-warning h1,
[data-bs-theme="light"] .alert-warning h2,
[data-bs-theme="light"] .alert-warning h3,
[data-bs-theme="light"] .alert-warning h4,
[data-bs-theme="light"] .alert-warning h5,
[data-bs-theme="light"] .alert-warning h6 {
    color: #000 !important;
}

[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-warning p,
[data-bs-theme="dark"] .alert-warning span,
[data-bs-theme="dark"] .alert-warning strong,
[data-bs-theme="dark"] .alert-warning .form-text,
[data-bs-theme="dark"] .alert-warning h1,
[data-bs-theme="dark"] .alert-warning h2,
[data-bs-theme="dark"] .alert-warning h3,
[data-bs-theme="dark"] .alert-warning h4,
[data-bs-theme="dark"] .alert-warning h5,
[data-bs-theme="dark"] .alert-warning h6 {
    color: #ffda6a !important;
}

/* Fix badge bg-secondary contrast - Make it look like bg-dark as requested */
.badge.bg-secondary {
    color: #fff !important;
    background-color: #212529 !important;
    /* Bootstrap dark color */
}

/* Tabs Standardization: Inactive Black, Active Blue */
.nav-tabs .nav-link {
    color: #000000;
    /* Black for inactive tabs */
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary, #0d6efd) !important;
    /* Blue for active tab */
    font-weight: bold;
}

.nav-tabs .nav-link:hover {
    color: var(--bs-primary, #0d6efd);
    border-color: #e9ecef #e9ecef #dee2e6;
}

/* Fix Select2 text overlapping with the clear button 'x' */
.select2-selection__rendered {
    padding-right: 25px !important; 
}

/* Animation for blinking elements */
@keyframes blinker {
    50% { opacity: 0; }
}
.blink {
    animation: blinker 1s linear infinite;
}

/* Estandarización visual de desplegables en todo el ERP: flecha siempre visible y eliminación de checks de validación */
.form-select.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    padding-right: 2.25rem !important;
    border-color: #ced4da !important;
}

.form-select-sm.is-valid,
.was-validated .form-select-sm:valid,
.form-select-sm.is-valid:not([multiple]):not([size]),
.form-select-sm.is-valid:not([multiple])[size="1"],
.was-validated .form-select-sm:valid:not([multiple]):not([size]),
.was-validated .form-select-sm:valid:not([multiple])[size="1"] {
    padding-right: 1.75rem !important;
}

/* Evitar borde verde invasivo en Select2 validado */
.is-valid + .select2-container--bootstrap-5 .select2-selection,
.was-validated select:valid + .select2-container--bootstrap-5 .select2-selection {
    border-color: #ced4da !important;
}

/* Garantizar siempre la flecha estándar en todos los desplegables Select2 individuales (Bootstrap 5) */
.select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}

/* Adaptación para selects compactos o dentro de tablas */
.form-select-sm ~ .select2-container--bootstrap-5 .select2-selection--single,
select.select2-sm + .select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2--small.select2-selection--single,
table .select2-container--bootstrap-5 .select2-selection--single {
    background-position: right 0.5rem center !important;
    padding-right: 1.75rem !important;
}

/* ==========================================================================
   REGLA GENERAL: Estandarización Compacta de Select2 en toda la herramienta
   ========================================================================== */

/* 1. Contenedor cerrado individual (altura compacta estándar igual a form-control-sm) */
.select2-container--bootstrap-5 .select2-selection--single {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    padding-right: 1.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    display: flex !important;
    align-items: center !important;
    background-position: right 0.5rem center !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    font-size: 0.8125rem !important;
    color: #495057 !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    right: 1.25rem !important;
}

/* 2. Contenedor cerrado múltiple (etiquetas) */
.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 28px !important;
    padding: 1px 4px !important;
    font-size: 0.8125rem !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    display: flex !important;
    align-items: center !important;
}

/* Sin relleno vertical en la lista de etiquetas para que el múltiple con una etiqueta
   mida 28px como el resto de controles compactos (10/10/2026) */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Cada etiqueta de un Select2 múltiple en una sola línea (10/10/2026): el texto y sus iconos
   (p. ej. el de copiar en los emails del contacto) no se parten en dos filas; si no cabe, se corta con «…» */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    max-width: 100%;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: 0.75rem !important;
    padding: 1px 6px !important;
    margin: 1px 2px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    font-size: 0.8125rem !important;
    margin: 0 !important;
    height: 22px !important;
}

/* 3. Desplegable flotante y buscador interno con búsqueda en TODO el ERP */
.select2-container--bootstrap-5 .select2-dropdown .select2-search,
.select2-dropdown .select2-search {
    padding: 4px 6px !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
.select2-dropdown .select2-search .select2-search__field,
.select2-search--dropdown .select2-search__field {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 8px !important;
    font-size: 0.8125rem !important;
    border-radius: 4px !important;
    border: 1px solid #ced4da !important;
    box-sizing: border-box !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-dropdown .select2-results__options .select2-results__option {
    padding: 4px 8px !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
}



/* form-control-sm alineado con el estándar compacto de Select2 (28px).
   Incluye los estados de validación: app.min.css fuerza el padding de
   .form-control en .was-validated/:valid y anulaba el tamaño sm. */
input.form-control.form-control-sm,
.was-validated input.form-control.form-control-sm:valid,
.was-validated input.form-control.form-control-sm:invalid,
input.form-control.form-control-sm.is-valid,
input.form-control.form-control-sm.is-invalid {
    height: 28px;
    min-height: 28px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
}

/* ------------------------------------------------------------------
   Tamaño compacto (sm) unificado para todos los controles de formulario
   (10/10/2026, José): inputs, selects, Select2 y botones sm miden lo mismo
   (28px y 0.8125rem). Antes solo los inputs y Select2 tenían la regla, y los
   select nativos .form-select-sm salían con letra de 11px y los .btn-sm con
   31px, por eso los filtros quedaban desajustados. Las plantillas no deben
   forzar alturas: basta con usar las clases sm.
   ------------------------------------------------------------------ */
select.form-select.form-select-sm:not([multiple]):not([size]) {
    height: 28px;
    min-height: 28px;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    background-position: right 0.5rem center;
    font-size: 0.8125rem;
    line-height: 1.4;
    border-radius: 4px;
}

select.form-select.form-select-sm[multiple] {
    font-size: 0.8125rem;
    border-radius: 4px;
}

.btn.btn-sm:not(.btn-lg):not(.btn-close):not(.dropdown-item):not(.btn-xnet-normal),
.input-group-sm > .btn:not(.btn-lg):not(.btn-close):not(.dropdown-item):not(.btn-xnet-normal) {
    min-height: 28px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Caja amplia y legible para autocompletado de artículos / referencias en documentos de venta y compra */
.autocomplete-suggestions {
    box-sizing: border-box !important;
    min-width: 520px !important;
    max-width: min(800px, 94vw) !important;
    width: auto !important;
    background: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 380px !important;
    z-index: 99999 !important;
    font-size: 0.875rem !important;
    padding: 4px 0 !important;
}

.autocomplete-suggestion {
    padding: 8px 14px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f1f3f5 !important;
    transition: background-color 0.15s ease-in-out !important;
}

.autocomplete-suggestion:last-child {
    border-bottom: none !important;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.autocomplete-selected {
    background-color: #e9f2ff !important;
    color: #0b5ed7 !important;
}

.autocomplete-suggestion strong {
    color: #0d6efd !important;
    font-weight: 700 !important;
}

.autocomplete-no-suggestion {
    padding: 10px 14px !important;
    color: #6c757d !important;
    font-style: italic !important;
}

/* Modo oscuro */
[data-bs-theme="dark"] .autocomplete-suggestions,
.dark-mode .autocomplete-suggestions {
    background: #2a3042 !important;
    border-color: #3e465b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #e9ecef !important;
}

[data-bs-theme="dark"] .autocomplete-suggestion,
.dark-mode .autocomplete-suggestion {
    border-bottom-color: #32394e !important;
}

[data-bs-theme="dark"] .autocomplete-suggestion:hover,
[data-bs-theme="dark"] .autocomplete-suggestion.autocomplete-selected,
.dark-mode .autocomplete-suggestion:hover,
.dark-mode .autocomplete-suggestion.autocomplete-selected {
    background-color: #38425d !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .autocomplete-suggestion strong,
.dark-mode .autocomplete-suggestion strong {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .autocomplete-no-suggestion,
.dark-mode .autocomplete-no-suggestion {
    color: #a6b0cf !important;
}


/* ------------------------------------------------------------------
   Botones compactos en todo el ERP (05/10/2026)
   Decision de Jose: todos los botones se muestran en tamano small.
   Se replican los valores de .btn-sm de Bootstrap 5.1.3 para no
   tener que anadir la clase en cada plantilla.
   Excepciones: .btn-lg (botones grandes a proposito), .btn-close
   (icono de cerrar de los modales), .dropdown-item (opciones de un
   desplegable) y .btn-xnet-normal, que es la via de escape para
   dejar un boton concreto a tamano normal.
   ------------------------------------------------------------------ */
.btn:not(.btn-lg):not(.btn-close):not(.dropdown-item):not(.btn-xnet-normal) {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}


/* ------------------------------------------------------------------
   Select2 dentro de un input-group y botón de quitar (10/10/2026, José)
   Antes el desplegable copiaba width:100% del select y empujaba fuera del
   grupo el botón de al lado (p. ej. «Asignarme» del campo empleado), que
   se montaba sobre el campo siguiente. Además la X de quitar quedaba pegada
   a la flecha. Regla general para todos los Select2 del ERP.
   ------------------------------------------------------------------ */
.input-group > .select2-container {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.input-group > .select2-container:not(:last-child) .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .select2-container + .btn,
.input-group > .select2-container + .input-group-text {
    margin-left: -1px;
}

.select2-container--bootstrap-5 .select2-selection--single.select2-selection--clearable {
    padding-right: 2.75rem !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    right: 2rem !important;
}

.select2-container--bootstrap-5 .select2-selection--single.select2-selection--clearable .select2-selection__rendered {
    padding-right: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ------------------------------------------------------------------
   Estrellas como puntos (10/10/2026, José): siempre que se muestre una
   valoración en estrellas se pinta con puntos, amarillos los conseguidos y
   oscuros el resto. Parcial Blade: parts/estrellas. Select2: .select2-estrellas.
   ------------------------------------------------------------------ */
.xnet-estrellas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    line-height: 1;
}

.xnet-estrellas i {
    font-size: 0.5rem;
}

.xnet-estrella-on {
    color: var(--bs-warning, #f1b44c);
}

.xnet-estrella-off {
    color: #495057;
}

[data-bs-theme="dark"] .xnet-estrella-off,
.dark-mode .xnet-estrella-off {
    color: #6c757d;
}

/* Los widgets de valoración que ya existen (plugins «bootstrap-star-rating» y «bootstrap-rating»)
   también se pintan como puntos, sin tocar cada pantalla: el icono de estrella se oculta y cada
   posición se dibuja como un punto. Admiten medias valoraciones (medio punto amarillo). */
.rating-container .rating-stars {
    line-height: 1;
}

.rating-container .star,
.rating-symbol .rating-symbol-background,
.rating-symbol .rating-symbol-foreground > span {
    font-size: 0 !important;
}

.rating-container .star > *,
.rating-symbol .rating-symbol-background::after,
.rating-symbol .rating-symbol-foreground > span > * {
    display: none !important;
}

.rating-container .star::before,
.rating-symbol .rating-symbol-background::before,
.rating-symbol .rating-symbol-foreground > span::before {
    content: "";
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin: 0 2px;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
}

.rating-container .empty-stars,
.rating-symbol .rating-symbol-background {
    color: #495057 !important;
}

.rating-container .filled-stars,
.rating-symbol .rating-symbol-foreground,
.rating-symbol .rating-symbol-foreground > span {
    color: var(--bs-warning, #f1b44c) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}

[data-bs-theme="dark"] .rating-container .empty-stars,
[data-bs-theme="dark"] .rating-symbol .rating-symbol-background,
.dark-mode .rating-container .empty-stars,
.dark-mode .rating-symbol .rating-symbol-background {
    color: #6c757d !important;
}


/* ------------------------------------------------------------------
   Etiqueta de estado de ancho uniforme (10/10/2026, José): en listados,
   el estado va en una banda de color del mismo ancho para todas las filas,
   con el valor asociado (p. ej. la probabilidad) dentro de la propia banda.
   Uso: <span class="badge badge-estado bg-...">
          <span class="badge-estado-texto">Nuevo</span>
          <span class="badge-estado-valor">0 %</span></span>
   ------------------------------------------------------------------ */
.badge.badge-estado {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 11rem;
    max-width: 100%;
    padding: 0.35em 0.6em;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
}

.badge-estado .badge-estado-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-estado .badge-estado-valor {
    flex-shrink: 0;
    opacity: 0.85;
}


/* Barras de botones que parten en dos filas (Mi Email, Email Corp. y demás .btn-toolbar): aire entre filas (D-20261021-02) */
.btn-toolbar {
    row-gap: .5rem;
}

/* Móvil (27/10/2026): sin huecos vacíos en la cabecera de las pantallas y paginación cómoda con el dedo.
   El bloque de botones de la derecha de la cabecera, si no lleva ningún botón, no deja hueco (en el
   teléfono dejaba 16 px en blanco debajo de los botones de la izquierda). */
.buttons-right:not(:has(a, button, select, input)) {
    display: none !important;
}
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center;
        margin-top: .5rem;
    }
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: .3rem;
    }
    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px !important;
        font-size: 15px;
    }
}

/* Modal común de etiquetas (parts/ui/modal_etiqueta, 28/10/2026) */
.xet-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xet-swatch {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
    transition: transform .1s ease-in-out;
}
.xet-swatch:hover {
    transform: scale(1.12);
}
.xet-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.xet-swatch i {
    display: none;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
}
.xet-swatch:has(input:checked) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bs-primary, #556ee6);
}
.xet-swatch:has(input:checked) i {
    display: inline-block;
}
.xet-preview-box {
    min-height: 28px;
    display: flex;
    align-items: center;
}
.xet-preview-box .badge {
    font-size: .8125rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xet-opcion {
    border: 1px solid var(--bs-border-color, #e9ebec);
    border-radius: 6px;
    padding: 8px 10px;
    height: 100%;
}

/* ==========================================================================
   Pestañas en móvil (29/10/2026, José): sin «tarjeta dentro de tarjeta» con márgenes dobles.
   El panel de pestañas, su contenedor y las tarjetas interiores aprovechan el ancho; los bordes se mantienen.
   ========================================================================== */
@media (max-width: 575.98px) {
    .tab-content { padding: .75rem; }
    .tab-content .tab-pane > .container-fluid,
    .tab-content .tab-pane > .container { padding-left: 0; padding-right: 0; }
    .tab-content .tab-pane .card > .card-header,
    .tab-content .tab-pane .card > .card-body,
    .tab-content .tab-pane .card > .card-footer { padding: .75rem; }
    .tab-content .tab-pane .card { box-shadow: none; }
    /* Tablas dentro de pestañas: desplazamiento horizontal dentro de la tarjeta, nunca fuera de la pantalla */
    .tab-content .tab-pane .dataTables_wrapper,
    .tab-content .tab-pane .table-responsive { max-width: 100%; overflow-x: auto; }
    /* Cualquier tabla con el contenedor común: se desplaza dentro, la página nunca se ensancha */
    .table-responsive-datatable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Oportunidad del CRM en documentos: estado y «Desvincular» ocupan su fila */
    .crm-doc-acciones { width: 100%; }
    .crm-doc-acciones .badge-estado { flex-grow: 1; }
    /* Botones largos de una barra de pestaña: uno debajo del otro a todo el ancho */
    .tab-content .tab-pane .card-header .btn-group:not(.btn-group-toggle),
    .tab-content .tab-pane .d-flex.justify-content-end > .btn { width: 100%; }
}
.crm-doc-acciones { flex-shrink: 0; }

/* Página de inicio en la ficha del usuario: cuadro azul claro con el árbol del menú. 31/10/2026 */
.xnet-inicio-panel { background: rgba(var(--bs-primary-rgb), .10); border: 1px solid rgba(var(--bs-primary-rgb), .35); border-radius: .5rem; padding: .75rem; display: flex; flex-direction: column; }
.xnet-arbol-inicio { max-height: 360px; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .35rem .5rem; font-size: .8125rem; }
.xnet-arbol-inicio summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; padding: .2rem .25rem; border-radius: .25rem; }
.xnet-arbol-inicio summary::-webkit-details-marker { display: none; }
.xnet-arbol-flecha { font-size: .6rem; width: .7rem; color: var(--bs-secondary-color); transition: transform .15s; }
.xnet-arbol-inicio details[open] > summary > .xnet-arbol-flecha { transform: rotate(90deg); }
.xnet-arbol-carpeta.nivel-1 > summary { font-weight: 600; color: var(--bs-primary); }
.xnet-arbol-hijos { margin-left: .6rem; padding-left: .6rem; border-left: 1px dashed var(--bs-border-color); }
.xnet-arbol-pagina { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .15rem .25rem; border-radius: .25rem; cursor: pointer; }
.xnet-arbol-pagina .form-check-input { margin: 0; flex-shrink: 0; }
.xnet-arbol-pagina:hover, .xnet-arbol-inicio summary:hover { background: rgba(var(--bs-primary-rgb), .08); }
.xnet-arbol-pagina:has(input:checked) { background: rgba(var(--bs-primary-rgb), .15); font-weight: 600; }
.xnet-arbol-defecto { border-bottom: 1px solid var(--bs-border-color); margin-bottom: .25rem; padding-bottom: .35rem; }
/* Seguridad en la ficha del usuario: cuadro amarillo claro, a juego con el de la página de inicio. 31/10/2026 */
.card.xnet-seguridad-panel { background: rgba(var(--bs-warning-rgb), .15); border: 1px solid rgba(var(--bs-warning-rgb), .55); border-radius: .5rem; box-shadow: none; }
.card.xnet-seguridad-panel > .card-header { background: transparent; border-bottom: 1px solid rgba(var(--bs-warning-rgb), .45); }
/* Ficha del usuario como un puzle: datos en blanco con borde suave, seguridad debajo y la página de inicio a la derecha con la misma altura. 31/10/2026 */
.xnet-datos-panel { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .75rem .75rem .25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
@media (min-width: 1200px) { .xnet-inicio-panel .xnet-arbol-inicio { flex: 1 1 0; min-height: 220px; max-height: none; } }
/* Menú lateral: las pantallas que cuelgan directamente de un bloque llevan el icono alineado con el de las carpetas. 31/10/2026 */
#side-menu > li.sidebar-page > a > i { display: block; width: 28px; font-size: 16px; line-height: 22.5px; vertical-align: middle; padding-bottom: 2px; }
/* Gestor único de imágenes (parts/ui/gestor_imagen). 31/10/2026 */
.xim-escenario { position: relative; width: 280px; height: 280px; max-width: 100%; border-radius: .5rem; overflow: hidden; background: var(--bs-tertiary-bg); border: 2px dashed var(--bs-border-color); }
.xim-escenario.xim-encima { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }
.xim-actual, .xim-lienzo, .xim-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xim-lienzo { cursor: grab; touch-action: none; }
.xim-lienzo:active { cursor: grabbing; }
.xim-mascara { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.xim-redonda .xim-mascara { border-radius: 50%; box-shadow: 0 0 0 200px rgba(0, 0, 0, .45); }
.xim-soltar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--bs-secondary-color); font-size: .8125rem; background: var(--bs-tertiary-bg); }

/* ===== Ventanas (modales) estándar del ERP — 31/10/2026 =====
   Mismo botón de cerrar (pequeño, gris) en todas las ventanas de bootbox, y cabecera de xnetModal():
   icono en círculo de color, título y subtítulo pequeño. */
.bootbox .modal-header { align-items: center; padding: .75rem 1rem; }
.bootbox .modal-header .bootbox-close-button { width: .7rem; height: .7rem; padding: .4rem; opacity: .55; margin: 0 0 0 auto; background-size: .7rem; font-size: 0; }
.bootbox .modal-header .bootbox-close-button:hover { opacity: .85; }
.bootbox .modal-title { font-size: 1rem; }
.bootbox .modal-footer { padding: .5rem 1rem; }
.xnet-modal-cabecera { display: flex; align-items: center; gap: .75rem; }
.xnet-modal-icono { width: 2rem; height: 2rem; font-size: .9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.xnet-modal-icono-primary { background: rgba(85, 110, 230, .15); color: #556ee6; }
.xnet-modal-icono-success { background: rgba(52, 195, 143, .15); color: #34c38f; }
.xnet-modal-icono-warning { background: rgba(241, 180, 76, .18); color: #f1b44c; }
.xnet-modal-icono-danger { background: rgba(244, 106, 106, .15); color: #f46a6a; }
.xnet-modal-icono-info { background: rgba(80, 165, 241, .15); color: #50a5f1; }
.xnet-modal-textos { display: flex; flex-direction: column; line-height: 1.2; }
.xnet-modal-titulo { font-weight: 600; font-size: .95rem; }
.xnet-modal-subtitulo { font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color, #74788d); }
.xnet-modal-detalle .modal-body { max-height: 70vh; }
.xnet-modal .modal-body { font-size: .875rem; padding: .75rem 1rem; }

.xnet-logo-prev { width: 48px; height: 48px; object-fit: contain; padding: 2px; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: #fff; }
.xnet-imagen-ficha { width: 120px; height: 120px; object-fit: contain; background: #fff; }
/* Permisos del usuario por pantalla (parts/admin_user_permisos), diseño de los permisos de tokens. 31/10/2026 */
.xnet-permisos-ayuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .25rem 1rem; font-size: .75rem; color: var(--bs-secondary-color); background: rgba(var(--bs-warning-rgb), .08); border: 1px solid rgba(var(--bs-warning-rgb), .35); border-radius: .5rem; padding: .5rem .75rem; }
.xnet-permisos-tabla { overflow: visible; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.xnet-permisos-tabla thead th { position: sticky; top: var(--xnet-cabecera-alto, 70px); z-index: 2; }
.xnet-permisos-tabla thead tr.xnet-permisos-columna th { top: calc(var(--xnet-cabecera-alto, 70px) + 31px); background: var(--bs-gray-700, #495057); }
.xnet-permisos-tabla td, .xnet-permisos-tabla th { font-size: .8125rem; }
@media (max-width: 767.98px) { .xnet-permisos-tabla { overflow-x: auto; } .xnet-permisos-tabla thead th { position: static; } }
.xnet-permisos-tabla th:not(:first-child), .xnet-permisos-tabla td:not(:first-child) { width: 120px; }
.xnet-permisos-cabecera td { background: rgba(var(--bs-primary-rgb), .07); }
.xnet-permisos-plegado .xnet-permisos-fila { display: none; }
.xnet-permisos-plegado .xnet-permisos-flecha { transform: rotate(-90deg); }
.xnet-permisos-flecha { transition: transform .15s; font-size: .7rem; }
.xnet-permisos-codigo { font-size: .7rem; color: var(--bs-secondary-color); }
.xnet-permisos-pie { position: sticky; bottom: 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: .5rem 0; }
/* Sin permiso de eliminar en la pantalla: se ocultan los botones de borrar más comunes. 31/10/2026 */
.xnet-sin-eliminar #b_eliminar, .xnet-sin-eliminar #b_delete, .xnet-sin-eliminar [id^="b_eliminar_"], .xnet-sin-eliminar [id^="b_delete_"],
.xnet-sin-eliminar .btn-danger:has(.fa-trash-can), .xnet-sin-eliminar .btn-outline-danger:has(.fa-trash-can),
.xnet-sin-eliminar .btn-danger:has(.fa-trash), .xnet-sin-eliminar .btn-outline-danger:has(.fa-trash) { display: none !important; }
/* Gestor de imágenes, modo libre (logotipos y fondos): sin recorte ni zoom, se ve entera sobre cuadros. */
.xim-sin-zoom input[type="range"], .xim-sin-zoom .fa-magnifying-glass-minus, .xim-sin-zoom .fa-magnifying-glass-plus, .xim-sin-zoom #xim_encajar, .xim-sin-zoom > .text-center { display: none !important; }
.xim-libre { background: repeating-conic-gradient(#e9ecef 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; }
.xim-libre .xim-actual { object-fit: contain; }
.xim-libre .xim-mascara { box-shadow: none; }
.xim-libre .xim-lienzo { cursor: default; }
.xnet-imagen-empresa { width: 140px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; }
.xnet-imagen-empresa img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ------------------------------------------------------------------
   Ventana lateral genérica (parts/ui/panel_lateral, 03/11/2026): 560 px en el
   ordenador y pantalla completa en el móvil, con la ficha embebida dentro.
   ------------------------------------------------------------------ */
/* El tema usa Bootstrap con .offcanvas-end de ancho fijo (400 px): se fija el ancho aquí. */
.offcanvas.xnet-panel-lateral { --bs-offcanvas-width: 560px; width: 560px; max-width: 100%; }
@media (max-width: 575.98px) { .offcanvas.xnet-panel-lateral { --bs-offcanvas-width: 100%; width: 100%; } }
.xnet-panel-lateral .xnet-panel-lateral-marco { border: 0; width: 100%; height: 100%; display: block; }