@font-face {
    font-family: IMAGINATIO;
    src: url(../fonts/IMAGINATIO.woff);
}

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

:root {
    --blanco: #ffffff;
    --blanco-glass: #ffffff7c;
    --negro: #000;
    --principal: #8f8f8f;
    --secundario: #ffffff;
    --terciario: #cacaca;
    --cuarto: #818181;
    --font-titulos: "IMAGINATIO", Arial, sans-serif;
    --font-parrafos: "Montserrat Regular", Arial, sans-serif;

    /* Controlar Header/Footer Icons*/
    --components-icons:grayscale() contrast(10) invert(1);   /* Agregar Invert(1) para aclarar*/
    --components-color: #fff;
    --components-fondo: #000;
}

html {
  scrollbar-color: var(--principal) var(--components-fondo); /* color thumb, color track */
}

html::-webkit-scrollbar-track {
  background: var(--secundario);
  border: solid 2px black; 
}

body {
    background-color: var(--principal);
}

/* MARK:Header */

#header {
    fill: var(--components-color);
    color: var(--components-color);
    background-color: var(--components-fondo);
    stroke: var(--components-color);
}

#header .ham_menu span {
    background-color: var(--components-color);
}

#header h1 a {
    color: var(--components-color);
}

#header .user {
    fill: var(--components-color);
    filter: var(--components-icons);
}


/* MARK: Asides */

.aside-burger{
    color: var(--blanco);
    background-color: var(--components-fondo);
}

.aside-burger a:hover {
    background-color: var(--blanco);
}

.aside-account{
    background-color: var(--components-fondo);
}

.aside-account button {
    color: var(--blanco);
    background-color: var(--principal);
}

.aside-account button:hover {
    color: var(--principal);
    background-color: var(--blanco);
}

/* MARK: Paginaciones */


.pagination button {
    border-color: #ddd;
    border: 1px solid #ddd;
    background: white;
}

.pagination button:hover:not(:disabled) {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .page_number {
    border-color: #ddd;
    background: white;
    border-radius: 4px;
}

.pagination .page_number.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .page_number:hover:not(.active) {
    background: #e9ecef;
}

.page-info {
    color: #666;
}

/* MARK: Footer */

#footer {
    background-color: var(--components-fondo);
}

#footer, .footer-ext-info a {
    color: var(--components-color);
}

#footer .icon {
    fill: var(--components-color);
}

#footer img {
    filter: var(--components-icons);
}

/* MARK: Commons */

.titulos-enmarcado{
    background-color: var(--cuarto);
}

.lista-circle-row{
    background-color: var(--terciario);
}

.global-iconos {
    background-color: var(--blanco);
}

.global-iconos .icon {
    filter: brightness(0.0);
}