/* TEMA CLARO */
:root {
  --ui-bg-color: var(--color-slate-200);
  --ui-text-color: var(--color-slate-800);
  --scrollbar-bg: var(--color-slate-300);
  --scrollbar-color: var(--color-slate-400);
  --selection-bg: var(--color-turquesa-300);

  --ui-header-height: 50px;
  --ui-sidebar-width: 220px;

  /*=== Turquesa ===*/
  --color-turquesa-50: #eefffd;
  --color-turquesa-100: #c6fffb;
  --color-turquesa-200: #8efff8;
  --color-turquesa-300: #49f1ec;
  --color-turquesa-400: #15dfdf;
  --color-turquesa-500: #04c4c7;
  --color-turquesa-600: #009ea4;
  --color-turquesa-700: #027e83;
  --color-turquesa-800: #086267;
  --color-turquesa-900: #0c5155;
  --color-turquesa-950: #002f34;
}

/* TEMA OSCURO */

html[data-theme=dark] {
  --ui-bg-color: var(--color-slate-800);
  --ui-text-color: var(--color-slate-200);
  --scrollbar-bg: var(--color-slate-600);
  --scrollbar-color: var(--color-slate-400);
  --selection-bg: var(--color-turquesa-800);

  /* ApexChart */
  & .apexcharts-canvas {color: rgb(24, 24, 24);}
  
  & .apexcharts-yaxis-title > text,
  & .apexcharts-yaxis-texts-g > text,
  & .apexcharts-xaxis-texts-g > text {fill: white;}
}

/* ESTILOS GENERALES */
* {
  font-family: "Inter", sans-serif;
  /*font-optical-sizing: auto; font-style: normal;*/
  font-variation-settings: "wdth" 100;
}
*::selection{background-color: var(--selection-bg);}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter/UcCm3FwrK3iLTcvnUwQT9g.woff2') format('woff2');
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter/UcCo3FwrK3iLTcviYwY.woff2') format('woff2');
}

/* Tamaño pequeño - Celulares */
@media screen and (max-width: 576px) {
  html{font-size: 12px;}
}

html {
  font-size: 12.5px;
  height: 100%;
  line-height: 1.2;
}

body {
  background-color: var(--ui-bg-color);
  color: var(--ui-text-color);
}

html, body {
  min-height: 100dvh;
}

/* SCROLL BAR */
::-webkit-scrollbar{width: 6px; height: 6px;}
::-webkit-scrollbar-track{background: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb{background: var(--scrollbar-color);}

h1 { font-size: var(--tipography-4xl); /*margin-bottom: 0.5rem;*/ }
h2 { font-size: var(--tipography-3xl); /*margin-bottom: 0.5rem;*/ }
h3 { font-size: var(--tipography-2xl); /*margin-bottom: 0.5rem;*/ }
h4 { font-size: var(--tipography-xl); /*margin-bottom: 0.5rem;*/ }
h5 { font-size: var(--tipography-lg); /*margin-bottom: 0.5rem;*/ }
h6 { font-size: var(--tipography-base); /*margin-bottom: 0.5rem;*/ }

hr {margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); color: var(--ui-control-border-color);}

.bg-body {background-color: var(--ui-bg-color);}

.image-wallpaper {
  background: linear-gradient(to bottom, transparent 0%, var(--ui-bg-color) 100%);
}
html[data-theme=dark] .image-wallpaper {
  background: linear-gradient(to bottom, transparent 0%, var(--ui-bg-color) 100%);
}