/*
Title: Framework Midesof
Autor: Ministerio de Desarrollo Social y Familia - División de Información Social 
Year: 2024 - 2026
Version 3.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: #FFFAF2;
--color-advertencia-claro-2: #FFECD0;
--color-advertencia-claro-3: #FFDAA8;
--color-advertencia-claro-4: #FFC978;
--color-advertencia-claro-5: #FFB13F;
--color-advertencia: #FA9B13;
--color-advertencia-oscuro-1: #F28700;
--color-advertencia-oscuro-2: #E07003;
--color-advertencia-oscuro-3: #C95E05;
--color-advertencia-oscuro-4: #A94E06;
--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-cualitativa-1: #FA4D56;
--color-grafico-cualitativa-2: #6929C4;
--color-grafico-cualitativa-3: #198038;
--color-grafico-cualitativa-4: #009D9A;
--color-grafico-cualitativa-5: #000070;
--color-grafico-cualitativa-6: #D3354F;
--color-grafico-cualitativa-7: #FAE250;
--color-grafico-cualitativa-8: #C9EE63;
--color-grafico-cualitativa-9: #61B258;
--color-grafico-cualitativa-10: #70D1F0;
--color-grafico-cualitativa-11: #4A62D1;
--color-grafico-cualitativa-12: #A56EFF;
--color-grafico-cualitativa-13: #DD45DF;
--color-grafico-cualitativa-14: #F1C0D3;
--color-grafico-cualitativa-15: #F9D9B6;
--color-grafico-cualitativa-16: #FEFACD;
--color-grafico-cualitativa-17: #BDFDC8;
--color-grafico-cualitativa-18: #D7BFFA;
--color-grafico-secuencial-1: #001141;
--color-grafico-secuencial-2: #001D6C;
--color-grafico-secuencial-3: #002D9C;
--color-grafico-secuencial-4: #0043CE;
--color-grafico-secuencial-5: #0F62FE;
--color-grafico-secuencial-6: #4589FF;
--color-grafico-secuencial-7: #78A9FF;
--color-grafico-secuencial-8: #A6C8FF;
--color-grafico-secuencial-9: #D0E2FF;
--color-grafico-secuencial-10: #EDF5FF;
--color-grafico-grupo-1:#000070;
--color-grafico-grupo-2:#6929C4;
--color-grafico-grupo-3:#009D9A;
--color-grafico-grupo-4:#D7BFFA;
--color-grafico-divergente-1:#294090;
--color-grafico-divergente-2:#3A6EAE;
--color-grafico-divergente-3:#5D9BC7;
--color-grafico-divergente-4:#88C3DC;
--color-grafico-divergente-5:#B9E1EE;
--color-grafico-divergente-6:#E8EAC5;
--color-grafico-divergente-7:#FFD581;
--color-grafico-divergente-8:#FFAA5C;
--color-grafico-divergente-9:#F97145;
--color-grafico-divergente-10:#DC2D2A;
--color-grafico-divergente-11:#9D0024;




}


/* 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: var(--color-primario-oscuro-4); !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: var(--color-blanco)!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: var(--color-negro)}
header.bg-claro .toolbar a {color: var(--color-gris-300)}
header.bg-claro .toolbar .nav a {color: var(--color-gris-300);}
header .toolbar .toolbar-behavior-read {width: 112px; display: flex; align-items: center; gap: 8px;}

header.bg-primario-oscuro nav.navbar .navbar-toggler-icon, 
header.bg-primario-oscuro nav.navbar.navbar-dark .navbar-toggler-icon,
header.bg-primario-oscuro nav.navbar.navbar-light .navbar-toggler-icon {background-image: url(../img/menu-claro.svg);}
header.bg-primario-oscuro a {color: var(--color-blanco);}

@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.25rem; 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.25rem; 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.25rem; 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-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 a, main a {color: var(--color-primario);}
p a:hover, main a:hover {color: var(--color-primario);}


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

/*Paddings*/

.p0 {padding: 0px !important}

.p4 {padding: 4px}
.p8 {padding: 8px}
.p16 {padding: 16px}
.p32 {padding: 32px}
.p48 {padding: 48px}
.p64 {padding: 64px}

.p4-top {padding-top: 4px}
.p8-top {padding-top: 8px}
.p16-top {padding-top: 16px}
.p32-top {padding-top: 32px}
.p48-top {padding-top: 48px}
.p64-top {padding-top: 64px}

.p4-bottom {padding-bottom: 4px}
.p8-bottom {padding-bottom: 8px}
.p16-bottom {padding-bottom: 16px}
.p32-bottom {padding-bottom: 32px}
.p48-bottom {padding-bottom: 48px}
.p64-bottom {padding-bottom: 64px}

.p4-left {padding-left: 4px}
.p8-left {padding-left: 8px}
.p16-left {padding-left: 16px}
.p32-left {padding-left: 32px}
.p48-left {padding-left: 48px}
.p64-left {padding-left: 64px}

.p4-right {padding-right: 4px}
.p8-right {padding-right: 8px}
.p16-right {padding-right: 16px}
.p32-right {padding-right: 32px}
.p48-right {padding-right: 48px}
.p64-right {padding-right: 64px}

.p4-x {padding-left: 4px; padding-right: 4px}
.p8-x {padding-left: 8px; padding-right: 8px}
.p16-x {padding-left: 16px; padding-right: 16px}
.p32-x {padding-left: 32px; padding-right: 32px}
.p48-x {padding-left: 48px; padding-right: 48px}
.p64-x {padding-left: 64px; padding-right: 64px}

.p4-y {padding-top: 4px; padding-bottom: 4px}
.p8-y {padding-top: 8px; padding-bottom: 8px}
.p16-y {padding-top: 16px; padding-bottom: 16px}
.p32-y {padding-top: 32px; padding-bottom: 32px}
.p48-y {padding-top: 48px; padding-bottom: 48px}
.p64-y {padding-top: 64px; padding-bottom: 64px}

/*Márgenes */

.m0 {margin: 0px !important}

.m4 {margin: 4px}
.m8 {margin: 8px}
.m16 {margin: 16px}
.m32 {margin: 32px}
.m48 {margin: 48px}
.m64 {margin: 64px}

.m4-top {margin-top: 4px}
.m8-top {margin-top: 8px}
.m16-top {margin-top: 16px}
.m32-top {margin-top: 32px}
.m48-top {margin-top: 48px}
.m64-top {margin-top: 64px}

.m4-bottom {margin-bottom: 4px}
.m8-bottom {margin-bottom: 8px}
.m16-bottom {margin-bottom: 16px}
.m32-bottom {margin-bottom: 32px}
.m48-bottom {margin-bottom: 48px}
.m64-bottom {margin-bottom: 64px}

.m4-left {margin-left: 4px}
.m8-left {margin-left: 8px}
.m16-left {margin-left: 16px}
.m32-left {margin-left: 32px}
.m48-left {margin-left: 48px}
.m64-left {margin-left: 64px}

.m4-right {margin-right: 4px}
.m8-right {margin-right: 8px}
.m16-right {margin-right: 16px}
.m32-right {margin-right: 32px}
.m48-right {margin-right: 48px}
.m64-right {margin-right: 64px}

.m4-x {margin-left: 4px; margin-right: 4px}
.m8-x {margin-left: 8px; margin-right: 8px}
.m16-x {margin-left: 16px; margin-right: 16px}
.m32-x {margin-left: 32px; margin-right: 32px}
.m48-x {margin-left: 48px; margin-right: 48px}
.m64-x {margin-left: 64px; margin-right: 64px}

.m4-y {margin-top: 4px; margin-bottom: 4px}
.m8-y {margin-top: 8px; margin-bottom: 8px}
.m16-y {margin-top: 16px; margin-bottom: 16px}
.m32-y {margin-top: 32px; margin-bottom: 32px}
.m48-y {margin-top: 48px; margin-bottom: 48px}
.m64-y {margin-top: 64px; margin-bottom: 64px}

/*Gaps*/
.gap8 {gap: 0.5em}
.gap16 {gap: 1em}
.gap32 {gap: 2em}
.gap48 {gap: 3em}
.gap64 {gap: 4em}


/*--------------------------------------------------------------
# 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;
  border-width: 1px; 
  border-style: solid;
  border-radius: 4px;
  font-size: 1em;
  text-decoration: none;
  padding: 8px 20px;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.boton span.material-symbols-outlined, .boton span.material-icons,
.tag span.material-symbols-outlined, .tag span.material-icons {vertical-align: middle; margin: 0px 4px; font-size: 1.3em;}

/*Básicos*/
.boton-primario {background-color: var(--color-primario);  color: var(--color-blanco);  border-color: var(--color-primario);}
.boton-primario:hover, .boton-primario:active { background-color: var(--color-primario-oscuro-2); color: var(--color-blanco);border-color: var(--color-primario-oscuro-2);border-width: 1px; border-style: solid;}

.boton-primario-error { background-color: var(--color-error); color: var(--color-blanco); border-color: var(--color-error);}
.boton-primario-error:hover , .boton-primario-error:active { background-color: var(--color-error-oscuro-3); color: var(--color-blanco);  border-color: var(--color-error-oscuro-3);}

.boton-secundario { background-color: var(--color-blanco); color: var(--color-primario-oscuro-1); border-color: var(--color-primario-oscuro-1); }
.boton-secundario:hover , .boton-secundario:active { background-color: var(--color-primario-claro-1); color: var(--color-primario-oscuro-2); border-color: var(--color-primario-oscuro-2);}

.boton-secundario-error { background-color: var(--color-blanco); color: var(--color-error-oscuro-1); border-color: var(--color-error-oscuro-1); }
.boton-secundario-error:hover , .boton-secundario-error:active { background-color: var(--color-error-claro-1); color: var(--color-error-oscuro-1); border-color: var(--color-primario-oscuro-2);}

.boton-link {padding: 0px; background-color: transparent; color: var(--color-primario); border-color: transparent; text-decoration: underline !important; }
.boton-link:hover , .boton-link:active { background-color: transparent; color: var(--color-primario-oscuro-1); border-color: transparent; text-decoration: underline !important;}

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


.boton-chip { display: inline-block; text-align: center; vertical-align: middle; padding: 8px; background-color: var(--color-blanco); color: var(--color-negro); border-color: var(--color-gris-200); }
.boton-chip:hover, .boton-chip:active  { background-color: var(--color-gris-50); color: var(--color-negro); border-color: var(--color-negro); }

.boton-chip-azul { background-color: var(--color-info-claro-2); color: var(--color-negro); border-color: var(--color-negro); }
.boton-chip-azul:hover, .boton-chip-azul:active  { background-color: var(--color-primario-claro-3); color: var(--color-negro); border-color: var(--color-negro); }

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

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


/*--------------------------------------------------------------
# Tags 
--------------------------------------------------------------*/

.tag {font-size: 0.9em ; font-weight: 700; padding: 0px 16px; display: inline-block; border-radius: 32px; background-color: var(--color-gris-50);} 
.tag.bg-error-claro .material-symbols-outlined, .tag.bg-error-claro .material-icons {color: var(--color-error);}
.tag.bg-exito-claro .material-symbols-outlined, .tag.bg-exito-claro .material-icons {color: var(--color-exito);}
.tag.bg-advertencia-claro .material-symbols-outlined, .tag.bg-advertencia-claro .material-icons {color: var(--color-advertencia);}
.tag.bg-info-claro .material-symbols-outlined, .tag.bg-info-claro .material-icons {color: var(--color-info);}
.tag.bg-negro-claro .material-symbols-outlined, .tag.bg-negro-claro .material-icons {color: var(--color-negro);}

.punto {width: 10px; height: 10px; display: inline-block; border-radius: 10px; margin-right: 8px}



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

.card {display: block ;border-width: 1px; border-color: var(--color-gris-200) ; border-style: solid; margin-bottom: 2em; border-radius: 8px}
.card-body {padding: 16px;}
.card-title {margin-bottom: 8px }
.card-imagen {}

.card.card-boton:hover {background-color: var(--color-gris-50); !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, .card.card-boton-icon .material-icons {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 .material-icons, .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, .card.card-boton .material-icons {font-size: 1rem}

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

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

/*Tab horizontal*/
.nav-tabs .nav-item {color: var(--color-negro) !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: var(--color-negro) ;
  font-weight: normal !important;
}

/*Tab vertical*/
.nav-tabs .nav-link {color: var(--color-negro) ;}
.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;
}

/*--------------------------------------------------------------
# Acordeon
--------------------------------------------------------------*/

.accordion .accordion-item {border: 0px; border-bottom: 1px solid #ccc;}
.accordion .accordion-item .accordion-header > button {padding-top: 16px; padding-bottom: 16px}
.accordion-button:not(.collapsed) {background-color: transparent !important;}
.accordion .accordion-collapse {padding-bottom: 32px}


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

.offcanvas.menu {width: 100%}

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

.snackbar {border-width: 1px; border-style: solid; ; border-radius: 8px; padding:16px; display: flex;}

.accordion.notificacion ,
.accordion.notificacion .accordion-header{border-radius: 8px; border-color: var(--color-gris-200) !important;}
.accordion.notificacion .accordion-item {border: 0px !important; border-radius: 8px} 
.accordion.notificacion .accordion-button  {background: transparent;}
.accordion.notificacion .accordion-button .tag,
.accordion.notificacion .accordion-button p {padding: 0px ;  margin-bottom: 8px; background-color: var(--color-blanco);} 
 

/*--------------------------------------------------------------
# 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
--------------------------------------------------------------*/

.page-link {color: var(--color-primario);}

/*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 {margin: 0px}
.breadcrumb-item+.breadcrumb-item::before {content: "/" !important;}
.breadcrumb-item a {color: var(--color-primario)}
.breadcrumb-item.active {font-weight: bold;}

/*Paginador*/
.pagination .page-link {color: var(--color-negro);}
.pagination .active>.page-link, .page-link.active {background: transparent; border-color: var(--color-primario); border-width: 1px; border-style: solid; color: var(--color-primario); }


/*--------------------------------------------------------------
# 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: var(--color-negro) !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-1) !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-50) !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: var(--color-primario-oscuro-4) !important;}
.bg-claro, .bg-blanco { background-color: var(--color-blanco) !important; color: var(--color-negro) !important}
.bg-oscuro, .bg-negro { background-color: var(--color-negro) !important; color: var(--color-blanco) !important}

.bg-icono { border-radius: 50%; height: fit-content ; width: fit-content; background-color: var(--color-info-claro-2);}

.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); color: var(--color-exito-oscuro-4) !important }
.alerta-info { background-color:   var(--color-info-claro-1); color: var(--color-info-oscuro-4) !important}
.alerta-error { background-color: var(--color-error-claro-1); color: var(--color-error-oscuro-4) !important}
.alerta-advertencia { background-color: var(--color-advertencia-claro-1); color: var(--color-advertencia-oscuro-4) !important}

/*Snackbars*/
.snackbar-exito { background-color: var(--color-exito) !important; color: var(--color-blanco) !important}
.snackbar-info { background-color: var(--color-info) !important; color: var(--color-blanco) !important}
.snackbar-error { background-color: var(--color-error) !important; color: var(--color-blanco) !important}
.snackbar-advertencia { background-color: var(--color-advertencia) !important; color: var(--color-blanco) !important}


/*--------------------------------------------------------------
#  Bordes 
--------------------------------------------------------------*/

.borde0 {border-width: 0px}
.borde1 {border-width: 1px; border-style:solid}
.borde2 {border-width: 2px; border-style:solid}
.borde3 {border-width: 3px; border-style:solid}
.borde4 {border-width: 3px; border-style:solid}

.bordecurvo0 {border-radius: 0px !important}
.bordecurvo1 {border-radius: 4px !important}
.bordecurvo2 {border-radius: 8px !important}
.bordecurvo3 {border-radius: 16px !important}
.bordecurvo4 {border-radius: 24px !important}

.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: var(--color-blanco);}

.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-primario-claro,
.a11y-contrast .bg-primario-oscuro,
.a11y-contrast .bg-exito,
.a11y-contrast .bg-exito-claro,
.a11y-contrast .bg-exito-oscuro,
.a11y-contrast .bg-info,
.a11y-contrast .bg-info-claro,
.a11y-contrast .bg-info-oscuro,
.a11y-contrast .bg-error,
.a11y-contrast .bg-error-claro,
.a11y-contrast .bg-error-oscuro,
.a11y-contrast .bg-advertencia,
.a11y-contrast .bg-advertencia-claro,
.a11y-contrast .bg-advertencia-oscuro,
.a11y-contrast .bg-gris-50,
.a11y-contrast .bg-gris-100,
.a11y-contrast .bg-gris-200,
.a11y-contrast .bg-gris-300,
.a11y-contrast .bg-gris-400,
.a11y-contrast .bg-gris-500,
.a11y-contrast .bg-gris-600,
.a11y-contrast .bg-gris-700,
.a11y-contrast .bg-gris-800,
.a11y-contrast .bg-gris-900,
.a11y-contrast .bg-terciario ,
.a11y-contrast .bg-claro, .a11y-contrast .bg-blanco,
.a11y-contrast .bg-oscuro, .a11y-contrast .bg-negro {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: var(--color-blanco) !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,
.a11y-contrast .nav-tabs .nav-link,
.a11y-contrast .breadcrumb-item.active  {color: var(--color-blanco);}

.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: #fff000; 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,
.a11y-contrast .nav-tabs[aria-orientation=vertical].der button.nav-link:hover,
.a11y-contrast .nav-tabs[aria-orientation=vertical].izq button.nav-link:hover   {background-color:  #fff000; color: #000;}

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

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

.a11y-contrast table,
.a11y-contrast .card {background-color: #000; color: #fff}
.a11y-contrast .table-hover tbody tr:hover {background-color: #000; color: var(--color-blanco) !important;}

.a11y-contrast ol li span {color: var(--color-blanco) !important}

.a11y-contrast .form-control,
.a11y-contrast select,
.a11y-contrast .custom-select,
.a11y-contrast .form-control input::placeholder {background-color: var(--color-blanco) !important; color: #000; }


