/* =========================================================
   NAI HUB · TOPBAR
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/components/topbar/topbar.css

   DISEÑO:
   - NEGRO REAL EN DARK
   - CLARO LIMPIO
   - TEXTO FUERTE Y LEGIBLE
   - BÚSQUEDA CENTRAL
   - ICONOS MÁS PROFESIONALES
   - COMPACTO
   - RÁPIDO
   - RESPONSIVE
   - SIN GLOW
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

.app-topbar {

  --tb-bg:
    #000000;

  --tb-bg-elevated:
    #050505;

  --tb-surface:
    #090909;

  --tb-surface-hover:
    #111111;

  --tb-surface-active:
    #171717;

  --tb-border:
    #242424;

  --tb-border-strong:
    #3a3a3a;

  --tb-text:
    #ffffff;

  --tb-text-secondary:
    #f1f1f1;

  --tb-text-soft:
    #d5d5d5;

  --tb-text-muted:
    #b7b7b7;

  --tb-accent:
    #c8bfff;

  --tb-accent-soft:
    rgba(200, 191, 255, .08);

  --tb-danger:
    #ff9696;

  --tb-danger-bg:
    rgba(255, 80, 80, .08);

  --tb-danger-border:
    rgba(255, 115, 115, .26);

  --tb-radius:
    9px;

  --tb-transition:
    110ms cubic-bezier(.2, .8, .2, 1);

}


/* =========================================================
   BASE
   ========================================================= */

.app-topbar {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  width:
    100%;

  min-width:
    0;

  height:
    54px;

  min-height:
    54px;

  display:
    grid;

  grid-template-columns:
    minmax(220px, 1fr)
    minmax(280px, 520px)
    minmax(320px, 1fr);

  align-items:
    center;

  gap:
    18px;

  padding:
    0 16px;

  overflow:
    visible;

  border-bottom:
    1px solid var(--tb-border);

  background:
    var(--tb-bg);

  color:
    var(--tb-text);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, .015);

}


/* =========================================================
   BOTTOM ACCENT
   ========================================================= */

.app-topbar::after {

  content:
    "";

  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  height:
    1px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, .025) 20%,
      rgba(200, 191, 255, .16) 50%,
      rgba(255, 255, 255, .025) 80%,
      transparent 100%
    );

}


/* =========================================================
   LEFT / CENTER / RIGHT
   ========================================================= */

.topbar-left,
.topbar-center,
.topbar-right {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

}


.topbar-left {

  justify-content:
    flex-start;

  gap:
    11px;

}


.topbar-center {

  width:
    100%;

  justify-content:
    center;

}


.topbar-right {

  justify-content:
    flex-end;

  gap:
    7px;

}


/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.topbar-sidebar-toggle {

  position:
    relative;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--tb-border);

  border-radius:
    var(--tb-radius);

  background:
    transparent;

  color:
    var(--tb-text);

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    transform var(--tb-transition);

}


.topbar-sidebar-toggle:hover {

  border-color:
    var(--tb-border-strong);

  background:
    var(--tb-surface-hover);

}


.topbar-sidebar-toggle:active {

  transform:
    scale(.96);

}


.topbar-sidebar-toggle.is-pressing {

  transform:
    scale(.94);

}


/* =========================================================
   SIDEBAR ICON
   ========================================================= */

.topbar-sidebar-icon {

  width:
    18px;

  height:
    18px;

  display:
    grid;

  place-items:
    center;

  color:
    currentColor;

}


.topbar-sidebar-svg {

  width:
    18px;

  height:
    18px;

  display:
    block;

}


/* =========================================================
   PAGE INFO
   ========================================================= */

.topbar-page-info {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    2px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.topbar-eyebrow {

  color:
    var(--tb-text-muted);

  font-size:
    7.5px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .16em;

  text-transform:
    uppercase;

}


/* =========================================================
   TITLE
   ========================================================= */

.topbar-title-row {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.topbar-page-info h1 {

  max-width:
    320px;

  margin:
    0;

  overflow:
    hidden;

  color:
    var(--tb-text);

  font-size:
    13.5px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.topbar-title-divider {

  width:
    12px;

  height:
    1px;

  flex:
    0 0 12px;

  background:
    var(--tb-border-strong);

}


.topbar-system-name {

  min-width:
    0;

  max-width:
    190px;

  overflow:
    hidden;

  color:
    var(--tb-text-secondary);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.1;

  letter-spacing:
    -.01em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   GLOBAL SEARCH
   ========================================================= */

.topbar-global-search {

  position:
    relative;

  width:
    100%;

  max-width:
    520px;

  min-width:
    0;

  z-index:
    1300;

}


/* =========================================================
   SEARCH INPUT SHELL
   ========================================================= */

.topbar-search-input-shell {

  position:
    relative;

  width:
    100%;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px 0 11px;

  overflow:
    hidden;

  border:
    1px solid var(--tb-border);

  border-radius:
    10px;

  background:
    var(--tb-surface);

  transition:
    border-color var(--tb-transition),
    background-color var(--tb-transition);

}


.topbar-global-search:hover
.topbar-search-input-shell {

  border-color:
    var(--tb-border-strong);

}


.topbar-global-search:focus-within
.topbar-search-input-shell,
.topbar-global-search.is-open
.topbar-search-input-shell {

  border-color:
    #4d4d4d;

  background:
    #0c0c0c;

}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.topbar-search-main-icon {

  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--tb-text-secondary);

}


.topbar-search-main-icon svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2;

}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

.topbar-search-input {

  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--tb-text);

  font-family:
    inherit;

  font-size:
    11.5px;

  font-weight:
    700;

  line-height:
    1;

  outline:
    none;

  appearance:
    none;

}


.topbar-search-input::placeholder {

  color:
    var(--tb-text-muted);

  opacity:
    1;

  font-weight:
    650;

}


.topbar-search-input::-webkit-search-cancel-button {

  display:
    none;

}


/* =========================================================
   SEARCH SHORTCUT
   ========================================================= */

.topbar-search-shortcut {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

}


.topbar-search-shortcut kbd {

  min-width:
    22px;

  height:
    20px;

  display:
    grid;

  place-items:
    center;

  padding:
    0 5px;

  border:
    1px solid var(--tb-border);

  border-radius:
    5px;

  background:
    #050505;

  color:
    var(--tb-text-soft);

  font-family:
    inherit;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.topbar-search-results {

  position:
    absolute;

  top:
    calc(100% + 8px);

  left:
    0;

  width:
    100%;

  max-height:
    min(560px, calc(100vh - 90px));

  overflow-x:
    hidden;

  overflow-y:
    auto;

  border:
    1px solid var(--tb-border-strong);

  border-radius:
    12px;

  background:
    #050505;

  color:
    var(--tb-text);

  box-shadow:
    0 14px 40px rgba(0, 0, 0, .42);

  overscroll-behavior:
    contain;

}


.topbar-search-results[hidden] {

  display:
    none !important;

}


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

.topbar-search-results {

  scrollbar-width:
    thin;

  scrollbar-color:
    #3a3a3a
    transparent;

}


.topbar-search-results::-webkit-scrollbar {

  width:
    7px;

}


.topbar-search-results::-webkit-scrollbar-track {

  background:
    transparent;

}


.topbar-search-results::-webkit-scrollbar-thumb {

  border-radius:
    999px;

  background:
    #3a3a3a;

}


/* =========================================================
   SEARCH GROUP
   ========================================================= */

.topbar-search-group {

  padding:
    7px;

}


.topbar-search-group +
.topbar-search-group {

  border-top:
    1px solid var(--tb-border);

}


.topbar-search-group-header {

  min-height:
    27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    0 6px 5px;

}


.topbar-search-group-title {

  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--tb-text);

}


.topbar-search-group-title svg {

  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2;

}


.topbar-search-group-title strong {

  color:
    var(--tb-text);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

}


.topbar-search-group-count {

  min-width:
    19px;

  height:
    18px;

  display:
    grid;

  place-items:
    center;

  padding:
    0 5px;

  border:
    1px solid var(--tb-border);

  border-radius:
    999px;

  background:
    #0b0b0b;

  color:
    var(--tb-text-secondary);

  font-size:
    7px;

  font-weight:
    800;

}


/* =========================================================
   SEARCH RESULT LIST
   ========================================================= */

.topbar-search-group-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


/* =========================================================
   SEARCH RESULT ITEM
   ========================================================= */

.topbar-search-result {

  width:
    100%;

  min-width:
    0;

  min-height:
    48px;

  display:
    grid;

  grid-template-columns:
    30px minmax(0, 1fr) 26px;

  align-items:
    center;

  gap:
    9px;

  padding:
    6px 7px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--tb-text);

  font-family:
    inherit;

  text-align:
    left;

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition);

}


.topbar-search-result:hover,
.topbar-search-result:focus-visible {

  border-color:
    var(--tb-border);

  background:
    var(--tb-surface-hover);

}


/* =========================================================
   SEARCH RESULT ICON
   ========================================================= */

.topbar-search-result-icon {

  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--tb-border);

  border-radius:
    8px;

  background:
    #0b0b0b;

  color:
    var(--tb-text);

}


.topbar-search-result-icon svg {

  width:
    14px;

  height:
    14px;

  stroke-width:
    1.9;

}


/* =========================================================
   SEARCH RESULT COPY
   ========================================================= */

.topbar-search-result-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

}


.topbar-search-result-copy strong {

  width:
    100%;

  overflow:
    hidden;

  color:
    var(--tb-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    -.01em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.topbar-search-result-copy small {

  width:
    100%;

  overflow:
    hidden;

  color:
    var(--tb-text-soft);

  font-size:
    8.5px;

  font-weight:
    650;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   SEARCH RESULT ACTION
   ========================================================= */

.topbar-search-result-action {

  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--tb-text-secondary);

  opacity:
    .82;

}


.topbar-search-result-action svg {

  width:
    13px;

  height:
    13px;

  stroke-width:
    2;

}


.topbar-search-result:hover
.topbar-search-result-action {

  opacity:
    1;

}


/* =========================================================
   SEARCH STATE
   ========================================================= */

.topbar-search-state {

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    12px;

  color:
    var(--tb-text-secondary);

  font-size:
    10px;

  font-weight:
    700;

}


.topbar-search-state-icon {

  width:
    18px;

  height:
    18px;

  display:
    grid;

  place-items:
    center;

}


.topbar-search-state-icon svg {

  width:
    14px;

  height:
    14px;

  animation:
    topbarSearchSpin
    700ms
    linear
    infinite;

}


@keyframes topbarSearchSpin {

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================================
   SEARCH EMPTY
   ========================================================= */

.topbar-search-empty {

  min-height:
    76px;

  display:
    grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;

}


.topbar-search-empty-icon {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--tb-border);

  border-radius:
    9px;

  background:
    var(--tb-surface);

  color:
    var(--tb-text-secondary);

}


.topbar-search-empty-icon svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    1.9;

}


.topbar-search-empty-copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.topbar-search-empty-copy strong {

  color:
    var(--tb-text);

  font-size:
    10px;

  font-weight:
    800;

}


.topbar-search-empty-copy span {

  color:
    var(--tb-text-soft);

  font-size:
    8.5px;

  font-weight:
    650;

  line-height:
    1.35;

}


/* =========================================================
   DATETIME
   ========================================================= */

.topbar-datetime {

  min-width:
    0;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 8px;

  border:
    1px solid transparent;

  border-radius:
    var(--tb-radius);

  background:
    transparent;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition);

}


.topbar-datetime:hover {

  border-color:
    var(--tb-border);

  background:
    var(--tb-surface);

}


/* =========================================================
   DATETIME ICON
   ========================================================= */

.topbar-datetime-icon {

  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--tb-border);

  border-radius:
    7px;

  background:
    var(--tb-surface);

  color:
    var(--tb-text-secondary);

}


.topbar-datetime-icon svg {

  width:
    12px;

  height:
    12px;

  stroke-width:
    1.9;

}


/* =========================================================
   DATETIME COPY
   ========================================================= */

.topbar-datetime-content {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    2px;

}


.topbar-date {

  max-width:
    120px;

  overflow:
    hidden;

  color:
    var(--tb-text-soft);

  font-size:
    7.5px;

  font-weight:
    700;

  line-height:
    1;

  text-transform:
    capitalize;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.topbar-time {

  color:
    var(--tb-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .01em;

}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.topbar-theme-toggle {

  position:
    relative;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--tb-border);

  border-radius:
    var(--tb-radius);

  background:
    transparent;

  color:
    var(--tb-text);

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    transform var(--tb-transition);

}


.topbar-theme-toggle:hover {

  border-color:
    var(--tb-border-strong);

  background:
    var(--tb-surface-hover);

}


.topbar-theme-toggle:active {

  transform:
    scale(.96);

}


/* =========================================================
   THEME ICON
   ========================================================= */

.topbar-theme-icon {

  position:
    relative;

  display:
    block;

  width:
    18px;

  height:
    18px;

}


.topbar-theme-icon__sun,
.topbar-theme-icon__moon {

  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  transform-origin:
    center;

  transition:
    opacity 120ms ease,
    transform 160ms cubic-bezier(.22, 1, .36, 1);

}


.topbar-theme-icon__sun svg,
.topbar-theme-icon__moon svg {

  width:
    16px;

  height:
    16px;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.topbar-theme-icon.is-dark
.topbar-theme-icon__moon {

  opacity:
    1;

  transform:
    rotate(0deg)
    scale(1);

}


.topbar-theme-icon.is-dark
.topbar-theme-icon__sun {

  opacity:
    0;

  transform:
    rotate(-55deg)
    scale(.68);

}


.topbar-theme-icon.is-light
.topbar-theme-icon__sun {

  opacity:
    1;

  transform:
    rotate(0deg)
    scale(1);

}


.topbar-theme-icon.is-light
.topbar-theme-icon__moon {

  opacity:
    0;

  transform:
    rotate(55deg)
    scale(.68);

}


/* =========================================================
   DIVIDER
   ========================================================= */

.topbar-divider {

  width:
    1px;

  height:
    20px;

  flex:
    0 0 1px;

  margin:
    0 2px;

  background:
    var(--tb-border);

}


/* =========================================================
   USER
   ========================================================= */

.topbar-user {

  min-width:
    0;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    2px 8px 2px 3px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition);

}


.topbar-user:hover {

  border-color:
    var(--tb-border);

  background:
    var(--tb-surface);

}


/* =========================================================
   AVATAR CONTAINER
   ========================================================= */

.topbar-avatar-container {

  width:
    31px;

  height:
    31px;

  min-width:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    50%;

}


/* =========================================================
   AVATAR
   ========================================================= */

.topbar-avatar {

  position:
    relative;

  width:
    31px !important;

  height:
    31px !important;

  min-width:
    31px !important;

  min-height:
    31px !important;

  max-width:
    31px !important;

  max-height:
    31px !important;

  flex:
    0 0 31px !important;

  display:
    grid;

  place-items:
    center;

  padding:
    0 !important;

  margin:
    0;

  overflow:
    hidden !important;

  border:
    1px solid var(--tb-border-strong);

  border-radius:
    50% !important;

  background:
    var(--tb-surface);

  color:
    var(--tb-text);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .03em;

  aspect-ratio:
    1 / 1;

  transition:
    border-color var(--tb-transition);

}


.topbar-user:hover
.topbar-avatar {

  border-color:
    #555555;

}/* =========================================================
   AVATAR IMAGE
   ========================================================= */

.topbar-avatar--image {

  background:
    transparent !important;

}


.topbar-avatar-image {

  position:
    absolute;

  inset:
    0;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    100%;

  min-height:
    100%;

  max-width:
    none;

  max-height:
    none;

  display:
    block;

  margin:
    0;

  padding:
    0;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  outline:
    0 !important;

  box-shadow:
    none !important;

}


/* =========================================================
   AVATAR FALLBACK
   ========================================================= */

.topbar-avatar-fallback {

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

}


.topbar-avatar-fallback[hidden] {

  display:
    none !important;

}


/* =========================================================
   USER DATA
   ========================================================= */

.topbar-user-data {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    2px;

}


.topbar-user-data strong {

  max-width:
    145px;

  overflow:
    hidden;

  color:
    var(--tb-text);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -.012em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.topbar-user-data span {

  max-width:
    145px;

  overflow:
    hidden;

  color:
    var(--tb-text-secondary);

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


/* =========================================================
   LOGOUT
   ========================================================= */

.topbar-logout {

  width:
    34px;

  min-width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid var(--tb-border);

  border-radius:
    var(--tb-radius);

  background:
    transparent;

  color:
    var(--tb-text-secondary);

  font-family:
    inherit;

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    color var(--tb-transition),
    transform var(--tb-transition);

}


.topbar-logout span {

  display:
    none;

}


.topbar-logout:hover {

  border-color:
    var(--tb-danger-border);

  background:
    var(--tb-danger-bg);

  color:
    var(--tb-danger);

}


.topbar-logout:active {

  transform:
    scale(.96);

}


.topbar-logout svg {

  width:
    15px;

  height:
    15px;

}


.topbar-logout-clicked {

  opacity:
    .72;

  transform:
    scale(.94);

}


/* =========================================================
   LIGHT MODE TOKENS
   ========================================================= */

html[data-theme="light"]
.app-topbar,

body.light
.app-topbar {

  --tb-bg:
    #ffffff;

  --tb-bg-elevated:
    #ffffff;

  --tb-surface:
    #f8f8f8;

  --tb-surface-hover:
    #f0f0f0;

  --tb-surface-active:
    #e9e9e9;

  --tb-border:
    #d6d6d6;

  --tb-border-strong:
    #bcbcbc;

  --tb-text:
    #050505;

  --tb-text-secondary:
    #161616;

  --tb-text-soft:
    #2f2f2f;

  --tb-text-muted:
    #454545;

  --tb-accent:
    #51458e;

  --tb-accent-soft:
    rgba(81, 69, 142, .06);

  --tb-danger:
    #8f1f1f;

  --tb-danger-bg:
    #fff5f5;

  --tb-danger-border:
    #dfb0b0;

  background:
    #ffffff;

  color:
    #050505;

  border-bottom-color:
    #d6d6d6;

  box-shadow:
    0 1px 0 rgba(0, 0, 0, .035);

}


/* =========================================================
   LIGHT BOTTOM ACCENT
   ========================================================= */

html[data-theme="light"]
.app-topbar::after,

body.light
.app-topbar::after {

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, .02) 20%,
      rgba(81, 69, 142, .14) 50%,
      rgba(0, 0, 0, .02) 80%,
      transparent 100%
    );

}


/* =========================================================
   LIGHT SEARCH INPUT
   ========================================================= */

html[data-theme="light"]
.topbar-search-input-shell,

body.light
.topbar-search-input-shell {

  background:
    #f8f8f8;

  border-color:
    #d8d8d8;

}


html[data-theme="light"]
.topbar-global-search:hover
.topbar-search-input-shell,

body.light
.topbar-global-search:hover
.topbar-search-input-shell {

  border-color:
    #b8b8b8;

}


html[data-theme="light"]
.topbar-global-search:focus-within
.topbar-search-input-shell,

html[data-theme="light"]
.topbar-global-search.is-open
.topbar-search-input-shell,

body.light
.topbar-global-search:focus-within
.topbar-search-input-shell,

body.light
.topbar-global-search.is-open
.topbar-search-input-shell {

  border-color:
    #8c8c8c;

  background:
    #ffffff;

}


/* =========================================================
   LIGHT SEARCH TEXT
   ========================================================= */

html[data-theme="light"]
.topbar-search-input,

body.light
.topbar-search-input {

  color:
    #050505;

}


html[data-theme="light"]
.topbar-search-input::placeholder,

body.light
.topbar-search-input::placeholder {

  color:
    #424242;

  opacity:
    1;

}


/* =========================================================
   LIGHT SEARCH ICON
   ========================================================= */

html[data-theme="light"]
.topbar-search-main-icon,

body.light
.topbar-search-main-icon {

  color:
    #161616;

}


/* =========================================================
   LIGHT SEARCH SHORTCUT
   ========================================================= */

html[data-theme="light"]
.topbar-search-shortcut kbd,

body.light
.topbar-search-shortcut kbd {

  border-color:
    #d2d2d2;

  background:
    #ffffff;

  color:
    #222222;

}


/* =========================================================
   LIGHT SEARCH RESULTS
   ========================================================= */

html[data-theme="light"]
.topbar-search-results,

body.light
.topbar-search-results {

  border-color:
    #c8c8c8;

  background:
    #ffffff;

  color:
    #050505;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, .14);

}


/* =========================================================
   LIGHT SEARCH GROUP
   ========================================================= */

html[data-theme="light"]
.topbar-search-group +
.topbar-search-group,

body.light
.topbar-search-group +
.topbar-search-group {

  border-top-color:
    #d8d8d8;

}


html[data-theme="light"]
.topbar-search-group-title,

html[data-theme="light"]
.topbar-search-group-title strong,

body.light
.topbar-search-group-title,

body.light
.topbar-search-group-title strong {

  color:
    #050505;

}


html[data-theme="light"]
.topbar-search-group-count,

body.light
.topbar-search-group-count {

  border-color:
    #d4d4d4;

  background:
    #f4f4f4;

  color:
    #111111;

}


/* =========================================================
   LIGHT SEARCH RESULT
   ========================================================= */

html[data-theme="light"]
.topbar-search-result,

body.light
.topbar-search-result {

  color:
    #050505;

}


html[data-theme="light"]
.topbar-search-result:hover,

html[data-theme="light"]
.topbar-search-result:focus-visible,

body.light
.topbar-search-result:hover,

body.light
.topbar-search-result:focus-visible {

  border-color:
    #d0d0d0;

  background:
    #f3f3f3;

}


/* =========================================================
   LIGHT SEARCH RESULT ICON
   ========================================================= */

html[data-theme="light"]
.topbar-search-result-icon,

body.light
.topbar-search-result-icon {

  border-color:
    #d2d2d2;

  background:
    #f7f7f7;

  color:
    #090909;

}


/* =========================================================
   LIGHT SEARCH RESULT TEXT
   ========================================================= */

html[data-theme="light"]
.topbar-search-result-copy strong,

body.light
.topbar-search-result-copy strong {

  color:
    #050505;

}


html[data-theme="light"]
.topbar-search-result-copy small,

body.light
.topbar-search-result-copy small {

  color:
    #2c2c2c;

}


html[data-theme="light"]
.topbar-search-result-action,

body.light
.topbar-search-result-action {

  color:
    #111111;

}


/* =========================================================
   LIGHT SEARCH EMPTY
   ========================================================= */

html[data-theme="light"]
.topbar-search-empty-icon,

body.light
.topbar-search-empty-icon {

  border-color:
    #d2d2d2;

  background:
    #f7f7f7;

  color:
    #111111;

}


html[data-theme="light"]
.topbar-search-empty-copy strong,

body.light
.topbar-search-empty-copy strong {

  color:
    #050505;

}


html[data-theme="light"]
.topbar-search-empty-copy span,

body.light
.topbar-search-empty-copy span {

  color:
    #2b2b2b;

}


html[data-theme="light"]
.topbar-search-state,

body.light
.topbar-search-state {

  color:
    #161616;

}


/* =========================================================
   LIGHT GENERAL COLORS
   ========================================================= */

html[data-theme="light"]
.topbar-sidebar-toggle,

html[data-theme="light"]
.topbar-theme-toggle,

html[data-theme="light"]
.topbar-page-info h1,

html[data-theme="light"]
.topbar-time,

html[data-theme="light"]
.topbar-user-data strong,

html[data-theme="light"]
.topbar-user-data span,

html[data-theme="light"]
.topbar-avatar,

body.light
.topbar-sidebar-toggle,

body.light
.topbar-theme-toggle,

body.light
.topbar-page-info h1,

body.light
.topbar-time,

body.light
.topbar-user-data strong,

body.light
.topbar-user-data span,

body.light
.topbar-avatar {

  color:
    #050505;

}


/* =========================================================
   LIGHT SECONDARY TEXT
   ========================================================= */

html[data-theme="light"]
.topbar-eyebrow,

html[data-theme="light"]
.topbar-system-name,

html[data-theme="light"]
.topbar-date,

body.light
.topbar-eyebrow,

body.light
.topbar-system-name,

body.light
.topbar-date {

  color:
    #303030;

}


/* =========================================================
   LIGHT DATETIME ICON
   ========================================================= */

html[data-theme="light"]
.topbar-datetime-icon,

body.light
.topbar-datetime-icon {

  border-color:
    #d4d4d4;

  background:
    #f7f7f7;

  color:
    #111111;

}


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

html[data-theme="light"]
.topbar-avatar,

body.light
.topbar-avatar {

  border-color:
    #c9c9c9;

  background:
    #f4f4f4;

}


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

html[data-theme="light"]
.topbar-sidebar-toggle,

html[data-theme="light"]
.topbar-theme-toggle,

html[data-theme="light"]
.topbar-logout,

body.light
.topbar-sidebar-toggle,

body.light
.topbar-theme-toggle,

body.light
.topbar-logout {

  border-color:
    #d5d5d5;

}


html[data-theme="light"]
.topbar-sidebar-toggle:hover,

html[data-theme="light"]
.topbar-theme-toggle:hover,

body.light
.topbar-sidebar-toggle:hover,

body.light
.topbar-theme-toggle:hover {

  border-color:
    #bdbdbd;

  background:
    #f2f2f2;

}


/* =========================================================
   ENTER
   ========================================================= */

.topbar-enter {

  opacity:
    0;

  transform:
    translateY(-2px);

}


.topbar-enter-visible {

  opacity:
    1;

  transform:
    translateY(0);

  transition:
    opacity 140ms ease,
    transform 140ms ease;

}


/* =========================================================
   TITLE CHANGE
   ========================================================= */

.topbar-title-change {

  animation:
    topbarTitleChange
    130ms
    ease;

}


@keyframes topbarTitleChange {

  from {

    opacity:
      .55;

    transform:
      translateY(1px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


/* =========================================================
   THEME SWITCH
   ========================================================= */

.topbar-theme-toggle.is-switching {

  animation:
    topbarThemeButtonSwitch
    180ms
    cubic-bezier(.22, 1, .36, 1);

}


@keyframes topbarThemeButtonSwitch {

  0% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(.91);

  }

  100% {

    transform:
      scale(1);

  }

}


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

.topbar-sidebar-toggle:focus-visible,
.topbar-theme-toggle:focus-visible,
.topbar-logout:focus-visible {

  outline:
    1px solid var(--tb-text);

  outline-offset:
    2px;

}


/* =========================================================
   RESPONSIVE ≤ 1280
   ========================================================= */

@media (max-width: 1280px) {

  .app-topbar {

    grid-template-columns:
      minmax(190px, .85fr)
      minmax(260px, 440px)
      minmax(300px, 1fr);

    gap:
      12px;

  }


  .topbar-system-name {

    max-width:
      130px;

  }


  .topbar-user-data strong,
  .topbar-user-data span {

    max-width:
      110px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 1100
   ========================================================= */

@media (max-width: 1100px) {

  .app-topbar {

    grid-template-columns:
      minmax(165px, .75fr)
      minmax(240px, 390px)
      auto;

  }


  .topbar-system-name,
  .topbar-title-divider {

    display:
      none;

  }


  .topbar-user-data {

    display:
      none;

  }


  .topbar-user {

    padding:
      2px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (max-width: 900px) {

  .app-topbar {

    grid-template-columns:
      minmax(140px, 1fr)
      minmax(220px, 360px)
      auto;

    gap:
      8px;

    padding:
      0 10px;

  }


  .topbar-datetime-content {

    display:
      none;

  }


  .topbar-datetime {

    width:
      34px;

    min-width:
      34px;

    padding:
      0;

    justify-content:
      center;

  }


  .topbar-datetime-icon {

    width:
      26px;

    height:
      26px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 760
   ========================================================= */

@media (max-width: 760px) {

  .app-topbar {

    grid-template-columns:
      minmax(110px, 1fr)
      minmax(180px, 1.5fr)
      auto;

    height:
      52px;

    min-height:
      52px;

  }


  .topbar-page-info h1 {

    max-width:
      130px;

    font-size:
      12.5px;

  }


  .topbar-eyebrow {

    font-size:
      7px;

  }


  .topbar-search-shortcut {

    display:
      none;

  }


  .topbar-search-input-shell {

    height:
      34px;

  }


  .topbar-search-input {

    font-size:
      11px;

  }


  .topbar-divider {

    display:
      none;

  }

}


/* =========================================================
   RESPONSIVE ≤ 620
   ========================================================= */

@media (max-width: 620px) {

  .app-topbar {

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    gap:
      7px;

    padding:
      0 8px;

  }


  .topbar-page-info {

    display:
      none;

  }


  .topbar-left {

    flex:
      0 0 auto;

  }


  .topbar-center {

    min-width:
      0;

  }


  .topbar-global-search {

    max-width:
      none;

  }


  .topbar-datetime {

    display:
      none;

  }


  .topbar-user {

    display:
      none;

  }


  .topbar-search-results {

    position:
      fixed;

    top:
      58px;

    left:
      8px;

    right:
      8px;

    width:
      auto;

    max-height:
      calc(100vh - 70px);

  }

}


/* =========================================================
   RESPONSIVE ≤ 460
   ========================================================= */

@media (max-width: 460px) {

  .app-topbar {

    height:
      50px;

    min-height:
      50px;

    gap:
      6px;

    padding:
      0 7px;

  }


  .topbar-sidebar-toggle,
  .topbar-theme-toggle,
  .topbar-logout {

    width:
      32px;

    min-width:
      32px;

    height:
      32px;

    flex-basis:
      32px;

  }


  .topbar-search-input-shell {

    height:
      32px;

    padding:
      0 8px 0 9px;

    border-radius:
      8px;

  }


  .topbar-search-main-icon {

    width:
      16px;

    height:
      16px;

    flex-basis:
      16px;

  }


  .topbar-search-main-icon svg {

    width:
      14px;

    height:
      14px;

  }


  .topbar-search-input {

    font-size:
      10.5px;

  }


  .topbar-search-results {

    top:
      56px;

    left:
      7px;

    right:
      7px;

  }

}


/* =========================================================
   RESPONSIVE ≤ 370
   ========================================================= */

@media (max-width: 370px) {

  .topbar-theme-toggle {

    display:
      none;

  }


  .app-topbar {

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

  }


  .topbar-search-input::placeholder {

    font-size:
      9.5px;

  }

}


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

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

  .app-topbar *,
  .app-topbar *::before,
  .app-topbar *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }


  .topbar-enter {

    opacity:
      1;

    transform:
      none;

  }

}/* =========================================================
   TOPBAR · CALENDARIO DESPLEGABLE
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   WRAPPER
   ========================================================= */

.topbar-calendar-wrap {
  position:
    relative;

  min-width:
    0;

  flex:
    0 0 auto;

  z-index:
    1600;
}


/* =========================================================
   DATETIME COMO BOTÓN
   ========================================================= */

.topbar-calendar-wrap
.topbar-datetime {
  appearance:
    none;

  font-family:
    inherit;

  color:
    var(--tb-text);

  cursor:
    pointer;

  outline:
    none;
}


.topbar-calendar-wrap.is-open
.topbar-datetime {
  border-color:
    var(--tb-border-strong);

  background:
    var(--tb-surface);
}


/* =========================================================
   CHEVRON
   ========================================================= */

.topbar-datetime-chevron {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--tb-text-muted);

  transition:
    transform 140ms ease,
    color 140ms ease;
}


.topbar-datetime-chevron svg {
  width:
    12px;

  height:
    12px;

  stroke-width:
    2;
}


.topbar-calendar-wrap.is-open
.topbar-datetime-chevron {
  color:
    var(--tb-text);

  transform:
    rotate(180deg);
}


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

.topbar-calendar-panel {
  position:
    absolute;

  top:
    calc(100% + 9px);

  right:
    0;

  z-index:
    1700;

  width:
    300px;

  min-width:
    300px;

  padding:
    10px;

  overflow:
    hidden;

  border:
    1px solid var(--tb-border-strong);

  border-radius:
    12px;

  background:
    var(--tb-bg-elevated);

  color:
    var(--tb-text);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, .34);

  transform-origin:
    top right;

  animation:
    topbarCalendarOpen
    135ms
    cubic-bezier(.2, .8, .2, 1);
}


.topbar-calendar-panel[hidden] {
  display:
    none !important;
}


/* =========================================================
   PANEL OPEN ANIMATION
   ========================================================= */

@keyframes topbarCalendarOpen {

  from {
    opacity:
      0;

    transform:
      translateY(-4px)
      scale(.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


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

.topbar-calendar-header {
  min-height:
    42px;

  display:
    grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    32px;

  align-items:
    center;

  gap:
    7px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid var(--tb-border);
}


/* =========================================================
   HEADER COPY
   ========================================================= */

.topbar-calendar-header-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;
}


.topbar-calendar-header-copy span {
  color:
    var(--tb-text-muted);

  font-size:
    6.5px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.topbar-calendar-header-copy strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--tb-text);

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -.015em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   NAV BUTTONS
   ========================================================= */

.topbar-calendar-nav {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid var(--tb-border);

  border-radius:
    8px;

  background:
    var(--tb-surface);

  color:
    var(--tb-text);

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    transform var(--tb-transition);
}


.topbar-calendar-nav:hover {
  border-color:
    var(--tb-border-strong);

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


.topbar-calendar-nav:active {
  transform:
    scale(.95);
}


.topbar-calendar-nav svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


/* =========================================================
   WEEKDAYS
   ========================================================= */

.topbar-calendar-weekdays {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap:
    3px;

  margin-top:
    9px;
}


.topbar-calendar-weekdays span {
  height:
    22px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--tb-text-muted);

  font-size:
    7px;

  font-weight:
    850;

  line-height:
    1;

  text-transform:
    uppercase;
}


/* =========================================================
   GRID
   ========================================================= */

.topbar-calendar-grid {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap:
    3px;
}


/* =========================================================
   DAY
   ========================================================= */

.topbar-calendar-day {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  aspect-ratio:
    1 / 1;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--tb-text);

  font-family:
    inherit;

  font-size:
    8.5px;

  font-weight:
    750;

  line-height:
    1;

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    color var(--tb-transition),
    transform var(--tb-transition);
}


.topbar-calendar-day:hover {
  border-color:
    var(--tb-border);

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


.topbar-calendar-day:active {
  transform:
    scale(.92);
}


/* =========================================================
   OUTSIDE MONTH
   ========================================================= */

.topbar-calendar-day.is-outside {
  color:
    var(--tb-text-muted);

  opacity:
    .42;
}


/* =========================================================
   TODAY
   ========================================================= */

.topbar-calendar-day.is-today {
  border-color:
    var(--tb-border-strong);
}


.topbar-calendar-day.is-today::after {
  content:
    "";

  position:
    absolute;

  bottom:
    3px;

  left:
    50%;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    currentColor;

  transform:
    translateX(-50%);
}


/* =========================================================
   SELECTED
   ========================================================= */

.topbar-calendar-day.is-selected {
  border-color:
    #61569a;

  background:
    #61569a;

  color:
    #ffffff;

  opacity:
    1;

  font-weight:
    900;
}


.topbar-calendar-day.is-selected::after {
  background:
    #ffffff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.topbar-calendar-footer {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-top:
    9px;

  padding-top:
    9px;

  border-top:
    1px solid var(--tb-border);
}


/* =========================================================
   SELECTED COPY
   ========================================================= */

.topbar-calendar-selected {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.topbar-calendar-selected span {
  color:
    var(--tb-text-muted);

  font-size:
    6.5px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.topbar-calendar-selected strong {
  max-width:
    175px;

  overflow:
    hidden;

  color:
    var(--tb-text);

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TODAY BUTTON
   ========================================================= */

.topbar-calendar-today {
  min-width:
    48px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 10px;

  border:
    1px solid var(--tb-border);

  border-radius:
    7px;

  background:
    var(--tb-surface);

  color:
    var(--tb-text);

  font-family:
    inherit;

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  outline:
    none;

  cursor:
    pointer;

  transition:
    background-color var(--tb-transition),
    border-color var(--tb-transition),
    transform var(--tb-transition);
}


.topbar-calendar-today:hover {
  border-color:
    var(--tb-border-strong);

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


.topbar-calendar-today:active {
  transform:
    scale(.96);
}


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

.topbar-datetime:focus-visible,
.topbar-calendar-nav:focus-visible,
.topbar-calendar-day:focus-visible,
.topbar-calendar-today:focus-visible {
  outline:
    1px solid var(--tb-text);

  outline-offset:
    2px;
}


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

html[data-theme="light"]
.topbar-calendar-panel,

body.light
.topbar-calendar-panel {
  border-color:
    #c8c8c8;

  background:
    #ffffff;

  color:
    #050505;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, .14);
}


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

html[data-theme="light"]
.topbar-calendar-header,

body.light
.topbar-calendar-header {
  border-bottom-color:
    #d8d8d8;
}


html[data-theme="light"]
.topbar-calendar-header-copy span,

body.light
.topbar-calendar-header-copy span {
  color:
    #454545;
}


html[data-theme="light"]
.topbar-calendar-header-copy strong,

body.light
.topbar-calendar-header-copy strong {
  color:
    #050505;
}


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

html[data-theme="light"]
.topbar-calendar-nav,

body.light
.topbar-calendar-nav {
  border-color:
    #d5d5d5;

  background:
    #f8f8f8;

  color:
    #050505;
}


html[data-theme="light"]
.topbar-calendar-nav:hover,

body.light
.topbar-calendar-nav:hover {
  border-color:
    #bcbcbc;

  background:
    #f0f0f0;
}


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

html[data-theme="light"]
.topbar-calendar-weekdays span,

body.light
.topbar-calendar-weekdays span {
  color:
    #444444;
}


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

html[data-theme="light"]
.topbar-calendar-day,

body.light
.topbar-calendar-day {
  color:
    #050505;
}


html[data-theme="light"]
.topbar-calendar-day:hover,

body.light
.topbar-calendar-day:hover {
  border-color:
    #d2d2d2;

  background:
    #f4f4f4;
}


html[data-theme="light"]
.topbar-calendar-day.is-outside,

body.light
.topbar-calendar-day.is-outside {
  color:
    #686868;
}


html[data-theme="light"]
.topbar-calendar-day.is-today,

body.light
.topbar-calendar-day.is-today {
  border-color:
    #a8a8a8;
}


html[data-theme="light"]
.topbar-calendar-day.is-selected,

body.light
.topbar-calendar-day.is-selected {
  border-color:
    #5d5196;

  background:
    #5d5196;

  color:
    #ffffff;
}


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

html[data-theme="light"]
.topbar-calendar-footer,

body.light
.topbar-calendar-footer {
  border-top-color:
    #d8d8d8;
}


html[data-theme="light"]
.topbar-calendar-selected span,

body.light
.topbar-calendar-selected span {
  color:
    #454545;
}


html[data-theme="light"]
.topbar-calendar-selected strong,

body.light
.topbar-calendar-selected strong {
  color:
    #050505;
}


/* =========================================================
   LIGHT TODAY BUTTON
   ========================================================= */

html[data-theme="light"]
.topbar-calendar-today,

body.light
.topbar-calendar-today {
  border-color:
    #d5d5d5;

  background:
    #f8f8f8;

  color:
    #050505;
}


html[data-theme="light"]
.topbar-calendar-today:hover,

body.light
.topbar-calendar-today:hover {
  border-color:
    #bcbcbc;

  background:
    #f0f0f0;
}


/* =========================================================
   LIGHT DATETIME BUTTON
   ========================================================= */

html[data-theme="light"]
.topbar-calendar-wrap.is-open
.topbar-datetime,

body.light
.topbar-calendar-wrap.is-open
.topbar-datetime {
  border-color:
    #bcbcbc;

  background:
    #f8f8f8;
}


/* =========================================================
   RESPONSIVE ≤ 1100
   ========================================================= */

@media (
  max-width: 1100px
) {

  .topbar-calendar-panel {
    width:
      290px;

    min-width:
      290px;
  }

}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (
  max-width: 900px
) {

  .topbar-datetime-chevron {
    display:
      none;
  }


  .topbar-calendar-panel {
    right:
      0;
  }

}


/* =========================================================
   RESPONSIVE ≤ 620
   ========================================================= */

@media (
  max-width: 620px
) {

  .topbar-calendar-wrap {
    display:
      block;
  }


  .topbar-calendar-wrap
  .topbar-datetime {
    width:
      34px;

    min-width:
      34px;

    height:
      34px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    padding:
      0;
  }


  .topbar-calendar-wrap
  .topbar-datetime-content {
    display:
      none;
  }


  .topbar-calendar-panel {
    position:
      fixed;

    top:
      58px;

    right:
      8px;

    width:
      min(
        300px,
        calc(100vw - 16px)
      );

    min-width:
      0;

    max-height:
      calc(100vh - 70px);

    overflow-y:
      auto;
  }

}


/* =========================================================
   RESPONSIVE ≤ 460
   ========================================================= */

@media (
  max-width: 460px
) {

  .topbar-calendar-panel {
    top:
      56px;

    right:
      7px;

    width:
      calc(100vw - 14px);

    padding:
      9px;

    border-radius:
      10px;
  }


  .topbar-calendar-grid,
  .topbar-calendar-weekdays {
    gap:
      2px;
  }


  .topbar-calendar-day {
    font-size:
      8px;
  }

}


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

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

  .topbar-calendar-panel {
    animation:
      none !important;
  }


  .topbar-calendar-panel *,
  .topbar-calendar-panel *::before,
  .topbar-calendar-panel *::after {
    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;
  }

}