/*
Title: Framework Midesof
Autor: Ministerio de Desarrollo Social y Familia - División de Información Social 
Year: 2024
Version 2.0
*/

:root {
--color-blanco: #FFFFFF;
--color-negro: #373737;
--color-primario-claro-1: #E7ECFF;
--color-primario-claro-2: #BDDEFF;
--color-primario-claro-3: #83C5FF;
--color-primario-claro-4: #649AFD;
--color-primario-claro-5: #426FE0;
--color-primario: #0F5AC4;
--color-primario-oscuro-1: #0046A8;
--color-primario-oscuro-2: #00268D;
--color-primario-oscuro-3: #001773;
--color-primario-oscuro-4: #01084D;
--color-exito-claro-1: #E8F5E9;
--color-exito-claro-2: #C8E6C9;
--color-exito-claro-3: #A5D6A7;
--color-exito-claro-4: #81C784;
--color-exito-claro-5: #66BB6A;
--color-exito: #4CAF50;
--color-exito-oscuro-1: #43A047;
--color-exito-oscuro-2: #388E3C;
--color-exito-oscuro-3: #2E7D32;
--color-exito-oscuro-4: #1B5E20;
--color-info-claro-1: #E3F2FD;
--color-info-claro-2: #BBDEFB;
--color-info-claro-3: #90CAF9;
--color-info-claro-4: #64B5F6;
--color-info-claro-5: #42A5F5;
--color-info: #2196F3;
--color-info-oscuro-1: #1E88E5;
--color-info-oscuro-2: #1976D2;
--color-info-oscuro-3: #1565C0;
--color-info-oscuro-4: #0D47A1;
--color-error-claro-1: #FFD8D8;
--color-error-claro-2: #FFB6BE;
--color-error-claro-3: #FF5D63;
--color-error-claro-4: #FF2930;
--color-error-claro-5: #FE070E;
--color-error: #C10101;
--color-error-oscuro-1: #B0020A;
--color-error-oscuro-2: #A50000;
--color-error-oscuro-3: #7E000A;
--color-error-oscuro-4: #570002;
--color-advertencia-claro-1: #FBE9E7;
--color-advertencia-claro-2: #FFCCBC;
--color-advertencia-claro-3: #FFAB91;
--color-advertencia-claro-4: #FF8A65;
--color-advertencia-claro-5: #FF7043;
--color-advertencia: #FF5722;
--color-advertencia-oscuro-1: #F4511E;
--color-advertencia-oscuro-2: #E64A19;
--color-advertencia-oscuro-3: #D84315;
--color-advertencia-oscuro-4: #BF360C;
--color-gris-50: #F2F2F2;
--color-gris-100: #E6E6E6;
--color-gris-200: #CCCCCC;
--color-gris-300: #B3B3B3;
--color-gris-400: #999999;
--color-gris-500: #808080;
--color-gris-600: #666666;
--color-gris-700: #4D4D4D;
--color-gris-800: #333333;
--color-gris-900: #1A1A1A;
/*Paleta extendida*/
--color-amarillo-50: #FFFBEB;
--color-amarillo-100: #FFF1C2;
--color-amarillo-200: #FFE8A3;
--color-amarillo-300: #FFBE5C;
--color-amarillo-400: #E5A000;
--color-amarillo-500: #BF6A02;
--color-amarillo-600: #975102;
--color-amarillo-700: #682D03;
--color-amarillo-800: #522504;
--color-amarillo-900: #401B01;
--color-morado-50: #EFE5FD;
--color-morado-100: #D4BFF9;
--color-morado-200: #B794F6;
--color-morado-300: #9965F4;
--color-morado-400: #7E3FF2;
--color-morado-500: #6002EE;
--color-morado-600: #5300E8;
--color-morado-700: #3900D3;
--color-morado-800: #1600AC;
--color-morado-900: #000080;
/*Data visual*/
--color-grafico-1: #FA4D56;
--color-grafico-2: #6929C4;
--color-grafico-3: #198038;
--color-grafico-4: #009D9A;
--color-grafico-5: #000070;
--color-grafico-6: #D3354F;
--color-grafico-7: #FAE250;
--color-grafico-8: #C9EE63;
--color-grafico-9: #61B258;
--color-grafico-10: #70D1F0;
--color-grafico-11: #4A62D1;
--color-grafico-12: #A56EFF;
--color-grafico-13: #DD45DF;
--color-grafico-14: #F1C0D3;
--color-grafico-15: #F9D9B6;
--color-grafico-16: #FEFACD;
--color-grafico-17: #BDFDC8;
--color-grafico-18: #D7BFFA;
/*Data visual un color*/
--color-grafico-uncolor-1: #001141;
--color-grafico-uncolor-2: #001D6C;
--color-grafico-uncolor-3: #002D9C;
--color-grafico-uncolor-4: #88C3DC;
--color-grafico-uncolor-5: #0F62FE;
--color-grafico-uncolor-6: #0F62FE;
--color-grafico-uncolor-7: #78A9FF;
--color-grafico-uncolor-8: #A6C8FF;
--color-grafico-uncolor-9: #D0E2FF;
--color-grafico-uncolor-10: #EDF5FF;

}


/* width */
::-webkit-scrollbar {width: 10px;}
/* Track */
::-webkit-scrollbar-track {background: #f1f1f1; }
/* Handle */
::-webkit-scrollbar-thumb {background: #888; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #555; }


/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

body {font-size: 16px; line-height: 1.5em; font-weight: 400; font-family: Roboto;  color: #373737; background-color: #ffffff}




/*--------------------------------------------------------------
# Header, Footer y Main
--------------------------------------------------------------*/

header {display: inline-block; width: 100%; padding-bottom: 5px; min-height: 100px}
footer {background-color: #012C50 !important; padding: 40px 0 50px; color: #fff; position: relative;}
footer ul li {padding-bottom: 0px;}
footer .logoMin {max-height: 120px; max-width: 300px}
footer a { height: inherit; overflow: inherit; text-overflow: inherit; white-space: inherit; color: #fff !important;}

@media (max-width: 767px) {
  footer {height: inherit;padding: 40px 0 50px;}
  footer a {overflow: inherit; text-overflow: inherit;}
  img.logoMin {margin-bottom: 32px;}
}

footer .line { position: absolute; bottom: 0; width: 80px; min-width: unset; height: 5px; margin-bottom: 0;}
footer .line::after {bottom: 0;}
.line::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 5px; content: ""; background: linear-gradient(to right, #0f69b4 0, #0f69b4 50%, #e22c2c 50%, #e22c2c 100%);}
.line {
    position: relative;
    display: inline-block;
    min-width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

@media (min-width: 768px) {
    .line {min-width: 600px;}
    footer .line {width: 169px;}
}

main {min-height: calc(100vh - 118px);; padding: 0px}

/*--------------------------------------------------------------
# Menus  
--------------------------------------------------------------*/

nav.navbar {box-shadow: none !important;}
nav.navbar .navbar-brand {width: 115px !important; height: inherit; padding: 0px}
nav.navbar .navbar-cobrand img {width: 115px !important; height: inherit; max-height: 115px; margin-top: 16px}

nav.navbar.navbar-expand-lg .navbar-collapse {justify-content: end}
nav.navbar {min-height: inherit !important;padding: 0px}
nav.navbar.navbar-expand-lg {align-items: self-start; }
.menu nav.navbar.navbar-expand-lg {align-items: self-start; height: inherit;}

header.bg-claro nav.navbar .navbar-toggler-icon, 
header.bg-claro nav.navbar.navbar-dark .navbar-toggler-icon,
header.bg-claro nav.navbar.navbar-light .navbar-toggler-icon {background-image: url(../img/menu-oscuro.svg);}
header.bg-claro a {color: #191A1A}
header.bg-claro .toolbar a {color: #a8b7c7}
header.bg-claro .toolbar .nav a {color: #4a4a4a}

header.bg-terciario nav.navbar .navbar-toggler-icon, 
header.bg-terciario nav.navbar.navbar-dark .navbar-toggler-icon,
header.bg-terciario nav.navbar.navbar-light .navbar-toggler-icon {background-image: url(../img/menu-claro.svg);}
header.bg-terciario a {color: #ffffff}

@media (max-width: 767px) {
  .nav {display: block;}
  nav.navbar .navbar-toggler {margin: 0 auto;}
  #navbarNavDropdown ul li:hover ul.sub-menu {display: block; position: relative;}
}

@media (max-width: 992px) {
  .navbar {justify-content: end;}
  nav .nav {display: block;}
  nav .navbar-collapse.collapse.show {margin-bottom: 20px}
}

/* Menu drop down hover*/
#navbarNavDropdown ul li {position: relative; display: block;}
#navbarNavDropdown ul li ul.sub-menu {position: absolute; z-index: 999; width: auto; display: none; padding: 0px;}
#navbarNavDropdown ul li:hover ul.sub-menu {display: block; background-color: #fff; border: 1px solid #ccc;}
#navbarNavDropdown .dropdown-item { border-bottom: 1px solid #ccc; padding: 15px;}
@media (max-width: 992px) {
#navbarNavDropdown ul li ul.sub-menu {position: relative; width: auto; display: block; padding: 0px; margin-left: 20px;}
#navbarNavDropdown .dropdown-item {padding: 10px;}
}


/*--------------------------------------------------------------
# Títulos y párrafos
--------------------------------------------------------------*/

h1.titulo-xl, h2.titulo-xl, h3.titulo-xl, h4.titulo-xl, h5.titulo-xl, h6.titulo-xl {font-family: Roboto Slab, sans-serif; font-size: 3rem; line-height: 3.5rem; font-weight: 400 ;  margin-bottom: 1.5rem }
h1.titulo-l, h2.titulo-l, h3.titulo-l, h4.titulo-l, h5.titulo-l, h6.titulo-l  {font-family: Roboto Slab, sans-serif; font-size: 2.25rem; line-height: 3rem; font-weight: 500 ;  margin-bottom: 1.15rem }
h1.titulo-m, h2.titulo-m, h3.titulo-m, h4.titulo-m, h5.titulo-m, h6.titulo-m  {font-family: Roboto Slab, sans-serif; font-size: 2rem; line-height: 2.45rem; font-weight: 500 ;  margin-bottom: 1.15rem }
h1.titulo-s, h2.titulo-s, h3.titulo-s, h4.titulo-s, h5.titulo-s, h6.titulo-s {font-family: Roboto Slab, sans-serif; font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }

.titulo-xl {font-size: 3rem; line-height: 3.5rem; font-weight: 400 ;  margin-bottom: 1.5rem }
.titulo-l {font-size: 2.25rem; line-height: 3rem; font-weight: 500 ;  margin-bottom: 1.15rem }
.titulo-m {font-size: 2rem; line-height: 2.45rem; font-weight: 500 ;  margin-bottom: 1.15rem }
.titulo-s {font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }

.texto-l {font-size: 1.5rem; line-height: 2rem;   margin-bottom: 1.15rem }
.texto-m {font-size: 2rem; line-height: 1.5rem;   margin-bottom: 1.15rem }
.texto-s {font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }


@media (max-width: 767px) {
  h1.titulo-xl, h2.titulo-xl, h3.titulo-xl, h4.titulo-xl, h5.titulo-xl, h6.titulo-xl {font-family: Roboto Slab, sans-serif; font-size: 3rem; line-height: 3.5rem; font-weight: 400 ;  margin-bottom: 1.5rem }
  h1.titulo-l, h2.titulo-l, h3.titulo-l, h4.titulo-l, h5.titulo-l, h6.titulo-l  {font-family: Roboto Slab, sans-serif; font-size: 2.25rem; line-height: 3rem; font-weight: 500 ;  margin-bottom: 1.15rem }
  h1.titulo-m, h2.titulo-m, h3.titulo-m, h4.titulo-m, h5.titulo-m, h6.titulo-m  {font-family: Roboto Slab, sans-serif; font-size: 2rem; line-height: 2.45rem; font-weight: 500 ;  margin-bottom: 1.15rem }
  h1.titulo-s, h2.titulo-s, h3.titulo-s, h4.titulo-s, h5.titulo-s, h6.titulo-s {font-family: Roboto Slab, sans-serif; font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }

  .titulo-xl {font-size: 3rem; line-height: 3.5rem; font-weight: 400 ;  margin-bottom: 1.5rem }
  .titulo-l {font-size: 2.25rem; line-height: 3rem; font-weight: 500 ;  margin-bottom: 1.15rem }
  .titulo-m {font-size: 2rem; line-height: 2.45rem; font-weight: 500 ;  margin-bottom: 1.15rem }
  .titulo-s {font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }

  .texto-l {font-size: 1.5rem; line-height: 2rem;   margin-bottom: 1.15rem }
  .texto-m {font-size: 2rem; line-height: 1.5rem;   margin-bottom: 1.15rem }
  .texto-s {font-size: 1.6rem; line-height: 2rem; font-weight: 500 ;  margin-bottom: 0.9rem }
}

main p {color: #4a4a4a; margin-bottom: 20px}
main ul li, 
main ol li  {font-size: 1rem; line-height: 1.5em; font-weight: 400 !important; font-family: Roboto;  color: #4a4a4a; }


.subtitulo {font-size: 0.875rem; line-height: 1.125rem; font-weight: 400 !important; text-transform: uppercase;}

caption, .caption {font-size: 0.8rem; line-height: 0.8rem; font-weight: 500 !important;}

footer p {color: #fff}
footer ul, footer ul li {padding: 0px; list-style: none; color: #fff}

p .material-symbols-outlined {font-size: 1.3em; top: 4px; position: relative;}

p a, main a {color: var(--color-primario);}
p a:hover, main a:hover {color: var(--color-primario);}


/*--------------------------------------------------------------
# Padding y márgenes
--------------------------------------------------------------*/

/*Paddings*/

.p0 {padding: 0px !important}

.p4 {padding: 4px}
.p8 {padding: 8px}
.p16 {padding: 16px}
.p24 {padding: 24px}
.p32 {padding: 32px}
.p64 {padding: 64px}
.p80 {padding: 80px}

.p4-top {padding-top: 4px}
.p8-top {padding-top: 8px}
.p16-top {padding-top: 16px}
.p24-top {padding-top: 24px}
.p32-top {padding-top: 32px}
.p64-top {padding-top: 64px}
.p80-top {padding-top: 80px}

.p4-bottom {padding-bottom: 4px}
.p8-bottom {padding-bottom: 8px}
.p16-bottom {padding-bottom: 16px}
.p24-bottom {padding-bottom: 24px}
.p32-bottom {padding-bottom: 32px}
.p64-bottom {padding-bottom: 64px}
.p80-bottom {padding-bottom: 80px}

.p4-left {padding-left: 4px}
.p8-left {padding-left: 8px}
.p16-left {padding-left: 16px}
.p24-left {padding-left: 24px}
.p32-left {padding-left: 32px}
.p64-left {padding-left: 64px}
.p80-left {padding-left: 80px}

.p4-right {padding-right: 4px}
.p8-right {padding-right: 8px}
.p16-right {padding-right: 16px}
.p24-right {padding-right: 24px}
.p32-right {padding-right: 32px}
.p64-right {padding-right: 64px}
.p80-right {padding-right: 80px}

.p4-x {padding-left: 4px; padding-right: 4px}
.p8-x {padding-left: 8px; padding-right: 8px}
.p16-x {padding-left: 16px; padding-right: 16px}
.p24-x {padding-left: 24px; padding-right: 24px}
.p32-x {padding-left: 32px; padding-right: 32px}
.p64-x {padding-left: 64px; padding-right: 64px}
.p80-x {padding-left: 80px; padding-right: 80px}

.p4-y {padding-top: 4px; padding-bottom: 4px}
.p8-y {padding-top: 8px; padding-bottom: 8px}
.p16-y {padding-top: 16px; padding-bottom: 16px}
.p24-y {padding-top: 24px; padding-bottom: 24px}
.p32-y {padding-top: 32px; padding-bottom: 32px}
.p64-y {padding-top: 64px; padding-bottom: 64px}
.p80-y {padding-top: 80px; padding-bottom: 80px}

/*Márgenes */

.m0 {margin: 0px !important}

.m4 {margin: 4px}
.m8 {margin: 8px}
.m16 {margin: 16px}
.m24 {margin: 24px}
.m32 {margin: 32px}
.m64 {margin: 64px}
.m80 {margin: 80px}

.m4-top {margin-top: 4px}
.m8-top {margin-top: 8px}
.m16-top {margin-top: 16px}
.m24-top {margin-top: 24px}
.m32-top {margin-top: 32px}
.m64-top {margin-top: 64px}
.m80-top {margin-top: 80px}

.m4-bottom {margin-bottom: 4px}
.m8-bottom {margin-bottom: 8px}
.m16-bottom {margin-bottom: 16px}
.m24-bottom {margin-bottom: 24px}
.m32-bottom {margin-bottom: 32px}
.m64-bottom {margin-bottom: 64px}
.m80-bottom {margin-bottom: 80px}

.m4-left {margin-left: 4px}
.m8-left {margin-left: 8px}
.m16-left {margin-left: 16px}
.m24-left {margin-left: 24px}
.m32-left {margin-left: 32px}
.m64-left {margin-left: 64px}
.m80-left {margin-left: 80px}

.m4-right {margin-right: 4px}
.m8-right {margin-right: 8px}
.m16-right {margin-right: 16px}
.m24-right {margin-right: 24px}
.m32-right {margin-right: 32px}
.m64-right {margin-right: 64px}
.m80-right {margin-right: 80px}

.m4-x {margin-left: 4px; margin-right: 4px}
.m8-x {margin-left: 8px; margin-right: 8px}
.m16-x {margin-left: 16px; margin-right: 16px}
.m24-x {margin-left: 24px; margin-right: 24px}
.m32-x {margin-left: 32px; margin-right: 32px}
.m64-x {margin-left: 64px; margin-right: 64px}
.m80-x {margin-left: 80px; margin-right: 80px}

.m4-y {margin-top: 4px; margin-bottom: 4px}
.m8-y {margin-top: 8px; margin-bottom: 8px}
.m16-y {margin-top: 16px; margin-bottom: 16px}
.m24-y {margin-top: 24px; margin-bottom: 24px}
.m32-y {margin-top: 32px; margin-bottom: 32px}
.m64-y {margin-top: 64px; margin-bottom: 64px}
.m80-y {margin-top: 80px; margin-bottom: 80px}

/*--------------------------------------------------------------
# Botones
--------------------------------------------------------------*/

.boton {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/*Tamaños*/
.boton-lg {padding: 13px 25px; font-size:  1.25rem !important; line-height: 1rem;}
.boton-md {padding: 12px 20px; font-size: 1rem !important; line-height: 1rem;}
.boton-sm {padding: 8px 15px; font-size:  1rem !important; line-height: 1rem;}
.boton-xs {padding: 6px; font-size:  1rem !important; line-height: 1rem;}


/*Básicos*/
.boton-primario { background-color: var(--color-primario); color: #ffffff; border: 1px solid var(--color-primario); text-decoration: none !important;}
.boton-secundario { background-color: #ffffff; color: var(--color-primario); border: 1px solid var(--color-primario); text-decoration: none !important;}
.boton-terciario { background-color: #012C50; color: #ffffff;  border: 1px solid #012C50}

.boton-primario:hover , .boton-primario:active { background-color: #0A588B; color: #ffffff; border: 1px solid #0085D6;}
.boton-secundario:hover , .boton-secundario:active { background-color: #ffffff; color: #0A588B; border: 1px solid #0A588B;}
.boton-terciario:hover , .boton-terciario:active { background-color: #132350; color: #ffffff;  border: 1px solid #132350}

.boton-terciario-invert:hover { background-color: #012C50; color: #ffffff;  border: 1px solid #012C50}

.boton.disabled, .boton:disabled { color: #8a8a8a; background-color: #E5E5E5; border-color: #E5E5E5; pointer-events: none;}

/*Link*/
.boton-link { background-color: transparent; color: var(--color-primario); border: 0px;}
.boton-link i { visibility: hidden;font-size: 0.8em; margin-left: 0px;}
.boton-link:hover { background-color: transparent; color: #0A588B; border: 0px;}
.boton-link:hover i{ visibility: visible; font-size: 0.8em; margin-left: 4px; transition: 0.5s}


/*Border curvo*/
.boton-curvo {border-radius: 30px}

/*Ver más - Más detalles */
.boton-vermas { text-decoration: underline;}
.boton-vermas:after {content: '\e5e1'; font-size: 0.8rem; font-family: 'Material Symbols Outlined'; transition: 0.5s; text-decoration: none !important; }
.boton-vermas:hover:after {margin-left: 0.5rem; transition: 0.5s }

/*Botones Acciones*/
.boton-error { background-color: #E22C2C; color: #ffffff;  border: 1px solid #E22C2C; text-decoration: none !important;}
.boton-advertencia { background-color: #F56B0F; color: #ffffff;  border: 1px solid #F56B0F; text-decoration: none !important;}
.boton-exito { background-color: #0B8578; color: #ffffff;  border: 1px solid #0B8578; text-decoration: none !important;}
.boton-info { background-color:  #CFE1F3; color: #191A1A;  border: 1px solid #CFE1F3; text-decoration: none !important;}
.boton-claro { background-color: #ffffff; color: #191A1A;  border: 1px solid #ffffff; text-decoration: none !important;}
.boton-oscuro { background-color: #4A4A4A; color: #ffffff;  border: 1px solid #4A4A4A; text-decoration: none !important;}

.boton-error:hover, .boton-error:ac { background-color: #be3939; color: #ffffff;  border: 1px solid #be3939}
.boton-advertencia:hover, .boton-advertencia:ac { background-color: #d9600e; color: #ffffff;  border: 1px solid #d9600e}
.boton-exito:hover, .boton-exito:ac { background-color: #2D717C; color: #ffffff;  border: 1px solid #2D717C}
.boton-info:hover, .boton-info:ac { background-color:  #a6c6e9; color: #191A1A;  border: 1px solid #a6c6e9}
.boton-claro:hover, .boton-claro:ac { background-color: #F2F2F2; color: #191A1A;  border: 1px solid #F2F2F2}
.boton-oscuro:hover, .boton-oscuro:ac { background-color: #000000; color: #ffffff;  border: 1px solid #000000}

/*Boton con icono*//*
.boton span.material-symbols-outlined {top: 4px; position: relative;font-size: 1.1em;}*/

/*Boton Clave única*/
a.btn-cu, a.btn-cu .texto {text-decoration: none;}

/*--------------------------------------------------------------
# Cards tarjetas
--------------------------------------------------------------*/

.card {border: 1px solid #abb7c7; margin-bottom: 2em; background-color: #fff}
.card-title {margin-bottom: 8px }
.card-function {background-color: #fff}

.card-cuadrada {display: flex; align-content: center; justify-content: center}
.card-cuadrada .card-body {flex: inherit;}

.card.card-boton:hover {background-color: #F2F2F2 !important; border: 1px solid #ccc; transition: 0.5s}
.card.card-boton i, .card.card-boton .material-symbols-outlined {margin-right: 0px; transition: 0.5s; }
.card.card-boton:hover i, .card.card-boton:hover .material-symbols-outlined {margin-right: -10px; transition: 0.5s}

.card.card-boton2:hover {background-color: var(--color-primario) !important; border: 1px solid #ccc; transition: 0.5s; }
.card.card-boton2 i, .card.card-boton2 .material-symbols-outlined {margin-right: 0px; transition: 0.5s; }
.card.card-boton2:hover i, .card.card-boton2:hover .material-symbols-outlined {margin-right: -10px; transition: 0.5s}
.card.card-boton2:hover p, .card.card-boton2:hover h1, .card.card-boton2:hover h4 {color: #fff !important}

.card.card-boton-icon:hover {background-color: var(--color-primario) !important; border: 1px solid #ccc; transition: 0.5s}
.card.card-boton-icon i, .card.card-boton-icon .material-symbols-outlined {margin-right: 0px; transition: 0.5s; }
.card.card-boton-icon:hover i, .card.card-boton-icon:hover .material-symbols-outlined, .card.card-boton-icon:hover p, .card.card-boton-icon:hover h1, .card.card-boton-icon:hover h4  {color: #fff !important}

.card.card-boton .material-symbols-outlined {font-size: 1rem}

/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/

.tab-content .tab-pane {padding: 16px }
.nav-tabs .nav-link {border: 0px !important}

/*Tab horizontal*/
.nav-tabs .nav-item {color: #191A1A !important ;}
.nav-tabs .nav-item , .nav-pills .nav-item {cursor: pointer;}
.nav-tabs .nav-item {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: #ccc 1px solid;
  text-decoration: underline;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover{
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: #016fb3 2px solid !important;
  color: #191A1A ;
  font-weight: normal !important;
}

/*Tab vertical*/
.nav-tabs .nav-link {color: #191A1A ;}
.nav-tabs[aria-orientation=vertical] button.nav-link {text-align: left !important; border-radius: 0px}
.nav-tabs[aria-orientation=vertical].izq button.nav-link:hover {border: 0px !important; border-right: #016fb3 4px solid !important;}
.nav-tabs[aria-orientation=vertical].der button.nav-link:hover {border: 0px !important; border-left: #016fb3 4px solid !important;}

.nav-tabs[aria-orientation=vertical].izq  {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: #ccc 1px solid;
  border-bottom: 0px !important;
}

.nav-tabs[aria-orientation=vertical].der  {
  border-top: 0px !important;
  border-right: 0px !important;
  border-left: #ccc 1px solid;
  border-bottom: 0px !important;
}

.nav-tabs[aria-orientation=vertical].izq .nav-item.show .nav-link, 
.nav-tabs[aria-orientation=vertical].izq .nav-link.active  {
  border-right: #016fb3 4px solid !important;
  border-bottom: 0px !important;
  border-radius: 0px !important;
  background-color: inherit !important;
  color: var(--color-primario) !important;
  font-weight: bold;
}

.nav-tabs[aria-orientation=vertical].der .nav-item.show .nav-link, 
.nav-tabs[aria-orientation=vertical].der .nav-link.active  {
  border-left: #016fb3 3px solid !important;
  border-bottom: 0px !important;
  border-radius: 0px !important;
  background-color: inherit !important;
  color: var(--color-primario);
  font-weight: bold;
}


/*--------------------------------------------------------------
# Modals
--------------------------------------------------------------*/
.modal-header .close {padding: 0rem 1rem}
.modal .modal-header .close span {font-size: 2em}
.modal .modal-footer {border-top: 0px; justify-content: center}

/*--------------------------------------------------------------
# Alertas
--------------------------------------------------------------*/
.alerta {
  position: relative;
  margin-bottom: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-radius: 0.375rem;
  padding:24px 16px 24px 16px;
  display: flex;
}
.alerta i, .alerta .material-symbols-outlined {font-size: 1.8em; margin-right: 16px}

/*--------------------------------------------------------------
# Banners
--------------------------------------------------------------*/
a.banner { height: 100px; }

/*--------------------------------------------------------------
# Formularios
--------------------------------------------------------------*/

/*Tamaños*/
label {margin-bottom: 4px}

.form-control, .form-check {min-height: 40px}
.form-control-lg, input.form-control-lg, select.custom-select-lg  {min-height: 48px; font-size: 1em}
.form-control-lg, input.form-control-sm, select.custom-select-sm {min-height: 32px}

/*Input styles*/
.input-group.icon-derecha .form-control {border-right: 0px}
.input-group.icon-izquierda .form-control {border-left: 0px}
.input-group.icon-derecha .input-group-prepend .input-group-text {border-left: 0px; background-color: transparent;}
.input-group.icon-izquierda .input-group-prepend .input-group-text {border-right: 0px; background-color: transparent;}

/*Select*/
.custom-select { 
  height: auto; 
  background: inherit;
  -webkit-appearance: revert-layer;
  -moz-appearance: revert-layer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-image: url(../img/ico-custom-select.svg);
  background-position: right;
  background-repeat: no-repeat;
}

/*Checkbox*/
.form-check .form-check-input {-ms-transform: scale(1.3); /* IE */-moz-transform: scale(1.3); /* FF */-webkit-transform: scale(1.3); /* Safari and Chrome */-o-transform: scale(1.3); /* Opera */transform: scale(1.3);}
.form-check .form-check-label {margin-left: 10px;}

form input:focus,
form textarea:focus,
form select:focus {border: 3px solid #CFE1F3}


/*--------------------------------------------------------------
# Elementos
--------------------------------------------------------------*/

/*Bordes*/
.borde1 {border-width: 1px}
.borde2 {border-width: 2px}
.borde3 {border-width: 3px}
.borde4 {border-width: 4px}
.borde5 {border-width: 5px}

/*Tags*/
.tag {font-weight: 400 !important; padding: 4px 12px; display: inline-block; margin-bottom: 0.5em;} 
.tag-curvo {font-weight: 400 !important;  padding: 4px 15px; display: inline-block; margin-bottom: 0.5em; border-radius: 15px; } 
.tag-sm {font-size: 0.875rem; line-height: 1.125rem; }
.tag-img {position: absolute; top: 5px; left: 5px}

/*Colasable*/
.collapsible-links2, .collapsible-links-list2{padding-left: 0; list-style: none; }
.collapsible-links-list2:hover { background-color: var(--color-primario); color: #ffffff; }

/*Breadcrumb*/
.breadcrumb-item+.breadcrumb-item::before {content: "/" !important; color: #232323}
.breadcrumb-item a {color: var(--color-primario)}

/*Paginador*/
.pagination-container.left {justify-content: start;}
.pagination-container.right {justify-content: end;}


/*--------------------------------------------------------------
# Accesibilidad
--------------------------------------------------------------*/

.saltar-contenido {
  background-color: #fff000;
  position: absolute;
  top: 0px;
  left: 35%;
  font-size: 1.0em;
  padding: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: -999;
  opacity: 0;
}
.saltar-contenido:focus {
  z-index: 999;
  opacity: 1
}

/*--------------------------------------------------------------
# colores
--------------------------------------------------------------*/

/*Textos*/
.texto-blanco { color: var(--color-blanco) !important;}
.texto-negro { color: var(--color-negro) !important;}


.texto-primario {color: var(--color-primario) !important}
.texto-primario-oscuro {color: var(--color-primario-oscuro-4) !important}
.texto-primario-claro {color: var(--color-primario-claro-1) !important}

.texto-exito {color: var(--color-exito) !important}
.texto-exito-oscuro {color: var(--color-exito-oscuro) !important}
.texto-exito-claro {color: var(--color-exito-claro) !important}

.texto-info {color: var(--color-info) !important}
.texto-info-oscuro {color: var(--color-info-oscuro) !important}
.texto-info-claro {color: var(--color-info-claro) !important}

.texto-error {color: var(--color-error) !important}
.texto-error-oscuro {color: var(--color-error-oscuro) !important}
.texto-error-claro {color: var(--color-error-claro) !important}

.texto-advertencia {color: var(--color-advertencia) !important}
.texto-advertencia-oscuro {color: var(--color-advertencia-oscuro) !important}
.texto-advertencia-claro {color: var(--color-advertencia-claro) !important}

.texto-gris-50 {color: var(--color-gris-50) !important}
.texto-gris-100 {color: var(--color-gris-100) !important}
.texto-gris-200 {color: var(--color-gris-200) !important}
.texto-gris-300 {color: var(--color-gris-300) !important}
.texto-gris-400 {color: var(--color-gris-400) !important}
.texto-gris-500 {color: var(--color-gris-500) !important}
.texto-gris-600 {color: var(--color-gris-600) !important}
.texto-gris-700 {color: var(--color-gris-700) !important}
.texto-gris-800 {color: var(--color-gris-800) !important}
.texto-gris-900 {color: var(--color-gris-900) !important}


.text-titulo {color: #191A1A !important}
.text-subtitulo {color: #4A4A4A !important}
.text-enlace {color: #0096F3 !important}

/*Fondos*/
.bg-primario { background-color: var(--color-primario) !important; color: var(--color-blanco) !important}
.bg-primario-claro { background-color: var(--color-primario-claro-1) !important; color: var(--color-primario-oscuro-4) !important}
.bg-primario-oscuro { background-color: var(--color-primario-oscuro-4) !important; color: var(--color-blanco) !important}

.bg-exito { background-color: var(--color-exito) !important; color: var(--color-blanco) !important}
.bg-exito-claro { background-color: var(--color-exito-claro-1) !important; color: var(--color-exito-oscuro-4) !important}
.bg-exito-oscuro { background-color: var(--color-exito-oscuro-4) !important; color: var(--color-blanco) !important}

.bg-info { background-color: var(--color-info) !important; color: var(--color-blanco) !important}
.bg-info-claro { background-color: var(--color-info-claro-1) !important; color: var(--color-info-oscuro-4) !important}
.bg-info-oscuro { background-color: var(--color-info-oscuro-4) !important; color: var(--color-blanco) !important}

.bg-error { background-color: var(--color-error) !important; color: var(--color-blanco) !important}
.bg-error-claro { background-color: var(--color-error-claro-1) !important; color: var(--color-error-oscuro-4) !important}
.bg-error-oscuro { background-color: var(--color-error-oscuro-4) !important; color: var(--color-blanco) !important}

.bg-advertencia { background-color: var(--color-advertencia) !important; color: var(--color-blanco) !important}
.bg-advertencia-claro { background-color: var(--color-advertencia-claro-1) !important; color: var(--color-advertencia-oscuro-4) !important}
.bg-advertencia-oscuro { background-color: var(--color-advertencia-oscuro-4) !important; color: var(--color-blanco) !important}

.bg-gris-50 { background-color: var(--color-gris) !important; color: var(--color-negro) !important}
.bg-gris-100 { background-color: var(--color-gris-100) !important; color: var(--color-negro) !important}
.bg-gris-200 { background-color: var(--color-gris-200) !important; color: var(--color-negro) !important}
.bg-gris-300 { background-color: var(--color-gris-300) !important; color: var(--color-negro) !important}
.bg-gris-400 { background-color: var(--color-gris-400) !important; color: var(--color-negro) !important}
.bg-gris-500 { background-color: var(--color-gris-500) !important; color: var(--color-negro) !important}
.bg-gris-600 { background-color: var(--color-gris-600) !important; color: var(--color-blanco) !important}
.bg-gris-700 { background-color: var(--color-gris-700) !important; color: var(--color-blanco) !important}
.bg-gris-800 { background-color: var(--color-gris-800) !important; color: var(--color-blanco) !important}
.bg-gris-900 { background-color: var(--color-gris-900) !important; color: var(--color-blanco) !important}

.bg-terciario {background-color: #012c50 !important;}
.bg-claro { background-color: #ffffff !important; color: #191A1A !important}
.bg-oscuro { background-color: #191A1A !important; color: #ffffff !important}

.alerta-exito { background-color: var(--color-exito-claro-1) !important; color: var(--color-exito-oscuro-4) !important}
.alerta-info { background-color: var(--color-info-claro-1) !important; color: var(--color-info-oscuro-4) !important}
.alerta-error { background-color: var(--color-error-claro-1) !important; color: var(--color-error-oscuro-4) !important}
.alerta-advertencia { background-color: var(--color-advertencia-claro-1) !important; color: var(--color-advertencia-oscuro-4) !important}

/*Bordes*/
.borde1 {border-width: 1px; border-style:solid}
.borde2 {border-width: 2px; border-style:solid}
.borde3 {border-width: 3px; border-style:solid}

.borde-primario { border-color: var(--color-primario) !important }
.borde-primario-claro { border-color: var(--color-primario-claro-1) !important }
.borde-primario-oscuro { border-color: var(--color-primario-oscuro-4) !important }
.borde-exito { border-color: var(--color-exito) !important }
.borde-exito-claro { border-color: var(--color-exito-claro-1) !important }
.borde-exito-oscuro { border-color: var(--color-exito-oscuro-4) !important }
.borde-info { border-color: var(--color-info) !important }
.borde-info-claro { border-color: var(--color-info-claro-1) !important }
.borde-info-oscuro { border-color: var(--color-info-oscuro-4) !important }
.borde-error { border-color: var(--color-error) !important }
.borde-error-claro { border-color: var(--color-error-claro-1) !important }
.borde-error-oscuro { border-color: var(--color-error-oscuro-4) !important }
.borde-advertencia { border-color: var(--color-advertencia) !important }
.borde-advertencia-claro { border-color: var(--color-advertencia-claro-1) !important }
.borde-advertencia-oscuro { border-color: var(--color-advertencia-oscuro-4) !important }

.borde-gris-50 { border-color: var(--color-gris-50) !important }
.borde-gris-100 { border-color: var(--color-gris-100) !important }
.borde-gris-200 { border-color: var(--color-gris-200) !important }
.borde-gris-300 { border-color: var(--color-gris-300) !important }
.borde-gris-400 { border-color: var(--color-gris-400) !important }
.borde-gris-500 { border-color: var(--color-gris-500) !important }
.borde-gris-600 { border-color: var(--color-gris-600) !important }
.borde-gris-700 { border-color: var(--color-gris-700) !important }
.borde-gris-800 { border-color: var(--color-gris-800) !important }
.borde-gris-900 { border-color: var(--color-gris-900) !important }

/*Alertas*/
.alerta-exito { background-color: var(--color-exito-claro-1); border-width: 1px; border-style:solid }
.alerta-info { background-color:   var(--color-info-claro-1); border-width: 1px; border-style:solid }
.alerta-error { background-color: var(--color-error-claro-1); border-width: 1px; border-style:solid }
.alerta-advertencia { background-color: var(--color-advertencia-claro-1); border-width: 1px; border-style:solid }


.linea-azul {height: 5px; width: 80px; display: inline-block; background-color: #016fb3}
.linea-roja {height: 5px; width: 90px; display: inline-block; background-color: #fc072f}


/*--------------------------------------------------------------
#  contraste 
--------------------------------------------------------------*/
.a11y-contrast body {color: #eee; background-color: #000;}

.a11y-contrast main p,
.a11y-contrast main ul li,
.a11y-contrast main ol li  {color: #ffffff}

.a11y-contrast header.bg-claro nav.navbar .navbar-toggler-icon, 
.a11y-contrast header.bg-claro nav.navbar.navbar-dark .navbar-toggler-icon,
.a11y-contrast header.bg-claro nav.navbar.navbar-light .navbar-toggler-icon,
.a11y-contrast header.bg-terciario nav.navbar .navbar-toggler-icon, 
.a11y-contrast header.bg-terciario nav.navbar.navbar-dark .navbar-toggler-icon,
.a11y-contrast header.bg-terciario nav.navbar.navbar-light .navbar-toggler-icon {background-image: url(../img/menu-claro.svg);}

.a11y-contrast header.bg-claro,
.a11y-contrast header.bg-terciario,
.a11y-contrast footer,

.a11y-contrast .bg-primario,
.a11y-contrast .bg-primario2,
.a11y-contrast .bg-primario3,
.a11y-contrast .bg-celeste,
.a11y-contrast .bg-secundario,
.a11y-contrast .bg-secundario2,
.a11y-contrast .bg-secundario3,
.a11y-contrast .bg-rojo1,
.a11y-contrast .bg-rojo2,
.a11y-contrast .bg-terciario,
.a11y-contrast .bg-violeta,
.a11y-contrast .bg-naranjo1,
.a11y-contrast .bg-naranjo2,
.a11y-contrast .bg-naranjo3,
.a11y-contrast .bg-verde1,
.a11y-contrast .bg-verde2,
.a11y-contrast .bg-gris1,
.a11y-contrast .bg-gris2,
.a11y-contrast .bg-gris3,
.a11y-contrast .bg-gris4,
.a11y-contrast .bg-gris5,
.a11y-contrast .bg-gris6,
.a11y-contrast .bg-gris7,
.a11y-contrast .bg-plata,
.a11y-contrast .bg-claro,
.a11y-contrast .bg-oscuro {background-color: #000 !important; }

.a11y-contrast .alerta-error,
.a11y-contrast .alerta-advertencia,
.a11y-contrast .alerta-exito,
.a11y-contrast .alerta-info,
.a11y-contrast .alerta-claro {background-color: #000 !important; border-color: #FCFF3C !important}


.a11y-contrast h1, .a11y-contrast .h1,
.a11y-contrast h2, .a11y-contrast .h2,
.a11y-contrast h3, .a11y-contrast .h3,
.a11y-contrast h4, .a11y-contrast .h4,
.a11y-contrast h5, .a11y-contrast .h5,
.a11y-contrast h6, .a11y-contrast .h6,

.a11y-contrast .text-primario,
.a11y-contrast .text-primario2,
.a11y-contrast .text-primario3,
.a11y-contrast .text-celeste,
.a11y-contrast .text-secundario,
.a11y-contrast .text-secundario2,
.a11y-contrast .text-secundario3,
.a11y-contrast .text-rojo1,
.a11y-contrast .text-rojo2,
.a11y-contrast .text-terciario,
.a11y-contrast .text-violeta,
.a11y-contrast .text-naranjo1,
.a11y-contrast .text-naranjo2,
.a11y-contrast .text-naranjo3,
.a11y-contrast .text-verde1,
.a11y-contrast .text-verde2,
.a11y-contrast .text-gris1,
.a11y-contrast .text-gris2,
.a11y-contrast .text-gris3,
.a11y-contrast .text-gris4,
.a11y-contrast .text-gris5,
.a11y-contrast .text-gris6,
.a11y-contrast .text-gris7,
.a11y-contrast .text-plata,
.a11y-contrast .text-error,
.a11y-contrast .text-advertencia,
.a11y-contrast .text-exito,
.a11y-contrast .text-info,
.a11y-contrast .text-claro,
.a11y-contrast .text-oscuro,
.a11y-contrast .text-titulo,
.a11y-contrast .text-subtitulo,
.a11y-contrast .text-enlace {color: #fff}

.a11y-contrast .boton-primario,
.a11y-contrast .boton-secundario,
.a11y-contrast .boton-terciario ,
.a11y-contrast .boton-terciario-invert,
.a11y-contrast .boton-link,
.a11y-contrast .boton-curvo,
.a11y-contrast .boton-vermas,
.a11y-contrast .boton-vermas,
.a11y-contrast .boton-error,
.a11y-contrast .boton-advertencia,
.a11y-contrast .boton-exito,
.a11y-contrast .boton-info,
.a11y-contrast .boton-claro,
.a11y-contrast .boton-oscuro  {background-color: #29EDFF; color: #000}

.a11y-contrast .boton-primario:hover,
.a11y-contrast .boton-secundario:hover,
.a11y-contrast .boton-terciario :hover,
.a11y-contrast .boton-terciario-invert:hover,
.a11y-contrast .boton-link:hover,
.a11y-contrast .boton-curvo:hover,
.a11y-contrast .boton-vermas:hover,
.a11y-contrast .boton-vermas:hover,
.a11y-contrast .boton-error:hover,
.a11y-contrast .boton-advertencia:hover,
.a11y-contrast .boton-exito:hover,
.a11y-contrast .boton-info:hover,
.a11y-contrast .boton-claro:hover,
.a11y-contrast .boton-oscuro:hover  {background-color: #FCFF3C; color: #000}

.a11y-contrast .toolbar .toolbar-btn:hover {background-color: #000; border-color: #FCFF3C;}
.a11y-contrast .toolbar .toolbar-btn:hover .cl::before {color: #FCFF3C}

.a11y-contrast a,
.a11y-contrast header a  {color: #FCFF3C}

.a11y-contrast table,
.a11y-contrast .card {background-color: #000 ; color: #fff}
.a11y-contrast .table-hover tbody tr:hover {background-color: #333 ; color: #fff}

.a11y-contrast ol li span {color: #ffffff !important}

.a11y-contrast .form-control,
.a11y-contrast select,
.a11y-contrast .custom-select,
.a11y-contrast .form-control input::placeholder {background-color: #fff; color: #333333 }

.a11y-contrast #casos {background-image: none !important}