/* 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;
}