/* =========================================================
   HUB NAI
   GLOBAL
   MISMO ESTILO LOGIN / SIDEBAR / TOPBAR / FOOTER
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}


html,
body {
  width:
    100%;

  min-height:
    100%;

  margin:
    0;
}


html {
  background:
    #efefeb;
}


body {
  min-width:
    320px;

  font-family:
    "DM Sans",
    sans-serif;

  background:
    #efefeb;

  color:
    #151713;

  overflow-x:
    hidden;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


button,
input,
select,
textarea {
  font:
    inherit;
}


button {
  -webkit-tap-highlight-color:
    transparent;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


img {
  max-width:
    100%;

  display:
    block;
}


/* =========================================================
   APP
   ========================================================= */

#app {
  min-height:
    100vh;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;

  margin-left:
    var(--sidebar-width);

  background:
    #f4f4f1;

  transition:
    margin-left 220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.sidebar-collapsed
.app-shell {
  margin-left:
    var(--sidebar-width-collapsed);
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
  flex:
    1;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  position:
    relative;

  overflow:
    hidden;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.app-main::before {
  content:
    "";

  width:
    520px;

  height:
    520px;

  position:
    absolute;

  right:
    -320px;

  top:
    80px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      20,
      24,
      18,
      0.045
    );

  border-radius:
    45% 55% 63% 37% /
    40% 52% 48% 60%;

  animation:
    globalShapeOne
    24s
    ease-in-out
    infinite
    alternate;
}


.app-main::after {
  content:
    "";

  width:
    360px;

  height:
    360px;

  position:
    absolute;

  left:
    -250px;

  bottom:
    80px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      20,
      24,
      18,
      0.035
    );

  border-radius:
    62% 38% 45% 55% /
    45% 58% 42% 55%;

  animation:
    globalShapeTwo
    28s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   CONTENT
   ========================================================= */

.app-content {
  width:
    100%;

  max-width:
    1600px;

  flex:
    1;

  position:
    relative;

  z-index:
    2;

  margin:
    0 auto;

  padding:
    26px;
}


/* =========================================================
   GENERIC PAGE
   ========================================================= */

.generic-page {
  width:
    100%;

  animation:
    globalPageEnter
    360ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}


/* =========================================================
   GENERIC HEADER
   ========================================================= */

.generic-page-header {
  margin-bottom:
    20px;
}


.generic-page-header span {
  display:
    block;

  color:
    #7a7f76;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.15em;
}


.generic-page-header h2 {
  margin:
    7px 0 0;

  color:
    #111410;

  font-size:
    30px;

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}


/* =========================================================
   GENERIC PANEL
   ========================================================= */

.generic-panel {
  min-height:
    220px;

  padding:
    22px;

  border:
    1px solid #dadbd6;

  border-radius:
    18px;

  background:
    #ffffff;

  box-shadow:
    0 10px 30px
    rgba(
      20,
      22,
      17,
      0.045
    );

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}


.generic-panel:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    #cdd0c8;

  box-shadow:
    0 14px 36px
    rgba(
      20,
      22,
      17,
      0.065
    );
}


.generic-panel p {
  margin:
    0;

  color:
    #5e635a;

  font-size:
    12px;

  font-weight:
    550;

  line-height:
    1.65;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
  scrollbar-width:
    thin;

  scrollbar-color:
    #c4c8bf
    transparent;
}


*::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


*::-webkit-scrollbar-track {
  background:
    transparent;
}


*::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

  background:
    #c4c8bf;

  background-clip:
    padding-box;
}


*::-webkit-scrollbar-thumb:hover {
  background:
    #aeb3a9;

  background-clip:
    padding-box;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
  background:
    #d9ded4;

  color:
    #111410;
}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {
  outline:
    2px solid
    #8b9186;

  outline-offset:
    2px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes globalPageEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes globalShapeOne {
  from {
    transform:
      rotate(
        0deg
      )
      translate(
        0,
        0
      );
  }

  to {
    transform:
      rotate(
        15deg
      )
      translate(
        -12px,
        16px
      );
  }
}


@keyframes globalShapeTwo {
  from {
    transform:
      rotate(
        0deg
      )
      translate(
        0,
        0
      );
  }

  to {
    transform:
      rotate(
        -12deg
      )
      translate(
        14px,
        -10px
      );
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1100px
) {

  .app-content {
    padding:
      22px;
  }


  .generic-page-header h2 {
    font-size:
      27px;
  }

}


@media (
  max-width:
  720px
) {

  .app-shell {
    margin-left:
      var(--sidebar-width-collapsed);
  }


  .app-sidebar {
    width:
      var(--sidebar-width-collapsed);
  }


  .app-content {
    padding:
      18px;
  }


  .generic-page-header {
    margin-bottom:
      16px;
  }


  .generic-page-header h2 {
    font-size:
      25px;
  }


  .generic-panel {
    padding:
      18px;

    border-radius:
      15px;
  }

}


@media (
  max-width:
  520px
) {

  .app-content {
    padding:
      14px;
  }


  .generic-page-header h2 {
    font-size:
      23px;
  }


  .generic-panel {
    min-height:
      180px;

    padding:
      16px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}/* =========================================================
   GLOBAL THEME SYSTEM
   NAI HUB
   ========================================================= */


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"] {

  --global-bg:
    #efefeb;

  --global-shell-bg:
    #f4f4f1;

  --global-surface:
    #ffffff;

  --global-surface-hover:
    #fafafa;

  --global-border:
    #dadbd6;

  --global-border-strong:
    #cdd0c8;

  --global-text:
    #151713;

  --global-text-strong:
    #111410;

  --global-text-secondary:
    #5e635a;

  --global-text-muted:
    #7a7f76;

  --global-scroll:
    #c4c8bf;

  --global-scroll-hover:
    #aeb3a9;

  --global-selection:
    #d9ded4;

  --global-selection-text:
    #111410;

}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] {

  --global-bg:
    #08090a;

  --global-shell-bg:
    #0b0c0e;

  --global-surface:
    #0f1012;

  --global-surface-hover:
    #17191c;

  --global-border:
    #202226;

  --global-border-strong:
    #32353a;

  --global-text:
    #f4f4f5;

  --global-text-strong:
    #ffffff;

  --global-text-secondary:
    #b7bac0;

  --global-text-muted:
    #8b8f96;

  --global-scroll:
    #3a3d42;

  --global-scroll-hover:
    #50545a;

  --global-selection:
    #2f3340;

  --global-selection-text:
    #ffffff;

}


/* =========================================================
   FALLBACK SI NO EXISTE DATA-THEME
   ========================================================= */

html:not([data-theme]) {

  --global-bg:
    #efefeb;

  --global-shell-bg:
    #f4f4f1;

  --global-surface:
    #ffffff;

  --global-surface-hover:
    #fafafa;

  --global-border:
    #dadbd6;

  --global-border-strong:
    #cdd0c8;

  --global-text:
    #151713;

  --global-text-strong:
    #111410;

  --global-text-secondary:
    #5e635a;

  --global-text-muted:
    #7a7f76;

  --global-scroll:
    #c4c8bf;

  --global-scroll-hover:
    #aeb3a9;

  --global-selection:
    #d9ded4;

  --global-selection-text:
    #111410;

}


/* =========================================================
   HTML / BODY
   ========================================================= */

html {
  background:
    var(--global-bg);
}


body {
  background:
    var(--global-bg);

  color:
    var(--global-text);

  transition:
    background-color 180ms ease,
    color 180ms ease;
}


/* =========================================================
   APP
   ========================================================= */

#app {
  background:
    var(--global-bg);
}


/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
  background:
    var(--global-shell-bg);

  color:
    var(--global-text);

  transition:
    margin-left 220ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    background-color 180ms ease,
    color 180ms ease;
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
  background:
    var(--global-shell-bg);

  color:
    var(--global-text);

  transition:
    background-color 180ms ease,
    color 180ms ease;
}


/* =========================================================
   DECORACIONES
   ========================================================= */

html[data-theme="light"]
.app-main::before {
  border-color:
    rgba(
      20,
      24,
      18,
      .045
    );
}


html[data-theme="light"]
.app-main::after {
  border-color:
    rgba(
      20,
      24,
      18,
      .035
    );
}


html[data-theme="dark"]
.app-main::before {
  border-color:
    rgba(
      255,
      255,
      255,
      .035
    );
}


html[data-theme="dark"]
.app-main::after {
  border-color:
    rgba(
      255,
      255,
      255,
      .025
    );
}


/* =========================================================
   CONTENT
   ========================================================= */

.app-content {
  color:
    var(--global-text);
}


/* =========================================================
   GENERIC HEADER
   ========================================================= */

.generic-page-header span {
  color:
    var(--global-text-muted);
}


.generic-page-header h2 {
  color:
    var(--global-text-strong);
}


/* =========================================================
   GENERIC PANEL
   ========================================================= */

.generic-panel {
  border-color:
    var(--global-border);

  background:
    var(--global-surface);

  color:
    var(--global-text);

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    background-color 180ms ease,
    color 180ms ease;
}


.generic-panel:hover {
  border-color:
    var(--global-border-strong);

  background:
    var(--global-surface-hover);
}


.generic-panel p {
  color:
    var(--global-text-secondary);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

input,
select,
textarea {
  color:
    var(--global-text);
}


html[data-theme="dark"]
input,
html[data-theme="dark"]
select,
html[data-theme="dark"]
textarea {
  color-scheme:
    dark;
}


html[data-theme="light"]
input,
html[data-theme="light"]
select,
html[data-theme="light"]
textarea {
  color-scheme:
    light;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
  scrollbar-color:
    var(--global-scroll)
    transparent;
}


*::-webkit-scrollbar-thumb {
  background:
    var(--global-scroll);

  background-clip:
    padding-box;
}


*::-webkit-scrollbar-thumb:hover {
  background:
    var(--global-scroll-hover);

  background-clip:
    padding-box;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
  background:
    var(--global-selection);

  color:
    var(--global-selection-text);
}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {
  outline-color:
    var(--global-border-strong);
}


/* =========================================================
   DARK BODY FALLBACK
   ========================================================= */

body.light {
  background:
    #efefeb;

  color:
    #151713;
}


html[data-theme="dark"]
body {
  background:
    #08090a;

  color:
    #f4f4f5;
}