@import url("https://fonts.cdnfonts.com/css/euclid-circular-a");
* {
  margin: 0;
  padding: 0;
  font-family: "Euclid Circular A", sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  --blanco: #121212;
  --grisligero: #2f2f2f;
  --azul: #3d55f6;
  --azulselect: #2240b0;
  --verdelima: #8eda8f;
  --verdeselect: #8ddbff;
  --depselect: #02a762;
  --gris: #d9d9d9;
  --grishover: #bebebe;
  --negro: white;
  --negroA: #111827;
  --grisA: #1f2937;
  --grisClaroA: #9ca3af;
  --grisOscuro: #212121;
  --filtro: invert(0.5);
  --filtroselect: invert(0);
}

#Dashboard {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-areas: "nav nav " "section section" "aside main";
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: 0.09fr 0.1fr 1fr;
  gap: 0.5rem;
  justify-content: center;
  background: var(--grisligero);
  transition: background-color 0.7s ease-in-out;
}
#Dashboard nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  background-color: var(--blanco);
  padding: 1rem;
  align-items: center;
  gap: 2.5dvw;
  transition: background-color 0.7s ease-in-out;
}
#Dashboard nav .titulo {
  transition: transform 0.3s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard nav .titulo label {
  font-size: 1.5rem;
  font-weight: 1000;
  transition: color 0.7s ease-in-out;
}
#Dashboard nav .titulo label :first-child {
  color: var(--azul);
}
#Dashboard nav .titulo label :last-child {
  color: var(--verdelima);
}
#Dashboard nav .titulo:hover {
  transform: rotate3d(1, 0, 0, 360deg) scale(1.1);
}
#Dashboard nav menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#Dashboard nav menu .navoption {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  background: inherit;
  gap: 0.5dvw;
  transition: transform 0.3s ease-in-out;
}
#Dashboard nav menu .navoption label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gris);
  transition: transform 0.3s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard nav menu .navoption label:hover {
  color: var(--negro);
}
#Dashboard nav menu .navoption img {
  cursor: pointer;
  filter: hue-rotate(180deg) saturate(50%);
  width: 1.5rem;
}
#Dashboard nav menu .navoption:hover {
  transform: rotate3d(1, 0, 0, 30deg) scale(1.1);
}
#Dashboard nav .navright {
  display: flex;
  flex-direction: row;
  place-items: center;
  position: absolute;
  right: 1%;
}
#Dashboard nav .navright .navmode .theme {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
#Dashboard nav .navright .navmode .theme__toggle {
  z-index: 1;
}
#Dashboard nav .navright .navmode .theme__label, #Dashboard nav .navright .navmode .theme__toggle, #Dashboard nav .navright .navmode .theme__toggle-wrap {
  position: relative;
}
#Dashboard nav .navright .navmode .theme__toggle, #Dashboard nav .navright .navmode .theme__toggle:before {
  display: block;
}
#Dashboard nav .navright .navmode .theme__toggle {
  background-color: hsl(48, 90%, 85%);
  border-radius: 25%/50%;
  box-shadow: 0 0 0 0.125em var(--primaryT);
  padding: 0.25em;
  width: 5em;
  height: 2.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color var(--transDur) ease-in-out, box-shadow 0.15s ease-in-out, transform var(--transDur) ease-in-out;
}
#Dashboard nav .navright .navmode .theme__toggle:before {
  background-color: hsl(48, 90%, 55%);
  border-radius: 50%;
  content: "";
  width: 2em;
  height: 2em;
  transition: 0.3s;
}
#Dashboard nav .navright .navmode .theme__toggle:focus {
  box-shadow: 0 0 0 0.125em var(--primary);
  outline: transparent;
}
#Dashboard nav .navright .navmode .theme__toggle:checked {
  background-color: hsl(198, 90%, 15%);
}
#Dashboard nav .navright .navmode .theme__toggle:checked:before {
  transform: translateX(2.5em);
}
#Dashboard nav .navright .navmode .theme__toggle:checked:before {
  background-color: hsl(198, 90%, 55%);
}
@supports selector(:focus-visible) {
  #Dashboard nav .navright .navmode .theme__toggle:focus {
    box-shadow: 0 0 0 0.125em var(--primaryT);
  }
  #Dashboard nav .navright .navmode .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em var(--primary);
  }
}
#Dashboard nav .navright .navuser {
  display: flex;
  flex-direction: row;
  place-items: center;
  gap: 0.2rem;
}
#Dashboard nav .navright .navuser label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gris);
  transition: transform 0.3s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard nav .navright .navuser img {
  width: 3.5rem;
  -o-object-fit: fill;
     object-fit: fill;
  transition: transform 0.3s ease-in-out;
}
#Dashboard nav .navright .navuser :hover {
  transform: rotate3d(1, 0, 0, 45deg) scale(1.1);
}
#Dashboard section {
  grid-area: section;
  background-color: var(--grisligero);
  transition: background-color 0.7s ease-in-out;
  padding: 0.5dvw 1dvw;
  display: flex;
  flex-direction: row;
  gap: 2dvw;
  place-items: center;
}
#Dashboard section h1 {
  color: var(--gris);
  font-weight: 600;
  font-size: 1.4dvw;
  transition: color 0.7s ease-in-out, transform 0.2s ease-in-out;
}
#Dashboard section h1:hover {
  transform: translateY(-3px) scale(1.1);
}
#Dashboard section .filtrosbox {
  display: flex;
  flex-direction: column;
  gap: 0.5dvh;
  color: var(--gris);
}
#Dashboard section .filtrosbox label {
  font-weight: 500;
  font-size: 1dvw;
  transition: color 0.7s ease-in-out, transform 0.2s ease-in-out;
}
#Dashboard section .filtrosbox label:hover {
  transform: translateY(-4px);
}
#Dashboard section .filtrosbox select {
  width: 15dvw;
  border: none;
  border-radius: 3px;
  height: 3.5dvh;
  background-color: var(--grisOscuro);
  transition: color 0.7s ease-in-out, background-color 0.7s ease-in-out, transform 0.3s ease-in-out;
  color: var(--gris);
  outline: none;
  font-size: 0.8dvw;
  cursor: pointer;
}
#Dashboard section .filtrosbox select:hover {
  transform: scale(1.05);
}
#Dashboard aside {
  grid-area: aside;
  background-color: var(--blanco);
  border-radius: 10px;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.1fr 1fr;
  grid-template-areas: "label button" "lista lista";
  row-gap: 1.5rem;
  overflow: auto;
  transition: background-color 0.7s ease-in-out;
}
#Dashboard aside::-webkit-scrollbar {
  display: none;
}
#Dashboard aside h1 {
  grid-area: label;
  font-size: 1.5dvw;
  font-weight: 600;
  color: var(--gris);
  transition: translate 0.3s ease-in-out, color 0.7s ease-in-out;
  position: sticky;
}
#Dashboard aside h1:hover {
  translate: 0 -0.5rem;
}
#Dashboard aside button {
  grid-area: button;
  background: transparent;
  border: none;
  width: 2.5vw;
  justify-self: end;
  align-self: start;
  transition: all 0.1s ease;
}
#Dashboard aside button img {
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  transition: transform 0.3s ease-in-out;
}
#Dashboard aside button:active,
#Dashboard aside button :hover {
  transform: scale(1.1);
}
#Dashboard aside .deplista {
  grid-area: lista;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  place-self: start;
}
#Dashboard aside .deplista article {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  background: var(--grisligero);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.7s ease-in-out, transform 0.2s ease-in-out;
  padding: 1dvw;
  gap: 1dvw;
}
#Dashboard aside .deplista article div {
  display: flex;
  background: var(--grisOscuro);
  width: 2.5dvw;
  height: 2.5dvw;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  transition: background-color 0.7s ease-in-out, transform 0.2s ease-in-out;
}
#Dashboard aside .deplista article div img {
  width: 70%;
  -o-object-fit: fill;
     object-fit: fill;
  filter: var(--filtro);
  transition: filter 0.7s ease-in-out;
}
#Dashboard aside .deplista article label {
  color: var(--gris);
  width: 80%;
  font-size: 1dvw;
  font-weight: 500;
  transition: transform 0.3s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard aside .deplista article:hover {
  transform: scale(1.1, 1.1) rotateY(20deg);
  background: var(--azulselect);
}
#Dashboard aside .deplista article:hover label {
  color: var(--negro);
}
#Dashboard aside .deplista article:hover div {
  background: var(--verdeselect);
}
#Dashboard aside .deplista article:hover div img {
  filter: none;
}
#Dashboard aside .deplista .depselected {
  background: var(--depselect);
}
#Dashboard aside .deplista .depselected div {
  background: var(--verdelima);
}
#Dashboard aside .deplista .depselected div img {
  filter: var(--filtroselect);
}
#Dashboard aside .deplista .depselected label {
  color: var(--negro);
}
#Dashboard aside .deplista:hover > article:not(:hover) {
  transform: scale(0.9, 0.9);
}
#Dashboard main {
  grid-area: main;
  background-color: var(--blanco);
  border-radius: 10px;
  transition: background-color 0.7s ease-in-out;
  padding: 1.5rem 3rem;
  overflow: auto;
}
#Dashboard main::-webkit-scrollbar {
  display: none;
}
#Dashboard main .maintop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3dvh;
}
#Dashboard main .maintop h1 {
  font-size: 1.5dvw;
  font-weight: 600;
  color: var(--gris);
  transition: translate 0.3s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard main .maintop h1:hover {
  translate: 0 -0.5rem;
}
#Dashboard main .maintop button {
  background: transparent;
  border: none;
  width: 2.5vw;
  justify-self: end;
  align-self: start;
  transition: transform 0.3s ease-in-out;
}
#Dashboard main .maintop button img {
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  filter: var(--filtro);
  transition: transform 0.3s ease-in-out, filter 0.7s ease-in-out;
}
#Dashboard main .maintop button:active,
#Dashboard main .maintop button :hover {
  transform: scale(1.1);
}
#Dashboard main .maincards {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  gap: 2dvw;
}
#Dashboard main .maincards strong {
  color: var(--grisClaroA);
  transition: background-color 0.7s ease-in-out, transform 0.2s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard main .maincards .grafica {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  background: var(--grisligero);
  border-radius: 10px;
  transition: background-color 0.7s ease-in-out, transform 0.2s ease-in-out, color 0.7s ease-in-out;
  padding: 1dvw;
  color: var(--negro);
}
#Dashboard main .maincards .grafica strong {
  color: var(--gris);
}
#Dashboard main .maincards .grafica table {
  place-self: center;
}
#Dashboard main .maincards .grafica table tr:hover {
  background-color: var(--grishover);
}
#Dashboard main .maincards .grafica table tr td {
  font-size: 1dvw;
}
#Dashboard main .maincards .grafica table tr th {
  display: flex;
  flex-direction: column;
  font-size: 0.8dvw;
  font-weight: 350;
}
#Dashboard main .maincards .grafica table caption {
  color: var(--negro);
  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  font-weight: 500;
  margin-bottom: 3dvh;
  transition: color 0.7s ease-in-out;
}
#Dashboard main .maincards .grafica table .tooltip {
  pointer-events: none;
}
#Dashboard main .maincards .grafica table.column {
  --aspect-ratio: 21 / 7;
}
#Dashboard main .maincards .grafica table.bar {
  --aspect-ratio: 12/ 5;
}
#Dashboard main .maincards .grafica table.pie tbody {
  align-self: center;
  width: 60%;
}
#Dashboard main .maincards .grafica table .highlighted {
  animation: highlighted-bar 2s linear infinite;
}
#Dashboard main .maincards .grafica table.stacked {
  --color-1: rgba(0, 226, 124, 0.75);
  --color-2: rgba(79, 178, 133, 0.75);
  --color-3: rgb(60, 137, 109, 0.75);
  --color-4: rgb(49, 102, 83, 0.75);
  --color-5: rgb(44, 90, 67, 0.75);
  --color-6: rgb(30, 71, 51, 0.75);
  --color-7: rgb(20, 56, 38, 0.75);
  --aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
}
#Dashboard main .maincards .grafica table.stacked th {
  font-size: 1rem;
  font-weight: 400;
}
@keyframes highlighted-bar {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 1px 0 black, 0 0 20px 5px darkgrey;
  }
  100% {
    box-shadow: none;
  }
}
#Dashboard main .maincards .grafica ul {
  display: flex;
  justify-content: center;
  border: none;
  gap: 0.5dvw;
  transition: background-color 0.7s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard main .maincards .grafica ul li {
  font-size: clamp(0.7rem, 1vw, 1vw);
  font-weight: 300;
  color: var(--gris);
  transition: background-color 0.7s ease-in-out, color 0.7s ease-in-out;
}
#Dashboard main .maincards .grafica ul li::before {
  width: 1dvw;
  height: 1dvw;
  border-radius: 3px;
}
#Dashboard main .maincards .grafica ul.circleleg {
  padding-top: 0px;
}
#Dashboard main .maincards .grafica ul.circlelist {
  padding-bottom: 0px;
}
#Dashboard main .maincards .grafica .listotal {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  text-align: center;
}
#Dashboard main .maincards .grafica .listotal li {
  color: var(--gris);
  padding: 0.5dvw;
}
#Dashboard main .maingrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(470px, 1fr));
  gap: 1rem;
  align-items: center;
  background: transparent;
}
#Dashboard main .maingrid .grafica {
  background: var(--grisligero);
  border-radius: 10px;
  padding: 1dvw;
}
#Dashboard main .maingrid .grafica table {
  place-self: center;
}
#Dashboard main .maingrid .grafica table tr:hover {
  background-color: var(--grishover);
}
#Dashboard main .maingrid .grafica table tr td {
  font-size: 0.8dvw;
}
#Dashboard main .maingrid .grafica table tr th {
  display: flex;
  flex-direction: column;
  font-size: 0.8dvw;
  font-weight: 350;
}
#Dashboard main .maingrid .grafica table caption {
  color: var(--negro);
  font-size: clamp(0.8rem, 1.2vw, 1.5rem);
  font-weight: 500;
  margin-bottom: 3dvh;
  transition: color 0.7s ease-in-out;
}
#Dashboard main .maingrid .grafica table .tooltip {
  pointer-events: none;
}
#Dashboard main .maingrid .grafica table.column {
  --aspect-ratio: 21 / 9;
}
#Dashboard main .maingrid .grafica table.bar {
  --aspect-ratio: 11 / 8;
}
#Dashboard main .maingrid .grafica table .highlighted {
  animation: highlighted-bar 2s linear infinite;
}
#Dashboard main .maingrid .grafica table.stacked {
  --aspect-ratio: 16 / 9;
}
#Dashboard main .maingrid .grafica table.stacked th {
  font-size: 1rem;
  font-weight: 400;
}
@keyframes highlighted-bar {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 1px 0 black, 0 0 20px 5px darkgrey;
  }
  100% {
    box-shadow: none;
  }
}
#Dashboard main .maingrid .grafica ul {
  gap: 0.3dvw;
}
#Dashboard main .maingrid .grafica ul li {
  font-size: clamp(0.5rem, 0.8vw, 0.8vw);
  font-weight: 300;
}
#Dashboard main .maingrid .grafica ul li::before {
  width: 0.9dvw;
  height: 0.9dvw;
  border-radius: 3px;
}
#Dashboard main .maingrid .grafica ul.circleleg {
  padding-top: 0px;
}
#Dashboard main .maingrid .grafica ul.circlelist {
  padding-bottom: 0px;
}
#Dashboard main .maingrid .grafica .listotal {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  text-align: center;
}
#Dashboard main .maingrid .grafica .listotal li {
  color: var(--gris);
  padding: 0.3dvw;
}

#perfil {
  position: fixed;
  top: 1%;
  right: 0.5%;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  gap: 10px;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 3;
  transition: background-color 0.7s ease-in-out;
  border: none;
  border-radius: 10px;
  background: var(--grisOscuro);
  color: var(--gris);
  text-align: center;
}
#perfil div {
  width: 7rem;
  transition: transform 0.3s ease;
}
#perfil div:hover {
  transform: scale(1.05);
}
#perfil div img {
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}
#perfil h2 {
  font-size: 1.2rem;
  font-weight: 500;
  transition: color 0.7s ease-in-out, transform 0.2s ease-in-out;
}
#perfil h2:hover {
  transform: scale(1.05);
}
#perfil label {
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.7s ease-in-out, transform 0.2s ease-in-out;
}
#perfil label .theme {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
#perfil label .theme__toggle {
  z-index: 1;
}
#perfil label .theme__label, #perfil label .theme__toggle, #perfil label .theme__toggle-wrap {
  position: relative;
}
#perfil label .theme__toggle, #perfil label .theme__toggle:before {
  display: block;
}
#perfil label .theme__toggle {
  background-color: hsl(48, 90%, 85%);
  border-radius: 25%/50%;
  box-shadow: 0 0 0 0.125em var(--primaryT);
  padding: 0.25em;
  width: 5em;
  height: 2.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color var(--transDur) ease-in-out, box-shadow 0.15s ease-in-out, transform var(--transDur) ease-in-out;
}
#perfil label .theme__toggle:before {
  background-color: hsl(48, 90%, 55%);
  border-radius: 50%;
  content: "";
  width: 2em;
  height: 2em;
  transition: 0.3s;
}
#perfil label .theme__toggle:focus {
  box-shadow: 0 0 0 0.125em var(--primary);
  outline: transparent;
}
#perfil label .theme__toggle:checked {
  background-color: hsl(198, 90%, 15%);
}
#perfil label .theme__toggle:checked:before {
  transform: translateX(2.5em);
}
#perfil label .theme__toggle:checked:before {
  background-color: hsl(198, 90%, 55%);
}
@supports selector(:focus-visible) {
  #perfil label .theme__toggle:focus {
    box-shadow: 0 0 0 0.125em var(--primaryT);
  }
  #perfil label .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em var(--primary);
  }
}

#toastnotf {
  position: fixed;
  bottom: 1%;
  right: 1%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  height: -moz-max-content;
  height: max-content;
  z-index: 3;
  transition: background-color 0.7s ease-in-out;
}
#toastnotf dialog {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem;
  width: -moz-max-content;
  width: max-content;
  height: -moz-fit-content;
  height: fit-content;
  background: var(--negroA);
  border: none;
  border-radius: 10px;
  animation: aparecer 1s ease;
}
#toastnotf dialog figure {
  display: flex;
  background: var(--grisA);
  width: 3rem;
  height: 3rem;
  justify-content: center;
  border-radius: 5px;
}
#toastnotf dialog figure img {
  width: 80%;
  -o-object-fit: fill;
     object-fit: fill;
}
#toastnotf dialog summary {
  margin-left: 1rem;
}
#toastnotf dialog summary h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--negro);
}
#toastnotf dialog summary label {
  font-size: 0.8rem;
  color: var(--grisClaroA);
}

#Cargando {
  position: fixed;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(20rem, 30vw, 30rem);
  opacity: 0;
}

@keyframes aparecer {
  0% {
    pointer-events: all;
    opacity: 0;
    transform: rotate3d(2, -1, -1, -0.2turn);
  }
  100% {
    opacity: 1;
    transform: rotate3d(0);
  }
}
@keyframes desaparecer {
  0% {
    opacity: 1;
    transform: rotate3d(0);
  }
  100% {
    opacity: 0;
    transform: rotate3d(-2, 1, 1, 0.3turn);
    pointer-events: none;
  }
}
@keyframes aparecerTargeta {
  0% {
    pointer-events: all;
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes desaparecerTargeta {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    pointer-events: none;
  }
}
@keyframes iniciocargando {
  0% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes terminocargando {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@media (max-width: 850px) {
  #Dashboard {
    grid-template-areas: "nav nav" "section section" "aside aside" "main main";
    grid-template-columns: 1fr;
    grid-template-rows: 0.08fr 0.1fr 0.1fr 1fr;
  }
  #Dashboard nav {
    height: -moz-fit-content;
    height: fit-content;
  }
  #Dashboard nav label {
    font-size: 1.3rem;
    font-weight: 1000;
  }
  #Dashboard nav label :first-child {
    color: var(--azul);
  }
  #Dashboard nav label :last-child {
    color: var(--verdelima);
  }
  #Dashboard nav menu {
    gap: 0.7rem;
  }
  #Dashboard nav menu .navoption {
    flex-direction: column;
  }
  #Dashboard nav menu .navoption img {
    width: 1.2rem;
  }
  #Dashboard nav menu .navoption label {
    font-size: clamp(0.5rem, 1vw, 1rem);
  }
  #Dashboard nav .navright {
    gap: 0.3rem;
  }
  #Dashboard nav .navright .navmode {
    display: none;
  }
  #Dashboard nav .navright .navuser label {
    display: none;
  }
  #Dashboard nav .navright .navuser img {
    width: 3rem;
    -o-object-fit: fill;
       object-fit: fill;
  }
  #Dashboard section {
    padding: 0.5dvw 1dvw;
    gap: 2dvw;
  }
  #Dashboard section h1 {
    font-weight: 600;
    font-size: 0.8rem;
    margin-right: 3dvw;
  }
  #Dashboard section .filtrosbox label {
    font-weight: 500;
    font-size: 0.6rem;
  }
  #Dashboard section .filtrosbox select {
    font-size: 0.5rem;
  }
  #Dashboard aside {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    height: -moz-max-content;
    height: max-content;
    row-gap: 0.5rem;
  }
  #Dashboard aside h1 {
    font-size: 0.8rem;
    place-self: center;
    left: 50%;
    transform: translateX(-50%);
  }
  #Dashboard aside h1:hover {
    translate: 0 -0.3rem;
  }
  #Dashboard aside button {
    display: none;
  }
  #Dashboard aside button img {
    width: 100%;
    -o-object-fit: fill;
       object-fit: fill;
    transition: transform 0.3s ease-in-out;
  }
  #Dashboard aside button:active {
    transform: scale(1.1);
  }
  #Dashboard aside .deplista {
    flex-direction: row !important;
    gap: 0.8rem;
  }
  #Dashboard aside .deplista article {
    width: -moz-max-content;
    width: max-content;
    height: 4dvh;
    padding: 0.5rem;
    gap: 1dvw;
    white-space: nowrap;
  }
  #Dashboard aside .deplista article div {
    width: 2dvh;
    height: 2dvh;
  }
  #Dashboard aside .deplista article div img {
    width: 70%;
    -o-object-fit: fill;
       object-fit: fill;
  }
  #Dashboard aside .deplista article label {
    font-size: clamp(0.5rem, 0.7vw, 0.7rem);
  }
  #Dashboard main {
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 0px;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    padding: 2rem 3dvw;
  }
  #Dashboard main .maintop {
    margin-bottom: 3dvh;
    justify-content: center;
  }
  #Dashboard main .maintop h1 {
    font-size: 1rem;
  }
  #Dashboard main .maintop button {
    display: none;
  }
  #Dashboard main .maincards {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    gap: 2dvw;
  }
  #Dashboard main .maincards strong {
    font-size: 0.7rem;
  }
  #Dashboard main .maincards .grafica {
    height: -moz-max-content;
    height: max-content;
    padding: 1dvw;
  }
  #Dashboard main .maincards .grafica strong {
    font-size: 2dvw;
  }
  #Dashboard main .maincards .grafica table {
    place-self: center;
  }
  #Dashboard main .maincards .grafica table caption {
    font-size: 0.9rem;
  }
  #Dashboard main .maincards .grafica table tr th {
    font-size: 0.6rem;
  }
  #Dashboard main .maincards .grafica table tr td {
    font-size: 2dvw;
  }
  #Dashboard main .maincards .grafica table.column {
    --aspect-ratio: 21 / 7;
  }
  #Dashboard main .maincards .grafica table.column tbody td {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    box-shadow: none;
  }
  #Dashboard main .maincards .grafica table.stacked {
    --aspect-ratio: 16 / 9;
  }
  #Dashboard main .maincards .grafica table.stacked th {
    font-size: 0.8rem;
    font-weight: 400;
  }
  #Dashboard main .maincards .grafica table .highlighted {
    animation: highlighted-bar 2s linear infinite;
  }
  @keyframes highlighted-bar {
    0% {
      box-shadow: none;
    }
    50% {
      box-shadow: 0 0 1px 0 black, 0 0 20px 5px darkgrey;
    }
    100% {
      box-shadow: none;
    }
  }
  #Dashboard main .maincards .grafica ul {
    margin-top: 1rem;
  }
  #Dashboard main .maincards .grafica ul li {
    font-size: clamp(2dvw, 2vw, 3vw);
  }
  #Dashboard main .maincards .grafica ul li::before {
    width: 0.8rem;
    height: 0.8rem;
  }
  #Dashboard main .maincards .grafica .legend {
    display: none;
  }
  #Dashboard main .maincards .grafica .legend.circleleg {
    display: flex !important;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  #Dashboard main .maincards .grafica .legend.circlelist {
    display: flex !important;
    padding-bottom: 0px;
    margin-top: 0px;
  }
  #Dashboard main .maingrid {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    gap: 2dvw;
  }
  #toastnotf {
    height: -moz-max-content;
    height: max-content;
  }
  #toastnotf dialog {
    padding: 0.5rem;
    width: -moz-max-content;
    width: max-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  #toastnotf dialog figure {
    width: 2rem;
    height: 2rem;
  }
  #toastnotf dialog figure img {
    width: 80%;
    -o-object-fit: fill;
       object-fit: fill;
  }
  #toastnotf dialog summary {
    margin-left: 0.5rem;
  }
  #toastnotf dialog summary h3 {
    font-size: 0.7rem;
  }
  #toastnotf dialog summary label {
    font-size: 0.6rem;
  }
  #perfil {
    position: fixed;
    top: 1%;
    right: 0.5%;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 10px;
    height: -moz-fit-content;
    height: fit-content;
    z-index: 3;
    transition: background-color 0.7s ease-in-out;
    border: none;
    border-radius: 10px;
    background: var(--grisOscuro);
    color: var(--gris);
    text-align: center;
  }
  #perfil div {
    width: 5rem;
  }
  #perfil div img {
    width: 100%;
    -o-object-fit: fill;
       object-fit: fill;
  }
}
@keyframes RevelarSeccion {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
[transition-style=RevelarSeccion] {
  animation: 4s cubic-bezier(0.25, 1, 0.3, 1) RevelarSeccion;
}

@keyframes wipe-in-down {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:down"] {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) wipe-in-down;
}

@keyframes wipe-in-right {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:right"] {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) wipe-in-right;
}

@keyframes wipe-in-left {
  from {
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
[transition-style="in:wipe:left"] {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) wipe-in-left;
}/*# sourceMappingURL=Dashboard.css.map */