.w100 {
    width: 100px;
}
.w125 {
    width: 125px;
}
.w150 {
    width: 150px;
}
.grupo-nombre{
    display:block;
    font-size:14px;
    margin-top:5px;
    margin-bottom:10px
}
#datatables_buttons_info.dt-button-info {
    background: #348CD4;
    color: #FFF;
    border: 1px solid #348CD4;
}
#datatables_buttons_info.dt-button-info h2 {
    color: #348CD4;
}
.badge.badge-md {
    padding: 9px 30px;
}
.badge.badge-full {
    width: 100%;
}
#listado-iconos {
    margin: 50px 0px;
}
#listado-iconos i {
    font-size: 42px;
    color: #007FFF;
}
#listado-iconos p {
    font-size: 14px;
    color: #293849;
}

.embed-responsive-15by10::before {
    padding-top: 66.855%; }

.carrot-orange-color {
    color: #E58E25;
}
.carrot-orange-bg {
    background-color: #E58E25;
    color: #FFF;
}
.btn-carrot-orange {
    background-color: #E58E25;
    color: #FFF;
}
.btn-carrot-orange:hover {
    background-color: #AC6B1C;
    color: #FFF;
}
.btn-outline-carrot-orange {
    color: #E58E25;
    border-color: #E58E25;
}
.btn-outline-carrot-orange.disabled, .btn-outline-carrot-orange:disabled {
    color: #E58E25;
    background-color: transparent;
}


.jalapeno-red-color {
    color: #B7143F;
}
.jalapeno-red-bg {
    background-color: #B7143F;
    color: #FFF;
}
.btn-jalapeno-red {
    background-color: #B7143F;
    color: #FFF;
}
.btn-jalapeno-red:hover {
    background-color: #890F2F;
    color: #FFF;
}
.btn-outline-jalapeno-red {
    color: #890F2F;
    border-color: #890F2F;
}
.btn-outline-jalapeno-red.disabled, .btn-outline-jalapeno-red:disabled {
    color: #890F2F;
    background-color: transparent;
}


.dark-sapphire-color {
    color: #0C2462;
}
.dark-sapphire-bg {
    background-color: #0C2462;
    color: #FFF;
}
.btn-dark-sapphire {
    background-color: #0C2462;
    color: #FFF;
}
.btn-dark-sapphire:hover {
    background-color: #091B4A;
    color: #FFF;
}
.btn-outline-dark-sapphire {
    color: #0C2462;
    border-color: #0C2462;
}
.btn-outline-dark-sapphire.disabled, .btn-outline-dark-sapphire:disabled {
    color: #0C2462;
    background-color: transparent;
}


.forest-blues-color {
    color: #093D62;
}
.forest-blues-bg {
    background-color: #093D62;
    color: #FFF;
}
.btn-forest-blues {
    background-color: #093D62;
    color: #FFF;
}
.btn-forest-blues:hover {
    background-color: #072E4A;
    color: #FFF;
}
.btn-outline-forest-blues {
    color: #093D62;
    border-color: #093D62;
}
.btn-outline-forest-blues.disabled, .btn-outline-forest-blues:disabled {
    color: #093D62;
    background-color: transparent;
}


.reef-encounter-color {
    color: #089992;
}
.reef-encounter-bg {
    background-color: #089992;
    color: #FFF;
}
.btn-reef-encounter {
    background-color: #089992;
    color: #FFF;
}
.btn-reef-encounter:hover {
    background-color: #06736E;
    color: #FFF;
}
.btn-outline-reef-encounter {
    color: #089992;
    border-color: #089992;
}
.btn-outline-reef-encounter.disabled, .btn-outline-reef-encounter:disabled {
    color: #089992;
    background-color: transparent;
}


.magenta-purple-color {
    color: #6D214F;
}
.magenta-purple-bg {
    background-color: #6D214F;
    color: #FFF;
}
.btn-magenta-purple {
    background-color: #6D214F;
    color: #FFF;
}
.btn-magenta-purple:hover {
    background-color: #52193B;
    color: #FFF;
}
.btn-outline-magenta-purple {
    color: #6D214F;
    border-color: #6D214F;
}
.btn-outline-magenta-purple.disabled, .btn-outline-magenta-purple:disabled {
    color: #6D214F;
    background-color: transparent;
}


.sasquatch-socks-color {
    color: #FB427B;
}
.sasquatch-socks-bg {
    background-color: #FB427B;
    color: #FFF;
}
.btn-sasquatch-socks {
    background-color: #FB427B;
    color: #FFF;
}
.btn-sasquatch-socks:hover {
    background-color: #BC325C;
    color: #FFF;
}
.btn-outline-sasquatch-socks {
    color: #FB427B;
    border-color: #FB427B;
}
.btn-outline-sasquatch-socks.disabled, .btn-outline-sasquatch-socks:disabled {
    color: #FB427B;
    background-color: transparent;
}


.pine-glade-color {
    color: #BEC581;
}
.pine-glade-bg {
    background-color: #BEC581;
    color: #FFF;
}
.btn-pine-glade {
    background-color: #BEC581;
    color: #FFF;
}
.btn-pine-glade:hover {
    background-color: #8F9461;
    color: #FFF;
}
.btn-outline-pine-glade {
    color: #BEC581;
    border-color: #BEC581;
}
.btn-outline-pine-glade.disabled, .btn-outline-pine-glade:disabled {
    color: #BEC581;
    background-color: transparent;
}


.highlighter-lavender-color {
    color: #82599F;
}
.highlighter-lavender-bg {
    background-color: #82599F;
    color: #FFF;
}
.btn-highlighter-lavender {
    background-color: #82599F;
    color: #FFF;
}
.btn-highlighter-lavender:hover {
    background-color: #624377;
    color: #FFF;
}
.btn-outline-highlighter-lavender {
    color: #82599F;
    border-color: #82599F;
}
.btn-outline-highlighter-lavender.disabled, .btn-outline-highlighter-lavender:disabled {
    color: #82599F;
    background-color: transparent;
}


.rich-gardenia-color {
    color: #F97F50;
}
.rich-gardenia-bg {
    background-color: #F97F50;
    color: #FFF;
}
.btn-rich-gardenia {
    background-color: #F97F50;
    color: #FFF;
}
.btn-rich-gardenia:hover {
    background-color: #BB5F3C;
    color: #FFF;
}
.btn-outline-rich-gardenia {
    color: #F97F50;
    border-color: #F97F50;
}
.btn-outline-rich-gardenia.disabled, .btn-outline-rich-gardenia:disabled {
    color: #F97F50;
    background-color: transparent;
}


.honey-glow-color {
    color: #EAB543;
}
.honey-glow-bg {
    background-color: #EAB543;
    color: #FFF;
}
.btn-honey-glow {
    background-color: #EAB543;
    color: #FFF;
}
.btn-honey-glow:hover {
    background-color: #AF8832;
    color: #FFF;
}
.btn-outline-honey-glow {
    color: #EAB543;
    border-color: #EAB543;
}
.btn-outline-honey-glow.disabled, .btn-outline-honey-glow:disabled {
    color: #EAB543;
    background-color: transparent;
}


.keppel-color {
    color: #58B19F;
}
.keppel-bg {
    background-color: #58B19F;
    color: #FFF;
}
.btn-keppel {
    background-color: #58B19F;
    color: #FFF;
}
.btn-keppel:hover {
    background-color: #428577;
    color: #FFF;
}
.btn-outline-keppel {
    color: #58B19F;
    border-color: #58B19F;
}
.btn-outline-keppel.disabled, .btn-outline-keppel:disabled {
    color: #58B19F;
    background-color: transparent;
}


.lucky-point-color {
    color: #2D2C54;
}
.lucky-point-bg {
    background-color: #2D2C54;
    color: #FFF;
}
.btn-lucky-point {
    background-color: #2D2C54;
    color: #FFF;
}
.btn-lucky-point:hover {
    background-color: #22213F;
    color: #FFF;
}
.btn-outline-lucky-point {
    color: #2D2C54;
    border-color: #2D2C54;
}
.btn-outline-lucky-point.disabled, .btn-outline-lucky-point:disabled {
    color: #2D2C54;
    background-color: transparent;
}


.liberty-color {
    color: #474787;
}
.liberty-bg {
    background-color: #474787;
    color: #FFF;
}
.btn-liberty {
    background-color: #474787;
    color: #FFF;
}
.btn-liberty:hover {
    background-color: #353565;
    color: #FFF;
}
.btn-outline-liberty {
    color: #474787;
    border-color: #474787;
}
.btn-outline-liberty.disabled, .btn-outline-liberty:disabled {
    color: #474787;
    background-color: transparent;
}


.hot-stone-color {
    color: #AAA69D;
}
.hot-stone-bg {
    background-color: #AAA69D;
    color: #FFF;
}
.btn-hot-stone {
    background-color: #AAA69D;
    color: #FFF;
}
.btn-hot-stone:hover {
    background-color: #7F7D76;
    color: #FFF;
}
.btn-outline-hot-stone {
    color: #AAA69D;
    border-color: #AAA69D;
}
.btn-outline-hot-stone.disabled, .btn-outline-hot-stone:disabled {
    color: #AAA69D;
    background-color: transparent;
}


.devil-blue-color {
    color: #227094;
}
.devil-blue-bg {
    background-color: #227094;
    color: #FFF;
}
.btn-devil-blue {
    background-color: #227094;
    color: #FFF;
}
.btn-devil-blue:hover {
    background-color: #1A546F;
    color: #FFF;
}
.btn-outline-devil-blue {
    color: #227094;
    border-color: #227094;
}
.btn-outline-devil-blue.disabled, .btn-outline-devil-blue:disabled {
    color: #227094;
    background-color: transparent;
}


.desert-color {
    color: #CBAE62;
}
.desert-bg {
    background-color: #CBAE62;
    color: #FFF;
}
.btn-desert {
    background-color: #CBAE62;
    color: #FFF;
}
.btn-desert:hover {
    background-color: #98834A;
    color: #FFF;
}
.btn-outline-desert {
    color: #CBAE62;
    border-color: #CBAE62;
}
.btn-outline-outline-desert.disabled, .btn-outline-outline-desert:disabled {
    color: #CBAE62;
    background-color: transparent;
}

.transparent-bg {
    background-color: transparent;
    color: #6C757D;
}


.badge-sm {
    font-size: 11px;
    font-weight: 400;
    padding: 5px 15px;
}

.slimscroll-menu {
    padding-left: 25px;
}

.sin-margen-inferior {
    margin-bottom: 0px;
}
.sin-margen-superior {
    margin-top: 0px;
}

input[type=checkbox] {
    transform: scale(1.5);
}

.table-fit td.fit, 
.table-fit th.fit {
    white-space: nowrap;
    width: 1%;
}

.nav-item.dropdown > ul.dropdown-menu.show {display:block; width: 100%;  }

label > select.select2,
label > span.select2-container {
    display: block;
    width: 100%;
}

span.select2-selection {
    display: block;
    width: 100%;
}

span.select2-selection li {
    color: #000;
}

ul#peajes-list {
    list-style: none;
    margin-left: 0;
    background-color: #F3F3F3;
    border: 1px solid #D3D3D3;
    padding-top: 10px;
    padding-bottom: 10px;
}
ul#peajes-list > li {
    list-style: none;
    margin-left: -25px;
    margin-bottom: 5px;
    cursor: pointer;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.logo-footer {
    display: block;
    margin: 0px auto 10px auto;
}
.footer {
    background-color: #030405;
}
.separacion {
    margin-top: 100px;
    height: 10px;
}






/*
COLORES ROSADOS
pinkLight
#EE5776
pinkStrong
#F63B58
*/
.pinkLight-color {
    color: #EE5776;
}
.pinkLight-bg {
    background-color: #EE5776;
    color: #FFF;
}
.btn-pinkLight {
    background-color: #EE5776;
    color: #FFF;
}
.btn-pinkLight:hover {
    background-color: #F63B58;
    color: #FFF;
}
.btn-outline-pinkLight {
    color: #EE5776;
    border-color: #EE5776;
}
.btn-outline-outline-pinkLight.disabled, .btn-outline-outline-pinkLight:disabled {
    color: #EE5776;
    background-color: transparent;
}

.pinkStrong-color {
    color: #F63B58;
}
.pinkStrong-bg {
    background-color: #F63B58;
    color: #FFF;
}
.btn-pinkStrong {
    background-color: #F63B58;
    color: #FFF;
}
.btn-pinkStrong:hover {
    background-color: #EE5776;
    color: #FFF;
}
.btn-outline-pinkStrong {
    color: #F63B58;
    border-color: #F63B58;
}
.btn-outline-outline-pinkStrong.disabled, .btn-outline-outline-pinkStrong:disabled {
    color: #F63B58;
    background-color: transparent;
}

/*
COLORES ROJOS
redLight
#FF5E56
redStrong
#FF3F34
*/
.redLight-color {
    color: #FF5E56;
}
.redLight-bg {
    background-color: #FF5E56;
    color: #FFF;
}
.btn-redLight {
    background-color: #FF5E56;
    color: #FFF;
}
.btn-redLight:hover {
    background-color: #FF3F34;
    color: #FFF;
}
.btn-outline-redLight {
    color: #FF5E56;
    border-color: #FF5E56;
}
.btn-outline-outline-redLight.disabled, .btn-outline-outline-redLight:disabled {
    color: #FF5E56;
    background-color: transparent;
}

.redStrong-color {
    color: #FF3F34;
}
.redStrong-bg {
    background-color: #FF3F34;
    color: #FFF;
}
.btn-redStrong {
    background-color: #FF3F34;
    color: #FFF;
}
.btn-redStrong:hover {
    background-color: #FF5E56;
    color: #FFF;
}
.btn-outline-redStrong {
    color: #FF3F34;
    border-color: #FF3F34;
}
.btn-outline-outline-redStrong.disabled, .btn-outline-outline-redStrong:disabled {
    color: #FF3F34;
    background-color: transparent;
}

/*
COLORES NARANJAS
orangeLight
#FEC047
orangeStrong
#FFA801
*/
.orangeLight-color {
    color: #FEC047;
}
.orangeLight-bg {
    background-color: #FEC047;
    color: #485460;
}
.btn-orangeLight {
    background-color: #FEC047;
    color: #485460;
}
.btn-orangeLight:hover {
    background-color: #FFA801;
    color: #485460;
}
.btn-outline-orangeLight {
    color: #FEC047;
    border-color: #FEC047;
}
.btn-outline-outline-orangeLight.disabled, .btn-outline-outline-orangeLight:disabled {
    color: #FEC047;
    background-color: transparent;
}

.orangeStrong-color {
    color: #FFA801;
}
.orangeStrong-bg {
    background-color: #FFA801;
    color: #FFF;
}
.btn-orangeStrong {
    background-color: #FFA801;
    color: #FFF;
}
.btn-orangeStrong:hover {
    background-color: #FEC047;
    color: #FFF;
}
.btn-outline-orangeStrong {
    color: #FFA801;
    border-color: #FFA801;
}
.btn-outline-outline-orangeStrong.disabled, .btn-outline-outline-orangeStrong:disabled {
    color: #FFA801;
    background-color: transparent;
}


/*
COLORES AMARILLOS
yellowLight
#FFDD58
yellowStrong
#FFD32A
*/
.yellowLight-color {
    color: #FFDD58;
}
.yellowLight-bg {
    background-color: #FFDD58;
    color: #485460;
}
.btn-yellowLight {
    background-color: #FFDD58;
    color: #485460;
}
.btn-yellowLight:hover {
    background-color: #FFD32A;
    color: #485460;
}
.btn-outline-yellowLight {
    color: #FFDD58;
    border-color: #FFDD58;
}
.btn-outline-outline-yellowLight.disabled, .btn-outline-outline-yellowLight:disabled {
    color: #FFDD58;
    background-color: transparent;
}

.yellowStrong-color {
    color: #FFD32A;
}
.yellowStrong-bg {
    background-color: #FFD32A;
    color: #1E272E;
}
.btn-yellowStrong {
    background-color: #FFD32A;
    color: #1E272E;
}
.btn-yellowStrong:hover {
    background-color: #FFDD58;
    color: #1E272E;
}
.btn-outline-yellowStrong {
    color: #FFD32A;
    border-color: #FFD32A;
}
.btn-outline-outline-yellowStrong.disabled, .btn-outline-outline-yellowStrong:disabled {
    color: #FFD32A;
    background-color: transparent;
}
/*
COLORES AZULES
blueLight
#575FCE
blueStrong
#3C40C6
*/
.blueLight-color {
    color: #575FCE;
}
.blueLight-bg {
    background-color: #575FCE;
    color: #FFF;
}
.btn-blueLight {
    background-color: #575FCE;
    color: #FFF;
}
.btn-blueLight:hover {
    background-color: #3C40C6;
    color: #FFF;
}
.btn-outline-blueLight {
    color: #575FCE;
    border-color: #575FCE;
}
.btn-outline-outline-blueLight.disabled, .btn-outline-outline-blueLight:disabled {
    color: #575FCE;
    background-color: transparent;
}

.blueStrong-color {
    color: #3C40C6;
}
.blueStrong-bg {
    background-color: #3C40C6;
    color: #FFF;
}
.btn-blueStrong {
    background-color: #3C40C6;
    color: #FFF;
}
.btn-blueStrong:hover {
    background-color: #575FCE;
    color: #FFF;
}
.btn-outline-blueStrong {
    color: #3C40C6;
    border-color: #3C40C6;
}
.btn-outline-outline-blueStrong.disabled, .btn-outline-outline-blueStrong:disabled {
    color: #3C40C6;
    background-color: transparent;
}
/*
COLORES CELESTES
skyblueLight
#4BCEFA
skyblueStrong
#0FBBF9
*/
.skyblueLight-color {
    color: #4BCEFA;
}
.skyblueLight-bg {
    background-color: #4BCEFA;
    color: #FFF;
}
.btn-skyblueLight {
    background-color: #4BCEFA;
    color: #FFF;
}
.btn-skyblueLight:hover {
    background-color: #0FBBF9;
    color: #FFF;
}
.btn-outline-skyblueLight {
    color: #4BCEFA;
    border-color: #4BCEFA;
}
.btn-outline-outline-skyblueLight.disabled, .btn-outline-outline-skyblueLight:disabled {
    color: #4BCEFA;
    background-color: transparent;
}

.skyblueStrong-color {
    color: #0FBBF9;
}
.skyblueStrong-bg {
    background-color: #0FBBF9;
    color: #FFF;
}
.btn-skyblueStrong {
    background-color: #0FBBF9;
    color: #FFF;
}
.btn-skyblueStrong:hover {
    background-color: #4BCEFA;
    color: #FFF;
}
.btn-outline-skyblueStrong {
    color: #0FBBF9;
    border-color: #0FBBF9;
}
.btn-outline-outline-skyblueStrong.disabled, .btn-outline-outline-skyblueStrong:disabled {
    color: #0FBBF9;
    background-color: transparent;
}
/*
COLORES CIAN
cianLight
#34E7E4
cianStrong
#00D8D5
*/
.cianLight-color {
    color: #34E7E4;
}
.cianLight-bg {
    background-color: #34E7E4;
    color: #FFF;
}
.btn-cianLight {
    background-color: #34E7E4;
    color: #FFF;
}
.btn-cianLight:hover {
    background-color: #00D8D5;
    color: #FFF;
}
.btn-outline-cianLight {
    color: #34E7E4;
    border-color: #34E7E4;
}
.btn-outline-outline-cianLight.disabled, .btn-outline-outline-cianLight:disabled {
    color: #34E7E4;
    background-color: transparent;
}

.cianStrong-color {
    color: #00D8D5;
}
.cianStrong-bg {
    background-color: #00D8D5;
    color: #FFF;
}
.btn-cianStrong {
    background-color: #00D8D5;
    color: #FFF;
}
.btn-cianStrong:hover {
    background-color: #34E7E4;
    color: #FFF;
}
.btn-outline-cianStrong {
    color: #00D8D5;
    border-color: #00D8D5;
}
.btn-outline-outline-cianStrong.disabled, .btn-outline-outline-cianStrong:disabled {
    color: #00D8D5;
    background-color: transparent;
}
/*
COLORES VERDES
greenLight
#0BE881
greeStrong
#06C46C
*/
.greenLight-color {
    color: #0BE881;
}
.greenLight-bg {
    background-color: #0BE881;
    color: #FFF;
}
.btn-greenLight {
    background-color: #0BE881;
    color: #FFF;
}
.btn-greenLight:hover {
    background-color: #06C46C;
    color: #FFF;
}
.btn-outline-greenLight {
    color: #0BE881;
    border-color: #0BE881;
}
.btn-outline-outline-greenLight.disabled, .btn-outline-outline-greenLight:disabled {
    color: #0BE881;
    background-color: transparent;
}

.greeStrong-color {
    color: #06C46C;
}
.greeStrong-bg {
    background-color: #06C46C;
    color: #FFF;
}
.btn-greeStrong {
    background-color: #06C46C;
    color: #FFF;
}
.btn-greeStrong:hover {
    background-color: #0BE881;
    color: #FFF;
}
.btn-outline-greeStrong {
    color: #06C46C;
    border-color: #06C46C;
}
.btn-outline-outline-greeStrong.disabled, .btn-outline-outline-greeStrong:disabled {
    color: #06C46C;
    background-color: transparent;
}
/*
COLORES GRIS CLARO
greyLight
#D2DBE2
greyStrong
#808E9B
*/
.greyLight-color {
    color: #D2DBE2;
}
.greyLight-bg {
    background-color: #D2DBE2;
    color: #1E272E;
}
.btn-greyLight {
    background-color: #D2DBE2;
    color: #1E272E;
}
.btn-greyLight:hover {
    background-color: #808E9B;
    color: #1E272E;
}
.btn-outline-greyLight {
    color: #D2DBE2;
    border-color: #D2DBE2;
}
.btn-outline-outline-greyLight.disabled, .btn-outline-outline-greyLight:disabled {
    color: #D2DBE2;
    background-color: transparent;
}

.greyStrong-color {
    color: #808E9B;
}
.greyStrong-bg {
    background-color: #808E9B;
    color: #1E272E;
}
.btn-greyStrong {
    background-color: #808E9B;
    color: #1E272E;
}
.btn-greyStrong:hover {
    background-color: #D2DBE2;
    color: #1E272E;
}
.btn-outline-greyStrong {
    color: #808E9B;
    border-color: #808E9B;
}
.btn-outline-outline-greyStrong.disabled, .btn-outline-outline-greyStrong:disabled {
    color: #808E9B;
    background-color: transparent;
}
/*
COLORES GRIS OSCURO
darkLight
#485460
darkStrong
#1E272E
*/
.darkLight-color {
    color: #485460;
}
.darkLight-bg {
    background-color: #485460;
    color: #FFF;
}
.btn-darkLight {
    background-color: #485460;
    color: #FFF;
}
.btn-darkLight:hover {
    background-color: #1E272E;
    color: #FFF;
}
.btn-outline-darkLight {
    color: #485460;
    border-color: #485460;
}
.btn-outline-outline-darkLight.disabled, .btn-outline-outline-darkLight:disabled {
    color: #485460;
    background-color: transparent;
}

.darkStrong-color {
    color: #1E272E;
}
.darkStrong-bg {
    background-color: #1E272E;
    color: #FFF;
}
.btn-darkStrong {
    background-color: #1E272E;
    color: #FFF;
}
.btn-darkStrong:hover {
    background-color: #485460;
    color: #FFF;
}
.btn-outline-darkStrong {
    color: #1E272E;
    border-color: #1E272E;
}
.btn-outline-outline-darkStrong.disabled, .btn-outline-outline-darkStrong:disabled {
    color: #1E272E;
    background-color: transparent;
}

/* ============================================================
   TRUCK ON ROUTE | PORTAL DE CLIENTES - TEMA GLOBAL
   Paleta basada en los colores ya definidos en custom.css.
   ============================================================ */

:root {
    --portal-primary: #007FFF;
    --portal-primary-hover: #0066CC;
    --portal-primary-soft: #EAF4FF;
    --portal-navy: #093D62;
    --portal-navy-dark: #072E4A;
    --portal-secondary: #089992;
    --portal-secondary-hover: #06736E;
    --portal-success: #06C46C;
    --portal-success-hover: #05A95D;
    --portal-warning: #E58E25;
    --portal-warning-hover: #AC6B1C;
    --portal-danger: #B7143F;
    --portal-danger-hover: #890F2F;
    --portal-info: #227094;
    --portal-info-hover: #1A546F;
    --portal-text: #485460;
    --portal-text-strong: #1E272E;
    --portal-muted: #808E9B;
    --portal-muted-light: #D2DBE2;
    --portal-border: #D2DBE2;
    --portal-border-soft: #E8EDF1;
    --portal-surface: #FFFFFF;
    --portal-surface-muted: #F4F7F9;
}

html,
body,
button,
input,
select,
textarea,
.form-control,
.btn,
.dropdown-menu,
.table,
.tooltip,
.popover {
    font-family: "Google Sans Flex", "Google Sans", Arial, sans-serif;
}

body {
    color: var(--portal-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.page-title,
.header-title {
    color: var(--portal-text-strong);
    font-family: "Google Sans Flex", "Google Sans", Arial, sans-serif;
    font-weight: 600;
}

a {
    color: var(--portal-primary);
}

a:hover,
a:focus {
    color: var(--portal-navy);
}

.text-primary {
    color: var(--portal-primary) !important;
}

.text-info {
    color: var(--portal-info) !important;
}

.text-success {
    color: var(--portal-success) !important;
}

.text-warning {
    color: var(--portal-warning) !important;
}

.text-danger {
    color: var(--portal-danger) !important;
}

.text-muted {
    color: var(--portal-muted) !important;
}

/* Cabecera y navegación */
.navbar-custom {
    background-color: var(--portal-navy);
}

.navbar-custom .topnav-menu .nav-link {
    color: rgba(255,255,255,.78);
}

.navbar-custom .topnav-menu .nav-link:hover,
.navbar-custom .topnav-menu .nav-link:focus,
.navbar-custom .dropdown.show .nav-link {
    color: #FFF;
    background-color: rgba(255,255,255,.08);
}

#topnav .topbar-menu {
    background-color: #FFF;
    border-bottom: 1px solid var(--portal-border-soft);
    box-shadow: 0 2px 7px rgba(9,61,98,.05);
}

.navigation-menu > li > a {
    color: var(--portal-text);
    font-weight: 500;
}

#topnav .has-submenu.active > a,
#topnav .has-submenu.active .submenu li.active > a,
.navigation-menu > li > a:hover,
.navigation-menu > li > a:focus,
.navigation-menu > li > a:active,
.navigation-menu > li:hover > a {
    color: var(--portal-primary);
}

.navigation-menu > li.has-submenu.active > a::after {
    background-color: var(--portal-primary);
}

.rightbar-title {
    background-color: var(--portal-navy);
}

/* Estructura */
.card {
    border-color: var(--portal-border-soft);
}

.page-title-box .page-title {
    color: var(--portal-navy);
}

.breadcrumb-item.active,
.footer {
    color: var(--portal-muted);
}

.table thead th {
    color: var(--portal-navy);
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,127,255,.035);
}

/* Formularios */
.form-control,
.custom-select,
.bootstrap-select > .dropdown-toggle {
    border-color: var(--portal-border);
}

.form-control:focus,
.custom-select:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 .15rem rgba(0,127,255,.12);
}

/* Botones */
.btn-primary {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

.btn-outline-primary {
    color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #FFF;
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

.btn-outline-danger {
    color: var(--portal-danger);
    border-color: var(--portal-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #FFF;
    background-color: var(--portal-danger);
    border-color: var(--portal-danger);
}

.btn-light {
    color: var(--portal-text);
    background-color: var(--portal-surface-muted);
    border-color: var(--portal-border-soft);
}

/* Colores contextuales del template */
.bg-primary,
.bg-purple {
    background-color: var(--portal-primary) !important;
}

.border-primary,
.border-purple {
    border-color: var(--portal-primary) !important;
}

.bg-info {
    background-color: var(--portal-secondary) !important;
}

.border-info {
    border-color: var(--portal-secondary) !important;
}

.bg-success {
    background-color: var(--portal-success) !important;
}

.border-success {
    border-color: var(--portal-success) !important;
}

.bg-warning {
    background-color: var(--portal-warning) !important;
}

.border-warning {
    border-color: var(--portal-warning) !important;
}

.bg-danger {
    background-color: var(--portal-danger) !important;
}

.border-danger {
    border-color: var(--portal-danger) !important;
}

/* Badges: deliberadamente más visibles que los originales del template */
.badge {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    letter-spacing: .01em;
    vertical-align: middle;
}

.badge-sm {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
}

.badge.badge-md {
    font-size: 13px;
    padding: 8px 16px;
}

.badge-primary {
    color: #FFF;
    background-color: var(--portal-primary);
}

.badge-info {
    color: #FFF;
    background-color: var(--portal-info);
}

.badge-success {
    color: #FFF;
    background-color: var(--portal-success);
}

.badge-warning {
    color: #FFF;
    background-color: var(--portal-warning);
}

.badge-danger {
    color: #FFF;
    background-color: var(--portal-danger);
}

.badge-secondary {
    color: #FFF;
    background-color: var(--portal-text);
}

.badge-light {
    color: var(--portal-text);
    background-color: var(--portal-surface-muted);
    border: 1px solid var(--portal-border);
}

/* Paginación */
.page-link {
    color: var(--portal-primary);
    border-color: var(--portal-border-soft);
}

.page-link:hover {
    color: var(--portal-navy);
    background-color: var(--portal-primary-soft);
    border-color: var(--portal-border);
}

.page-item.active .page-link {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
}

/* Estados de foco accesibles */
.btn:focus,
.page-link:focus,
a:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(0,127,255,.14);
}

/* Login */
.account-pages .card {
    border: 1px solid var(--portal-border-soft) !important;
    box-shadow: 0 8px 24px rgba(9,61,98,.08) !important;
}

.account-pages h1,
.account-pages h2,
.account-pages h3,
.account-pages h4 {
    color: var(--portal-navy);
}

@media (max-width: 767px) {
    .badge {
        font-size: 11px;
        padding: 5px 8px;
    }
}