:root, :root.light, :root .light {
    --tiempo-animacion: .15s;
    --color-primary: #4d804f;
    --color-paleta-b: #253031;
    --color-paleta-c: #2978A0;
    --color-paleta-d: #C6E0FF;
    --color-paleta-e: #EDCB96;
    --color-primary-rgb: 77, 128, 79;
    --color-primary-atenuado: #DEFAE7;
    --color-secondary: #2EE69C;
    --color-borde-form: gray;
    --color-fondo-contraste: #f5f7fa;
    --color-azul-a: #222E50;
    --color-azul-b: #439A86;
    --color-form-label: var(--color-azul-b);
    --color-popover: var(--ecn-warning-200);
    --fuente-normal: "Inter Regular", sans-serif;
    --fuente-bold: "Inter Bold", sans-serif;
    --tam-fuente-menu: 0.8rem;
    --tam-fuente-normal: 0.9rem;
    --tam-fuente-tabla-md: 0.9rem;
    --tam-fuente-tabla-sm: 0.8rem;
    --form-control-max-height: calc(3.5rem + 2px);
    --form-control-max-height-2: calc(2 * var(--form-control-max-height));
    --form-control-margin-bottom: 1.5rem;
    --ecn-gray-soft: #f5f7fa;
    --ecn-gray-100: #eff2f6;
    --ecn-gray-200: #e3e6ed;
    --ecn-gray-300: #cbd0dd;
    --ecn-gray-400: #9fa6bc;
    --ecn-gray-500: #8a94ad;
    --ecn-gray-600: #6e7891;
    --ecn-gray-700: #525b75;
    --ecn-gray-800: #3e465b;
    --ecn-gray-900: #31374a;
    --ecn-gray-1000: #222834;
    --ecn-gray-1100: #141824;
    --ecn-gray-soft-rgb: 245, 247, 250;
    --ecn-gray-100-rgb: 239, 242, 246;
    --ecn-gray-200-rgb: 227, 230, 237;
    --ecn-gray-300-rgb: 203, 208, 221;
    --ecn-gray-400-rgb: 159, 166, 188;
    --ecn-gray-500-rgb: 138, 148, 173;
    --ecn-gray-600-rgb: 110, 120, 145;
    --ecn-gray-700-rgb: 82, 91, 117;
    --ecn-gray-800-rgb: 62, 70, 91;
    --ecn-gray-900-rgb: 49, 55, 74;
    --ecn-gray-1000-rgb: 34, 40, 52;
    --ecn-gray-1100-rgb: 20, 24, 36;
    --ecn-soft: #f5f7fa;
    --ecn-100: #eff2f6;
    --ecn-200: #e3e6ed;
    --ecn-300: #cbd0dd;
    --ecn-400: #9fa6bc;
    --ecn-500: #8a94ad;
    --ecn-600: #6e7891;
    --ecn-700: #525b75;
    --ecn-800: #3e465b;
    --ecn-900: #31374a;
    --ecn-1000: #222834;
    --ecn-1100: #141824;
    --ecn-facebook: #3c5a99;
    --ecn-google-plus: #dd4b39;
    --ecn-twitter: #1da1f2;
    --ecn-linkedin: #0077b5;
    --ecn-youtube: #ff0001;
    --ecn-github: #333333;
    --ecn-bootstrap: #6f45a9;
    --ecn-css3: #203ccf;
    --ecn-html5: #bf4b2c;
    --ecn-sass: #c55589;
    --ecn-gulp: #d54049;
    --ecn-w3c: #255997;
    --ecn-primary: #3874ff;
    --ecn-secondary: #31374a;
    --ecn-success: #25b003;
    --ecn-info: #0097eb;
    --ecn-warning: #e5780b;
    --ecn-danger: #ed2000;
    --ecn-light: #eff2f6;
    --ecn-dark: #141824;
    --ecn-primary-soft: #f5f8ff;
    --ecn-primary-100: #e5edff;
    --ecn-primary-200: #adc5ff;
    --ecn-primary-300: #85a9ff;
    --ecn-primary-500: #004dff;
    --ecn-primary-600: #003cc7;
    --ecn-warning-soft: #fff6e0;
    --ecn-warning-100: #ffefca;
    --ecn-warning-200: #ffe6ad;
    --ecn-warning-300: #ffcc85;
    --ecn-warning-500: #d6700a;
    --ecn-warning-600: #bc3803;
    --ecn-danger-300: #f48270;
    --ecn-danger-100: #ffe0db;
    --ecn-danger-200: #fabcb3;
    --ecn-danger-500: #cc1b00;
    --ecn-danger-600: #b81800;
    --ecn-success-100: #d9fbd0;
    --ecn-success-200: #bee8b4;
    --ecn-success-300: #90d67f;
    --ecn-success-500: #23890b;
    --ecn-success-600: #1c6c09;
    --ecn-info-100: #c7ebff;
    --ecn-info-200: #96d9ff;
    --ecn-info-300: #60c6ff;
    --ecn-info-500: #0080c7;
    --ecn-info-600: #005585;
    --ecn-card-radius: 0.5rem;
    --ecn-radius-m: 0.375rem;
    --ecn-radius-sm: 0.2rem;

    --smoked-20: rgba(59, 57, 55, 0.2);
    --shadow-card-2-active: 0 2px 5px 0 var(--smoked-20);

    --wpf-aliceblue: #F0F8FF;
    --wpf-antiquewhite: #FAEBD7;
    --wpf-aqua: #00FFFF;
    --wpf-aquamarine: #7FFFD4;
    --wpf-azure: #F0FFFF;
    --wpf-beige: #F5F5DC;
    --wpf-bisque: #FFE4C4;
    --wpf-black: #000000;
    --wpf-blanchedalmond: #FFEBCD;
    --wpf-blue: #0000FF;
    --wpf-blueviolet: #8A2BE2;
    --wpf-brown: #A52A2A;
    --wpf-burlywood: #DEB887;
    --wpf-cadetblue: #5F9EA0;
    --wpf-chartreuse: #7FFF00;
    --wpf-chocolate: #D2691E;
    --wpf-coral: #FF7F50;
    --wpf-cornflowerblue: #6495ED;
    --wpf-cornsilk: #FFF8DC;
    --wpf-crimson: #DC143C;
    --wpf-cyan: #00FFFF;
    --wpf-darkblue: #00008B;
    --wpf-darkcyan: #008B8B;
    --wpf-darkgoldenrod: #B8860B;
    --wpf-darkgray: #A9A9A9;
    --wpf-darkgreen: #006400;
    --wpf-darkkhaki: #BDB76B;
    --wpf-darkmagenta: #8B008B;
    --wpf-darkolivegreen: #556B2F;
    --wpf-darkorange: #FF8C00;
    --wpf-darkorchid: #9932CC;
    --wpf-darkred: #8B0000;
    --wpf-darksalmon: #E9967A;
    --wpf-darkseagreen: #8FBC8F;
    --wpf-darkslateblue: #483D8B;
    --wpf-darkslategray: #2F4F4F;
    --wpf-darkturquoise: #00CED1;
    --wpf-darkviolet: #9400D3;
    --wpf-deeppink: #FF1493;
    --wpf-deepskyblue: #00BFFF;
    --wpf-dimgray: #696969;
    --wpf-dodgerblue: #1E90FF;
    --wpf-firebrick: #B22222;
    --wpf-floralwhite: #FFFAF0;
    --wpf-forestgreen: #228B22;
    --wpf-fuchsia: #FF00FF;
    --wpf-gainsboro: #DCDCDC;
    --wpf-ghostwhite: #F8F8FF;
    --wpf-gold: #FFD700;
    --wpf-goldenrod: #DAA520;
    --wpf-gray: #808080;
    --wpf-green: #008000;
    --wpf-greenyellow: #ADFF2F;
    --wpf-honeydew: #F0FFF0;
    --wpf-hotpink: #FF69B4;
    --wpf-indianred: #CD5C5C;
    --wpf-indigo: #4B0082;
    --wpf-ivory: #FFFFF0;
    --wpf-khaki: #F0E68C;
    --wpf-lavender: #E6E6FA;
    --wpf-lavenderblush: #FFF0F5;
    --wpf-lawngreen: #7CFC00;
    --wpf-lemonchiffon: #FFFACD;
    --wpf-lightblue: #ADD8E6;
    --wpf-lightcoral: #F08080;
    --wpf-lightcyan: #E0FFFF;
    --wpf-lightgoldenrodyellow: #FAFAD2;
    --wpf-lightgray: #D3D3D3;
    --wpf-lightgreen: #90EE90;
    --wpf-lightorange: #FFB07C;
    --wpf-lightpink: #FFB6C1;
    --wpf-lightsalmon: #FFA07A;
    --wpf-lightseagreen: #20B2AA;
    --wpf-lightskyblue: #87CEFA;
    --wpf-lightslategray: #778899;
    --wpf-lightsteelblue: #B0C4DE;
    --wpf-lightyellow: #FFFFE0;
    --wpf-lime: #00FF00;
    --wpf-limegreen: #32CD32;
    --wpf-linen: #FAF0E6;
    --wpf-magenta: #FF00FF;
    --wpf-maroon: #800000;
    --wpf-mediumaquamarine: #66CDAA;
    --wpf-mediumblue: #0000CD;
    --wpf-mediumorchid: #BA55D3;
    --wpf-mediumpurple: #9370DB;
    --wpf-mediumseagreen: #3CB371;
    --wpf-mediumslateblue: #7B68EE;
    --wpf-mediumspringgreen: #00FA9A;
    --wpf-mediumturquoise: #48D1CC;
    --wpf-mediumvioletred: #C71585;
    --wpf-midnightblue: #191970;
    --wpf-mintcream: #F5FFFA;
    --wpf-mistyrose: #FFE4E1;
    --wpf-moccasin: #FFE4B5;
    --wpf-navajowhite: #FFDEAD;
    --wpf-navy: #000080;
    --wpf-oldlace: #FDF5E6;
    --wpf-olive: #808000;
    --wpf-olivedrab: #6B8E23;
    --wpf-orange: #FFA500;
    --wpf-orangered: #FF4500;
    --wpf-orchid: #DA70D6;
    --wpf-palegoldenrod: #EEE8AA;
    --wpf-palegreen: #98FB98;
    --wpf-paleturquoise: #AFEEEE;
    --wpf-palevioletred: #DB7093;
    --wpf-papayawhip: #FFEFD5;
    --wpf-peachpuff: #FFDAB9;
    --wpf-peru: #CD853F;
    --wpf-pink: #FFC0CB;
    --wpf-plum: #DDA0DD;
    --wpf-powderblue: #B0E0E6;
    --wpf-purple: #800080;
    --wpf-red: #FF0000;
    --wpf-rosybrown: #BC8F8F;
    --wpf-royalblue: #4169E1;
    --wpf-saddlebrown: #8B4513;
    --wpf-salmon: #FA8072;
    --wpf-sandybrown: #F4A460;
    --wpf-seagreen: #2E8B57;
    --wpf-seashell: #FFF5EE;
    --wpf-sienna: #A0522D;
    --wpf-silver: #C0C0C0;
    --wpf-skyblue: #87CEEB;
    --wpf-slateblue: #6A5ACD;
    --wpf-slategray: #708090;
    --wpf-snow: #FFFAFA;
    --wpf-springgreen: #00FF7F;
    --wpf-steelblue: #4682B4;
    --wpf-tan: #D2B48C;
    --wpf-teal: #008080;
    --wpf-thistle: #D8BFD8;
    --wpf-tomato: #FF6347;
    --wpf-transparent: #FFFFFF;
    --wpf-turquoise: #40E0D0;
    --wpf-violet: #EE82EE;
    --wpf-wheat: #F5DEB3;
    --wpf-white: #FFFFFF;
    --wpf-whitesmoke: #F5F5F5;
    --wpf-yellow: #FFFF00;
    --wpf-yellowgreen: #9ACD32;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ecn-1100);
    line-height: 1;
}

#login_box {
    background: #ffffff;
    padding: 10px 20px;
    /*border: 1px solid #dddddd;*/
    border-radius: 10px;
    margin-bottom: 20px;
}

/* region Fuentes */
@font-face {
    font-family: "Montserrat Bold";
    src: url("../fonts/Montserrat-Bold.otf");
}

@font-face {
    font-family: "Montserrat Light";
    src: url("../fonts/Montserrat-Light.otf");
}

@font-face {
    font-family: "Montserrat Regular";
    src: url("../fonts/Montserrat-Regular.otf");
}

@font-face {
    font-family: "Inter Bold";
    src: url("../fonts/Inter-Bold.ttf")
}

@font-face {
    font-family: "Inter Light";
    src: url("../fonts/Inter-Light.ttf");
}

@font-face {
    font-family: "Inter Regular";
    src: url("../fonts/Inter-Regular.ttf")
}

.fuente_bold_tema {
    font-family: "Inter Bold";
}

.fuente_regular_tema {
    font-family: "Inter Regular";
}

.fuente_light_tema {
    font-family: "Inter Light";
}

/* endregion Fuentes */

.h-0 {
    height: 0;
}

/* region Estilos de modales en función de tamaño de pantalla */

@media (min-width: 575px) {
    .modal-w-100 {
        max-width: 100% !important;
    }

    .modal-w-80 {
        max-width: 80% !important;
    }

    .modal-w-75 {
        max-width: 75% !important;
    }

    .modal-w-50 {
        max-width: 50% !important;
    }

    .modal-w-25 {
        max-width: 25% !important;
    }
}

@media (max-width: 575px) {
    /* Para moviles */
    .modal-w-100 {
        max-width: 100% !important;
    }

    .modal-w-80 {
        max-width: 100% !important;
    }

    .modal-w-75 {
        max-width: 100% !important;
    }

    .modal-w-50 {
        max-width: 100% !important;
    }

    .modal-w-25 {
        max-width: 100% !important;
    }

    .h-sm-450px {
        height: 450px !important;
    }

    .h-sm-350px {
        height: 350px !important;
    }

    .h-sm-250px {
        height: 250px !important;
    }

    .h-sm-125px {
        height: 125px !important;
    }

    .h-sm-100px {
        height: 100px !important;
    }

}

/* endregion Estilos de modales en función de tamaño de pantalla */

/* region ESTILOS DATATABLES */

/* ---------------------------------------------------------------------------- */
/* ------------------------ ESTILOS DATATABLES  ------------------------------- */
/* ---------------------------------------------------------------------------- */

table.table-alterna td, table.table-alterna th {
    font-size: var(--tam-fuente-tabla-md);
}

.table-alterna {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.table-alterna thead {
    background-color: var(--color-primary);
    color: white;
}

.table-alterna tbody tr:nth-of-type(odd) {
    background-color: var(--color-fondo-contraste);
}

/* region Barra de progreso en datatable */
.progress-bar-datatable {
    height: 1.5rem !important;
    position: relative;
    /*border: 1px solid lightgray;*/
}

.progress-bar-datatable span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1.5rem;
    color: gray;
}

.progress-bar-datatable span.white-text {
    color: white;
}

/* endregion Barra de progreso en datatable */
.table-alterna tbody tr:hover {
    background-color: #e5e6e7;
}

#table tbody tr.selected {
    background-color: var(--color-primary-atenuado);
    transition: background-color 0.15s ease-in-out;
}

/* Clase de contenedor de botones y search autogenerado, para poder reordenarlos */
.buttons-toolbar {
    display: flex;
    justify-content: flex-end;
}

/* Margen manual necesario si añadimos controles al encabezado de bootstrap table */
.columns-right {
    margin-left: 5px;
}

/* Margen manual necesario si añadimos controles al encabezado de bootstrap table. Reordenar elementos */
.float-right.search {
    order: -1;
    margin-left: 5px;
}

/* Forzar altura 100% a elementos de bootstrap table para igual su altura a la del select2 */
.buttons-toolbar .btn-group {
    height: 100%;
}

/* region Barras de desplazamiento */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) white;
    -o-transition: color var(--tiempo-animacion) ease-out,
    background-color var(--tiempo-animacion) ease-in,
    background var(--tiempo-animacion) ease-in;
    -ms-transition: color var(--tiempo-animacion) ease-out,
    background-color var(--tiempo-animacion) ease-in,
    background var(--tiempo-animacion) ease-in;
    -moz-transition: color var(--tiempo-animacion) ease-out,
    background-color var(--tiempo-animacion) ease-in,
    background var(--tiempo-animacion) ease-in;
    -webkit-transition: color var(--tiempo-animacion) ease-out,
    background-color var(--tiempo-animacion) ease-in,
    background var(--tiempo-animacion) ease-in;
    transition: color var(--tiempo-animacion) ease-out,
    background-color var(--tiempo-animacion) ease-in,
    background var(--tiempo-animacion) ease-in;
}

*::-webkit-scrollbar {
    width: 16px;
}

textarea::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background-color: white;
    border-radius: 5px;
    border: 2px solid white;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 5px;
    border: 2px solid white;
}

*::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.5);
}

/* endregion Barras de desplazamiento */

/* endregion ESTILOS DATATABLES */

/* region ----------------- ESTILOS MENÚ DE NAVEGACIÓN ------------------------ */
/* ---------------------------------------------------------------------------- */

/* Override Bootstrap - Estilo Botón menú navegación */
.nav-link {
    font-size: var(--tam-fuente-menu);
    color: black;
    height: 2.8rem;
}

.nav-link-collapsed {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.nav-link:not(.nav-link-collapsed) i {
    margin-right: 0.5rem;
}

.navbar-primary-color:hover {
    background: var(--color-primary) !important;
    color: white;

    -o-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -ms-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -moz-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -webkit-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
}

.navbar-secondary-color:hover {
    background: var(--color-secondary) !important;
    color: white;

    -o-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -ms-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -moz-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -webkit-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
}

.navbar-danger-color:hover {
    background: var(--bs-danger) !important;
    color: white;

    -o-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -ms-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -moz-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    -webkit-transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
    transition: color var(--tiempo-animacion) ease-out, background var(--tiempo-animacion) ease-in;
}

.rotate-90 {
    rotate: 90deg;
}

.rotate-180 {
    rotate: 180deg;
}

.rotate-270 {
    rotate: 270deg;
}

/* endregion ----------------- ESTILOS MENÚ DE NAVEGACIÓN ------------------------ */

/* ------------------------------------------------------------------------------------------------------------------ */
/* ---- ELEMENTOS DE FORMULARIO ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
.icono-izq-input {
    width: 38px;
    height: 38px;
    padding: 0;
    background-color: #555555;
}

/*Color de fondo*/
.campo-formulario input,
.campo-formulario textarea,
.campo-formulario select,
.form-control.search-input {
    background-color: var(--color-fondo-contraste);
}

/*Borde (preservando colores de validación)*/
.campo-formulario input:not(.is-invalid):not(.is-valid),
.campo-formulario textarea:not(.is-invalid):not(.is-valid),
.campo-formulario select:not(.is-invalid):not(.is-valid),
.form-control.search-input {
    border: 1px solid var(--color-borde-form) !important;
}

span.is-invalid.select2-selection {
    border-color: var(--bs-danger) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");

}

span.is-valid.select2-selection {
    border-color: var(--bs-success) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

span.is-invalid.select2-selection,
span.is-valid.select2-selection {
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

span.is-valid.select2-selection .select2-selection__arrow,
span.is-invalid.select2-selection .select2-selection__arrow {
    right: calc(1em + 0.65rem) !important;
}

span.is-valid.select2-selection .select2-selection__clear,
span.is-invalid.select2-selection .select2-selection__clear {
    right: calc(1em + 0.65rem) !important;
}

.form-control {
    color: var(--ecn-gray-1000);
}

/* Override bootstrap: ancho de color picker */
.form-control-color {
    width: 100% !important;
}

.form-floating > .form-control:focus ~ label:not(.disabled),
.form-floating > .form-control:not(:placeholder-shown) ~ label:not(.disabled) {
    opacity: 0.65 !important;
    transform: scale(.8) translateY(-0.65rem) translateX(0.15rem) !important;
}

.form-floating > .form-control-plaintext ~ label:not(.disabled),
.form-floating > .form-control:focus ~ label:not(.disabled),
.form-floating > .form-control:not(:placeholder-shown) ~ label:not(.disabled),
.form-floating > .form-select ~ label:not(.disabled) {
    opacity: 0.65 !important;
    transform: scale(.8) translateY(-0.65rem) translateX(0.15rem) !important;
}

/* region Reglas de tamaño para contenedores de elementos de formulario */
.form-height-1 {
    height: var(--form-control-max-height);
    margin-bottom: var(--form-control-margin-bottom);
}

.form-height-2 {
    height: calc((2 * var(--form-control-max-height)) + var(--form-control-margin-bottom));
    margin-bottom: var(--form-control-margin-bottom);
}

.form-height-3 {
    height: calc((3 * var(--form-control-max-height)) + (2 * var(--form-control-margin-bottom)));
    margin-bottom: var(--form-control-margin-bottom);
}

.form-height-4 {
    height: calc((4 * var(--form-control-max-height)) + (3 * var(--form-control-margin-bottom)));
    margin-bottom: var(--form-control-margin-bottom);
}

/* endregion Reglas de tamaño para contenedores de elementos de formulario */

.form-floating {
    height: 100%;
}

.form-floating label {
    color: var(--color-form-label) !important;
    /*font-size: 0.8rem;*/
}

/* region Estilo de popovers para elementos de formulario */
.popover {
    font-family: var(--fuente-normal);
    background-color: var(--color-popover);
    border-radius: var(--ecn-card-radius);
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after,
.bs-popover-top > .popover-arrow::after {
    border-top-color: var(--color-popover);
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--color-popover);
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after,
.bs-popover-left > .popover-arrow::after {
    border-left-color: var(--color-popover);
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.bs-popover-right > .popover-arrow::after {
    border-right-color: var(--color-popover);
}

/* endregion Estilo de popovers para elementos de formulario */

/* region SELECT2 y CHOICES ----------------------------------------------------------------------------------------- */

.choices[data-type="select-one"] {
    max-height: var(--form-control-max-height);
    height: var(--form-control-max-height);
    margin-bottom: var(--form-control-margin-bottom);
}

.choices[data-type="select-multiple"] {
    max-height: var(--form-control-max-height-2) !important;
    height: var(--form-control-max-height-2) !important;
    margin-bottom: var(--form-control-margin-bottom) !important;
}

/* Estilo del contenedor interior de un select choices, aumentado padding superior para que no tape el float label */
.choices .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo-contraste);
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border: 1px solid var(--color-borde-form);
    border-radius: 0.375rem;
    font-size: inherit !important;
    min-height: 44px;
    overflow: auto;
    box-sizing: border-box
}

.choices__list--single {
    display: flex;
    padding: 0;
    width: 100%;
    height: 100%;
}

.choices__item--selectable {
    display: flex;
    align-items: center;
}

/* Estilo del item seleccionado dentro de la caja de choices cuando se establece en 'multiple' */
.choices__list--multiple .choices__item {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-right: 3.75px;
    margin-bottom: 3.75px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-borde-form);
    color: #fff;
    word-break: break-all;
    box-sizing: border-box;
}

/* Estilo del input que actúa como buscador en un choices configurado a 'multiple' */
.choices__input {
    display: inline-block;
    vertical-align: baseline;
    background-color: transparent;
    font-size: 1rem;
    margin-bottom: 0px;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    padding: 4px 0 4px 2px;
}

.select2 {
    width: 100% !important;
    height: 100%;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--color-borde-form) !important;
    background-color: var(--color-fondo-contraste) !important;
    border-radius: 0.375rem;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--color-borde-form) !important;
    background-color: var(--color-fondo-contraste) !important;
    border-radius: 0.375rem;
}

.select2-selection {
    height: 100% !important;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Select2 dentro de contenedor titles, en encabezado de Datatable: sin label, menos padding */
.titles .select2-selection {
    padding: 0.625rem 0.75rem;
    /*padding-top: 0.45rem;*/
    /*padding-bottom: 0.45rem;*/
    /*padding-left: 0.75rem;*/
    /*padding-right: 0.75rem;*/
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ecn-gray-1000);
    line-height: 1.25rem;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    height: 100%;
    top: 0px;
    right: 10px;

}

.select2-container.select2-container--disabled {
    opacity: 0.3;
}

.select2-container--focus:not(.select2-container--disabled) {
    border-radius: 0.375rem;
    box-shadow: 0 0 0 .25rem rgba(var(--color-primary-rgb), .25);
    transition: box-shadow 0.15s ease-in-out;
}

/* Buscador en select2 múltiple */
.select2-container .select2-search--inline .select2-search__field {
    font-family: var(--fuente-normal);
    height: 24px;
    margin: 0;
}

/* Placeholder de buscador en select2 múltiple */
.select2-container .select2-search--inline .select2-search__field::placeholder {
    color: var(--ecn-gray-400);
}

/* Indicadores de elementos seleccionados en selección múltiple */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-right: 5px;
}

/* region select2 - estilos de elementos seleccionados en modo múltiple */
.select2-selection__choice {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-radius: 0.375rem !important;
    line-height: 250%;
}

.select2-selection__choice__remove {
    color: white !important;
    height: 100%;
}

.select2-selection__choice__remove:hover {
    color: black !important;
}

.select2-selection__choice__display {
    margin-left: 10px;
    margin-right: 10px;
}

/* endregion select2 - estilos de elementos seleccionados en modo múltiple */

/* Estilo del input buscador en selección simple de select2 */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ecn-gray-400);
    border-radius: var(--ecn-card-radius);
}

/* Estilo del hover en las opciones disponibles en select2 */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    border-radius: var(--ecn-radius-sm);
    background-color: var(--color-primary);
    color: white;
}

.form-floating select[disabled] + .select2-container--disabled + label {
    opacity: 0.3 !important;
}

/* endregion SELECT2 y CHOICES -------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------ */
/* ---- ELEMENTOS DE BASE ------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
html {
    height: 100%;
    background-color: var(--color-fondo-contraste);
    /*margin-top: 56px; !* El alto del navbar *!*/
    /*background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, 1)), url("../img/Fondo_Hojas.png");*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body {
    background-color: transparent;
    font-family: 'Inter Regular', sans-serif !important;
}

.contenedor-principal {
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.contenedor-principal.contenedor-menu-flotante {
    margin: 0.5rem;
}

div.contenedor-card {
    background-color: white;
    border-radius: var(--ecn-card-radius);
    border: 1px solid var(--ecn-gray-300);
    /*box-shadow: var(--shadow-card-2-active);*/

}

/* Regla para pruebas de contenedor blanco sencillo con borde */
.contenedor-radius {
    background-color: white;
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Regla para pruebas de contenedor blanco seleccionable estilo aplicación de escritorio */
.seleccionable {
    cursor: pointer;
    margin-right: 5px;
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: var(--color-primary) !important;
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: var(--color-secondary) !important;
}

.centrar-elementos {
    display: flex;
    justify-content: center;
    align-items: center
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ---- MODALES ----------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------ */
.modal-dialog label {
    color: var(--color-primary) !important;
    /*font-size: 0.8rem;*/
}

.border-darkgray {
    border: 1px solid #BEBEBE !important;
}

.spinner-border {
    border-width: 0.5rem !important;
}

/* region Estilos de nav-tabs para sistema de pestañas en editor modal */
.nav-tabs {
    display: flex;
}

.nav-tabs .nav-item {
    flex-grow: 1;
    text-align: center;
}

.nav-tabs .nav-item .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: var(--tam-fuente-normal);
}

/* endregion Estilos de nav-tabs para sistema de pestañas en editor modal */

/* region Estilos de UserControl ------------------------------------------------------------------------------------ */

/* region Control de muestreo */
.label-muestreo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: var(--color-form-label);
    opacity: 0.65 !important;
    transform: scale(.8) translateY(-0.65rem) translateX(0.15rem) !important;
}

.cont-dato-muestreo {
    position: relative;
    padding: 1rem .75rem;
    line-height: 1.25;
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cont-dato-centrado {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contenedor-muestreo {
    /*transition: box-shadow var(--tiempo-animacion) ease;*/
    background-color: var(--color-fondo-contraste) !important;
}

.contenedor-muestreo:hover {
    /*background-color: var(--color-fondo-contraste);*/
    /*box-shadow: var(--shadow-card-2-active);*/
}

.icono-control {
    transition: all 0.3s ease;
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: 5px;
    color: var(--ecn-gray-500);
}

#icono-eliminar.icono-control:hover {
    color: var(--ecn-danger-500);
    transform: scale(1.2);
}

#icono-editar.icono-control:hover {
    color: var(--ecn-warning-300);
    transform: scale(1.2);
}

/* Añade un margen inferior a los hijos de los contenedores de muestreos, materias activas, etc */
#contenedor-muestreos .contenedor-muestreo:not(:last-child),
#contenedor-materias-activas .contenedor-card:not(:last-child),
#contenedor-producto-nutricional .contenedor-card:not(:last-child) {
    margin-bottom: 0.5em;
}

/* endregion Control de muestreo */

.h-placeholder {
    color: #DEDEDE;
    margin-bottom: 1.5rem;
}

/* endregion Estilos de UserControl --------------------------------------------------------------------------------- */

/* region div disabled */
.desbloqueable[disabled] {
    opacity: 0.3 !important;
    pointer-events: none;
}

/* endregion */

.select2-container--default .select2-results > .select2-results__options {
    max-height: 50vh;
    overflow-y: auto;
}

@media (max-width: 600px) {
    .select2-container--default .select2-results > .select2-results__options {
        max-height: 70vh;
    }
}

.select2-dropdown {
    background-color: var(--ecn-100);
    border-radius: var(--ecn-radius-m);
}


.nav-link .material-symbols-rounded {
    color: var(--ecn-gray-700);
}

.nav-link:hover .material-symbols-rounded {
    color: white;
}

.nav-link.active .material-symbols-rounded {
    color: white;
}

.texto-navlink {
    margin-left: 0.8rem;
}

.dropdown-item.success:hover {
    background-color: var(--ecn-success-200);
}

.dropdown-item.warning:hover {
    background-color: var(--ecn-warning-200);
}

.dropdown-item.danger:hover {
    background-color: var(--ecn-danger-200);
}

.dropdown-item .material-symbols-rounded {
    vertical-align: middle;
    margin-right: 0.5rem;
}

.modal-backdrop-effect {
    background-color: rgba(0, 0, 0, 0.5);
}

button span.material-symbols-rounded {
    vertical-align: middle;
    margin-right: 0.5rem;
}

.nav-pills .nav-item {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* region GridParcelas */
.grid-parcelas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    grid-auto-rows: 70px;
    grid-gap: 1em;
}

.grid-parcelas > * {
    /*box-shadow: 0.1rem 0.1rem 0.2em rgba(0, 0, 0, .35) !important;*/
    border: 1px solid var(--ecn-gray-300);
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0.3rem 0.2rem;
}

.grid-parcelas > * > * {
    text-align: center;
}

.grid-parcelas > * > *:first-child {
    font-size: 1.4rem;
    line-height: 1.5rem;
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.grid-parcelas > * > *:nth-child(2),
.grid-parcelas > * > *:last-child {
    font-size: 0.7rem;
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.grid-parcelas > * > *:last-child {
    flex: 0 0 30%;
}

.aplicada {
    background-color: var(--wpf-lightgreen);
}

.no-aplicada {
    background-color: var(--wpf-lightgoldenrodyellow);
}

.caducada {
    background-color: var(--wpf-lightorange);
}

.plazo-seguridad {
    background-color: var(--wpf-lightpink);
}

/* endregion */

.color-sample-pill {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 0.6rem;
    font-family: var(--fuente-bold);
    overflow: hidden;
}