/*--------------------------------------------------------------
# Toolbar Midesof 3.0
--------------------------------------------------------------*/
:root {
--color-amarillo-destacado: #fff000;
}

.toolbar {margin: 1em 0;}

.toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 38px;
}

.toolbar .toolbar-btn,
.toolbar.active .toolbar-btn.toolbar-toggler .toolbar-behavior-on {
    display: none;
    padding: 9.23px;
    text-decoration: none;
    vertical-align: top;
    background-color: transparent;
    border: 1.77px solid #a8b7c7;
    margin-right: 8px;
}

.toolbar .toolbar-btn:hover {background-color: #fff; color: var(--color-primario);}
.toolbar .toolbar-btn:hover .cl:before {color: #006FB3}

.toolbar .toolbar-behavior-read {width: 112px; padding: 6px 8px;}
.toolbar .toolbar-behavior-read > div {display: flex !important; align-items: center; gap: 8px;}

.toolbar .toolbar-btn.toolbar-toggler span {font-size: 22px}

.toolbar .toolbar-btn-icon-content {
  display: inline-block;
  height: $toolbar-button-size - ($toolbar-button-border-width * 2);
  padding: $toolbar-button-padding;
}

@media (min-width: 768px) {
    .toolbar .toolbar-btn, 
    .toolbar .toolbar-btn-group {
        display: inline-block;
    }
}

.toolbar .toolbar-btn .material-symbols-outlined {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

.toolbar .toolbar-btn.toolbar-toggler, 

.toolbar.active .toolbar-btn, 
.toolbar.active .toolbar-btn-group,
.toolbar.active .toolbar-btn.toolbar-toggler .toolbar-behavior-off {
    display: inline-block;
}

@media (min-width: 768px) {
  .toolbar .toolbar-btn.toolbar-toggler, 

  .toolbar.active .toolbar-btn.toolbar-toggler {
        display: none;
    }
}

.toolbar.toolbar-toggler .toolbar-behavior-on {
  display: block;
}

.toolbar .toolbar-btn.toolbar-toggler .toolbar-behavior-off {
    display: none;
    font-size: 16px;
    line-height: 16px;
    color: #a8b7c7;
    text-align: center;
}


/*--------------------------------------------------------------
#  CONTRASTE
--------------------------------------------------------------*/ 
.a11y-contrast {
    a.toolbar-behavior-contrast {background-color: #fff; color: #000 !important;}

    main p, 
    main ul li, 
    main ol li  {color: var(--color-blanco);}

    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, 
    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);}

    body,
    header.bg-claro, 
    header.bg-primario-oscuro, 
    footer, 
    .bg-primario, 
    .bg-primario-claro, 
    .bg-primario-oscuro, 
    .bg-exito, 
    .bg-exito-claro, 
    .bg-exito-oscuro, 
    .bg-info, 
    .bg-info-claro, 
    .bg-info-oscuro, 
    .bg-error, 
    .bg-error-claro, 
    .bg-error-oscuro, 
    .bg-advertencia, 
    .bg-advertencia-claro, 
    .bg-advertencia-oscuro, 
    .bg-gris-50, 
    .bg-gris-100, 
    .bg-gris-200, 
    .bg-gris-300, 
    .bg-gris-400, 
    .bg-gris-500, 
    .bg-gris-600, 
    .bg-gris-700, 
    .bg-gris-800, 
    .bg-gris-900, 
    .bg-terciario , 
    .bg-claro, 
    .bg-blanco, 
    .bg-oscuro, 
    .bg-negro,
    .collapse,
    .accordion {background-color: #000 !important; color: var(--color-blanco) !important; }
    .accordion-button::after {filter: brightness(100);}

    .alerta-error, 
    .alerta-advertencia, 
    .alerta-exito, 
    .alerta-info, 
    .alerta-claro,
    .modal-content,
    .offcanvas {background-color: #000 !important; border-color: var(--color-blanco) !important}

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
    .texto-blanco,
    .texto-negro,
    .texto-primario,
    .texto-primario-oscuro,
    .texto-primario-claro,
    .texto-exito,
    .texto-exito-oscuro,
    .texto-exito-claro,
    .texto-info,
    .texto-info-oscuro,
    .texto-info-claro,
    .texto-error,
    .texto-error-oscuro,
    .texto-error-claro,
    .texto-advertencia,
    .texto-advertencia-oscuro,
    .texto-advertencia-claro,
    .texto-gris-50,
    .texto-gris-100,
    .texto-gris-200,
    .texto-gris-300,
    .texto-gris-400,
    .texto-gris-500,
    .texto-gris-600,
    .texto-gris-700,
    .texto-gris-800,
    .texto-gris-900,
    .text-titulo,
    .text-subtitulo, 
    .text-enlace,
    .nav-tabs .nav-link, 
    .breadcrumb-item.active  {color: var(--color-blanco) !important;}

    .boton-primario, 
    .boton-secundario, 
    .boton-terciario , 
    .boton-terciario-invert, 
    .boton-link, 
    .boton-curvo, 
    .boton-vermas, 
    .boton-vermas, 
    .boton-error, 
    .boton-advertencia, 
    .boton-exito, 
    .boton-info, 
    .boton-claro, 
    .boton-oscuro {background-color: var(--color-amarillo-destacado) !important; !important; color: var(--color-negro) !important;}

    .boton-primario:hover, 
    .boton-secundario:hover, 
    .boton-terciario :hover, 
    .boton-terciario-invert:hover, 
    .boton-link:hover, 
    .boton-curvo:hover, 
    .boton-vermas:hover, 
    .boton-vermas:hover, 
    .boton-error:hover, 
    .boton-advertencia:hover, 
    .boton-exito:hover, 
    .boton-info:hover, 
    .boton-claro:hover, 
    .boton-oscuro:hover, 
    .nav-tabs[aria-orientation=vertical].der button.nav-link:hover, 
    .nav-tabs[aria-orientation=vertical].izq button.nav-link:hover {background-color:  var(--color-amarillo-destacado) !important;; color: var(--color-negro) !important;}

    .nav-tabs[aria-orientation=vertical].izq .nav-item.show .nav-link, 
    .nav-tabs[aria-orientation=vertical].izq .nav-link.active,
    .nav-tabs[aria-orientation=vertical].der .nav-item.show .nav-link, 
    .nav-tabs[aria-orientation=vertical].der .nav-link.active {border-color: var(--color-amarillo-destacado) !important;}

    .toolbar .toolbar-btn:hover,
    .accordion .accordion-item .accordion-header > button   {background-color: var(--color-negro) !important; border-color:  var(--color-amarillo-destacado) !important;;} 

    .toolbar .toolbar-btn:hover .cl::before,
    .accordion .accordion-item .accordion-header > button ,
    .nav-tabs[aria-orientation=vertical].izq .nav-link.active,
    .nav-tabs[aria-orientation=vertical].der .nav-link.active {color:  var(--color-amarillo-destacado) !important;}

    a, 
    header a  {color:  var(--color-amarillo-destacado) !important;}
    table, 
    .card {background-color: var(--color-negro) !important; color: #fff} .table-hover tbody tr:hover {background-color: var(--color-negro) !important; color: var(--color-blanco) !important;}
    ol li span {color: var(--color-blanco) !important}
    .form-control, 
    select, 
    .custom-select, 
    .form-control input::placeholder {background-color: var(--color-blanco) !important; color: var(--color-negro) !important; }
}