:root {
    --negro: black;
    --blanco: white;
    --blanco-trans: #ffffff8f;
    --verde: #55EA4A;
    --rojo: #D43900;
    --morado:#8A61DD;
    --azul-claro:#CBF0FF;
    --color-inactivo: #EA574A;
    --gris-claro: #f3f3f3; /*#ECF2F6*/
    --gris-trans: #f3f3f3e3;
    --gris-medio: #EAEAEA;
    --gris-medio-mas: #C4C4C4;
    --negro-claro:#232527;
    --logo: #FEEDCC;
}

/* ----------------------------------------------------------------------------- */
html, .enlace, .main, .dia,.fecha, .footer, .footer a{
    color: var(--negro) !important
}
.calendario_hoy, .texto_error{
    color: var(--rojo) !important
}
.tab_unselect, .facebook, .instagram{
    color: var(--blanco) !important
}
a:link, a:visited, a:hover, button, header,  .button, .popup_title, .titulo, .cancelado, .button_grey_100x, .scrollup, .scrolldown, .cookie_popup{
    color: var(--blanco);
}
.tabs-header label {
    color: var(--blanco) !important;
}
.imagenes-amigos .complemento{
    color: var(--blanco);
}
.fa-solid{
    color: var(--color-tema-oscuro);
}
.close_button_100x, .button_100x{
    color: var(--gris-claro);
}
.popup, .popup-user, .texto_estado_evento, .list_event_today, .intro{
    color: var(--negro-claro);
}
.popup_info, .contenedor_sidenav{
    color: var(--color-tema-base);
}

/* Estilo cuando una pestaña está seleccionada */
#tab_info:checked ~ .tabs-header label[for="tab_info"],
#tab_users:checked ~ .tabs-header label[for="tab_users"],
#tab_cart:checked ~ .tabs-header label[for="tab_cart"],
#tab_check:checked ~ .tabs-header label[for="tab_check"],
#tab_taxi:checked ~ .tabs-header label[for="tab_taxi"]{
    color: var(--blanco);
}
/* ----------------------------------------------------------------------------- */
.footer{
    background-color: #bed8ff;
}
.logo, .menu-btn, .button_grey,  .button_grey_100x{
    background-color: var(--color-tema-base);
}
body, button, .sidenav{
    background-color: transparent;
}
header,.menu, .button, .button_100x, .btn-back, .btn-next, .popup_title, .cookie_popup, .scrollup, .scrolldown{
    background-color: var(--color-tema-oscuro);
}
.imagenes-amigos .complemento{
    background-color: var(--color-tema-oscuro);
}
.tabs-header label {
    background-color: var(--color-tema-oscuro);
}
 .separador-seccion,.titulo, .tabs-header{
    background-color: var(--color-tema-medio);
}
.button_group, .mensaje, .vacio{
    background-color:var(--gris-medio);
}
.base_calendar{
    background-color: rgba(255, 255, 255, .7);
}
.button_group{
    box-shadow: 0px 2px 2px var(--color-tema-oscuro);
}
.button_home{
    box-shadow: 0px 0px 0px 2px var(--color-tema-oscuro-trans);
}
.capa_translucent, .contenido-menu{
    background-color:var(--gris-trans);
}

.mensaje{
    box-shadow: 0px 0px 2px 1px var(--gris-medio-mas);
}
.popup, .contenedor-mensajes, .input-item, .scrollup, .scrolldown{
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
.menu-item{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dia_activo{
    background-color:var(--azul-claro);
}
/*damos prioridad*/
.pasado{
    background-color: var(--color-tema-base);
}
.pasado{
    border-color: var(--color-tema-base);
}

.rechazado{
    background-color: var(--rojo);
}
.hay_evento, .activo{
    background-color: var(--color-tema-oscuro);
}
.hay_evento, .activo{
    border-color: var(--color-tema-oscuro);
}
.cancelado{
    background-color: var(--negro-claro);
}
.completo{
    background-color: var(--morado);
}
.completo{
    border-color: var(--morado);
}

.intro::before {
    background-color: var(--gris-claro); /* Fondo con opacidad */
    opacity: 0.9;
}
/* Estilo cuando una pestaña está seleccionada */
#tab_info:checked ~ .tabs-header label[for="tab_info"],
#tab_users:checked ~ .tabs-header label[for="tab_users"],
#tab_cart:checked ~ .tabs-header label[for="tab_cart"],
#tab_check:checked ~ .tabs-header label[for="tab_check"],
#tab_taxi:checked ~ .tabs-header label[for="tab_taxi"]{
    background-color: var(--color-tema-medio);
}
.popup input[type="radio"]:checked + .tabs-header label:hover {
    background-color: var(--gris-medio);
}
th,.menu-btn-index, .form_title, .contenedor_sidenav,.button_home, .add_image{
    background-color: var(--gris-claro);
}
.close_button_100x, .alert, .button_del{
    background-color: var(--rojo);
}
.grupo_button{
    background-color: var(--verde);
}
.popup, .contenedor-mensajes, .form_elements_base, .form_title, .nombre-amigo{
    background-color: var(--blanco);
}
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
/*BOTONES SWITCH*/

/*base del botón*/
.switch-button .switch-button_label {
    background-color: var(--color-inactivo);
}
/*estilo del círculo*/
.switch-button .switch-button_label:before {
    background-color: var(--gris-medio);
    box-shadow: inset 0px 0px 0px 1px var(--gris-medio);
}
.switch-button .switch-button_checkbox:checked + .switch-button_label {
    background-color: var(--verde);
}
/* si el votón tiene la clase disabled*/
.switch-button .switch-button_checkbox:checked + .disabled {
    background-color: var(--gris-medio) !important;
}
.switch-button .switch-button_checkbox:checked + .switch-button_label.disabled:before {
    background-color: var(--gris-medio) !important;
    box-shadow: inset 0px 0px 0px 1px var(--gris-medio);
}
/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */
.tabs-header label{
    border-color: var(--gris-medio);
}
td{
    border-color: var(--gris-medio-mas);
}
.popup .form_elements_base, .popup-user .form_elements_base{
    border-color: var(--color-tema-base);
}
.button_home{
    border-color: var(--color-tema-oscuro-trans);
}
/* ----------------------------------------------------------------------------- */
th {
    border-bottom-color: var(--gris-claro);
}
.sidenav .user {
    border-bottom-color: var(--color-tema-oscuro);
}
.arrow-left, .arrow-right {
    border-bottom-color: transparent;  /* izquierda flecha */
    border-top-color: transparent; /* derecha flecha */
}
.arrow-left {
    border-right-color:var(--blanco); /* base flecha y color*/
  }
  .arrow-right {
    border-left-color: var(--blanco); /* base flecha y color*/
  }
  .titulo-imagen{
    border-left-color: var(--color-tema-oscuro);
  }  
/* ----------------------------------------------------------------------------- */
.cancelado-sombra{
    box-shadow: 0px 8px 2px var(--negro-claro);
}
.rechazado-sombra{
    box-shadow: 0px 8px 2px var(--rojo);
}
.pasado-sombra{
    box-shadow: 0px 8px 2px var(--color-tema-base);
}
.activo-sombra{
    box-shadow: 0px 8px 2px var(--color-tema-oscuro);
}
.completo-sombra{
    box-shadow: 0px 8px 2px var(--morado);
}



/*---------------------------------PAGINACIÓN------------------------------------*/
.b_pag_ant,.b_pag_sig,.b_pag_ultima {
	background-color:var(--color-tema-medio);
}
.pag_inicio,.pag_ant,.pag_activa,.pag_sig, .b_pag_ant,.b_pag_sig,.b_pag_ultima, .b_pag_inicio_des,.b_pag_ant_des,.pag_last,.b_pag_sig_des,.b_pag_ultima_des{
	border-color:var(--color-tema-oscuro);
}
.b_pag_inicio_des,.b_pag_ant_des,.pag_last,.b_pag_sig_des,.b_pag_ultima_des{
	color: var(--gris-claro);
}
.pag_activa{
	color: var(--color-tema-oscuro);
}
.tot_page{
    color: var(--negro-claro);
}