/* Tema en tonos verde oliva sobre Bootstrap 5 (solo CSS, sin tocar
   el bundle de Bootstrap: se sobreescriben sus variables y algunas
   clases puntuales). */
:root {
    --oliva-100: #f3f5e9;
    --oliva-200: #e1e6c9;
    --oliva-300: #c1cd97;
    --oliva-400: #9aab63;
    --oliva-500: #74883f;
    --oliva-600: #5c6f31;
    --oliva-700: #475626;
    --oliva-800: #333e1b;

    --bs-primary: var(--oliva-600);
    --bs-primary-rgb: 92, 111, 49;
    --bs-link-color: var(--oliva-600);
    --bs-link-color-rgb: 92, 111, 49;
    --bs-link-hover-color: var(--oliva-700);
    --bs-link-hover-color-rgb: 71, 86, 38;
}

body {
    min-height: 100vh;
    background-color: var(--oliva-100);
}

.navbar.bg-dark {
    background-color: var(--oliva-800) !important;
}

.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(51, 62, 27, 0.1);
}

.card h2 {
    color: var(--oliva-700);
}

.form-label {
    color: var(--oliva-700);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--oliva-600);
    border-color: var(--oliva-600);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--oliva-700) !important;
    border-color: var(--oliva-700) !important;
}

.btn-outline-light:hover {
    color: var(--oliva-800);
}

.form-select,
.form-control {
    border-color: var(--oliva-300);
    background-color: var(--oliva-100);
}

.form-select:hover,
.form-control:hover {
    border-color: var(--oliva-400);
}

.form-select:focus,
.form-control:focus {
    border-color: var(--oliva-400);
    background-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(92, 111, 49, 0.2);
}

/* Lista de opciones al desplegar un <select> nativo (cliente, partner):
   por defecto el navegador la pinta en blanco/gris; se fuerza con
   !important porque en algunos navegadores el popup nativo ignora
   estilos "normales" del body. Nota: en Firefox ese popup lo dibuja el
   sistema operativo y puede seguir ignorando esto. */
#cliente,
#partner {
    background-color: var(--oliva-100) !important;
    color: var(--oliva-800) !important;
}

#cliente option,
#partner option {
    background-color: var(--oliva-100) !important;
    color: var(--oliva-800) !important;
}

#cliente option:checked,
#partner option:checked,
#cliente option:hover,
#partner option:hover {
    background-color: var(--oliva-300) !important;
}

/* Tabla de asociaciones */
.table thead th {
    background-color: var(--oliva-200);
    color: var(--oliva-800);
    border-bottom: 2px solid var(--oliva-300);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--oliva-100);
}

/* Select2 de productos: que se vea como un input de Bootstrap más
   (no la caja gris por defecto de la librería) y con la MISMA altura
   que los selects de cliente/partner, nunca más alto: si hay muchos
   productos elegidos, se hace scroll horizontal dentro de esa única
   línea en vez de crecer hacia abajo. */
#productos + .select2-container .select2-selection--multiple {
    height: calc(1.5em + 0.75rem + 2px);
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid var(--oliva-300);
    border-radius: 0.375rem;
    background-color: var(--oliva-100);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--oliva-400);
    background-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(92, 111, 49, 0.2);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    /* Sin esto, el <ul> se queda con el margen por defecto del navegador
       (~16px abajo): el contenido visible queda empujado hacia arriba
       dentro de la caja de altura fija de arriba, aunque el propio texto
       esté bien centrado respecto al "×" dentro de cada chip. */
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.25rem;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

/* Select2, por defecto, posiciona el "×" en ABSOLUTO sobre una franja
   reservada a la izquierda del texto (pensado para su propio ancho de
   chip, sin flex). Al meter los chips en un flex con gap (arriba) sin
   anular eso, el "×" queda montado encima del nombre del producto en vez
   de al lado. Se convierte el propio chip en fila flex y se saca el "×"
   del flujo absoluto para que ambos se repartan el espacio con gap. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    margin: 0.1rem 0;
    background-color: var(--oliva-200);
    border-color: var(--oliva-300);
    color: var(--oliva-800);
}

.select2-container--default .select2-selection--multiple .select2-search--inline,
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    max-width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #8a9270;
    align-self: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    padding: 0;
    border-right: none;
    color: var(--oliva-700);
}

/* Desplegable (lista de opciones) al abrir el Select2 de productos */
.select2-dropdown {
    border-color: var(--oliva-300);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--oliva-300);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--oliva-500);
}

/* Forzar que el desplegable de opciones se abra siempre hacia abajo,
   aunque Select2 calcule que hay más espacio arriba. */
.select2-container--open .select2-dropdown--above {
    top: 100%;
    bottom: auto;
}