*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[data-theme="light"] {
  --background-body: #f5f5f5;
  --background-tarjetas: #ffffff;
  --background-nav: #212529;
  --texto-nav: #ffffff;
  --link-hover-color: #212529;
  --color-links: #0d6efd;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-border-color-translucent: rgba(35, 36, 38, 0.1);
  --bs-border-color: #ced4da;
  --backgroun-inputs: #ffffff;
  --bg-categorias: #e0e0e0;
  --color-categorias: #656565;
  ---bs-btn-bg: #212529;
}

[data-theme="dark"] {
  --background-body: #0d1117;
  --background-tarjetas: #19212c;
  --background-nav: #19212c;
  --texto-nav: #ffffff;
  --link-hover-color: #5b98f3;
  --color-links: #ffffff;
  --bs-body-color: #ffffff;
  --box-shadow: none;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  --bs-border-color: #19212c;
  --background-inputs: #0d1117;
  --bg-categorias: #323c43;
  --color-categorias: #ffffff;
  ---bs-btn-bg: #393e49;
}

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

/* ******* MENÚ SUPERIOR ******** */

.mi-nav {
  padding: 0.8rem;
  margin-bottom: 1rem;
}

#titulo-principal {
  padding: 0 10px 0 10px;
}

#titulo-principal,
#btn-balance,
#btn-categorias,
#btn-reportes {
  color: var(--texto-nav);
}

.mi-hover {
  border-radius: 5px;
}

.mi-hover:hover {
  background-color: #393e49;
}

.btn-modo {
  padding: 0.8rem 0.8rem;
  background-color: #b9c3d2;
  border-radius: 50px;
}

/* ***** ESTILOS GENERALES  DE TARJETAS ***** */
.color-texto {
  color: var(--color-texto);
}
.estilos-tarjetas {
  background-color: var(--background-tarjetas);
  border-color: var(--bs-border-color-translucent);
}

.estilos-sombras {
  box-shadow: var(--box-shadow);
}

.estilos-categorias {
  background-color: var(--background-body);
  color: var(--bs-body-color);
}
.link-categoria {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-links);
}
.link-categoria:hover {
  color: var(--link-hover-color);
}

.estilos-inputs {
  background-color: var(--background-inputs);
  border-color: var(--bs-border-color);
  color: var(--color-texto);
}

.tarjetas {
  padding: 3rem 0 4rem 0;
}

.titulos-tarjetas {
  margin-bottom: 3rem;
}

.btn-hover {
  background-color: var(---bs-btn-bg);
  color: var(--texto-nav);
}

.btn-hover:hover {
  background-color: #676b75;
  border-color: #676b75;
  color: var(--texto-nav);
}

/* ****** TARJETA-REPORTES ****** */

.contenedor-img {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.imagen-tarjeta {
  max-width: 500px;
  width: 100%;
  margin-bottom: 3rem;
}

.margen-section {
  margin-top: 5rem;
}

/* ******* TARJETA-CATEGORÍAS ******* */

.margen-titulos-tarjetas {
  margin-top: 3rem;
}

.nombres-categorias {
  font-size: 1rem;
  color: var(--color-categorias);
  background-color: var(--bg-categorias);
  padding: 2px 4px;
  border-radius: 3px;
}

.margen-derecho {
  margin-right: 1rem;
}

.contenedor {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.margen-filas {
  margin-bottom: 2rem;
}

/* ***** TARJETA-BALANCE ****** */

.alineacion-monto {
  text-align: end;
}

.margen-inferior {
  margin-bottom: 1rem;
}

/* ***** TARJETA-NUEVA OPERACIÓN****** */

.margen-superior {
  margin-top: 1rem;
}

/* ***** FOOTER****** */
footer {
  padding: 0 0 1rem 0;
}

.estilos-footer {
  color: var(--bs-body-color);
}

.estilos-footer:hover {
  color: grey;
}

.cero {
  margin: 0px;
  padding: 0px;
}

.creditos {
  font-size: var(--bs-navbar-brand-font-size);
}

.custom-footer {
  width: 100%;
}
@media (max-width: 765px) {
  #titulos-operaciones {
    display: none;
  }
  .fechas-operaciones {
    display: none;
  }
  .categorias-operaciones {
    text-align: right;
  }
  .monto-operaciones {
    text-align: start !important;
  }
  .alinear-btn {
    text-align: start;
  }
  .line-height-icon {
    line-height: 1.2em;
  }
}

@media (max-width: 432px) {
  .reportes-padding-responsive {
    padding: 0;
  }
  .footer-responsive {
    justify-content: center !important;
  }
}

@media (max-width: 307px) {
  .reportes-font-responsive {
    font-size: small;
  }
}
@media (max-width: 305px) {
  .nav-xs-responsive {
    flex-direction: column;
  }
  .centro {
    display: flex;

    justify-content: center;
  }
}