:root {
  --pelusita-z: 10050;
  --pelusita-bg: rgba(10,14,28,.96);
  --pelusita-border: rgba(255,255,255,.12);
  --pelusita-text: #f8fafc;
  --pelusita-muted: #aeb9cc;
  --pelusita-cyan: #00eaff;
}

.pelusita-v2-character {
  position: fixed;
  right: 18px;
  bottom: 18px;

  width: 104px;
  height: 122px;

  border: 0;
  background: none;

  cursor: pointer;

  z-index: calc(var(--pelusita-z) + 5);

  filter:
    drop-shadow(
      0 16px 28px
      rgba(0,0,0,.3)
    );
}

.pelusita-v2-character img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  pointer-events: none;
}

.pelusita-v2-character[data-state="idle"] img {
  animation:
    pelusita-float
    3.6s
    ease-in-out
    infinite;
}

.pelusita-v2-character.guiding {
  left: var(--pelusita-x);
  top: var(--pelusita-y);

  right: auto;
  bottom: auto;
}

.pelusita-v2-panel {
  position: fixed;

  right: 132px;
  bottom: 24px;

  width: min(
    370px,
    calc(100vw - 170px)
  );

  max-height: 70vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

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

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(168,85,247,.18),
      transparent 35%
    ),
    var(--pelusita-bg);

  color:
    var(--pelusita-text);

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.45);

  backdrop-filter:
    blur(18px);

  z-index:
    calc(
      var(--pelusita-z) + 6
    );

  opacity: 0;

  transform:
    translateY(12px)
    scale(.98);

  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.pelusita-v2-panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pelusita-v2-header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: .7rem;

  padding:
    .85rem .9rem;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}

.pelusita-v2-header small {
  display: block;

  color:
    var(--pelusita-cyan);

  font-size:
    .68rem;

  font-weight:
    800;

  text-transform:
    uppercase;
}

.pelusita-v2-header strong {
  display: block;
  margin-top: .15rem;
}

.pelusita-v2-header-actions {
  display: flex;
  gap: .35rem;
}

.pelusita-v2-header-actions button {
  width: 36px;
  height: 36px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 10px;

  background:
    rgba(255,255,255,.05);

  color: inherit;

  cursor: pointer;
}

.pelusita-v2-body {
  padding: .9rem;

  overflow: auto;
}

#pelusitaV2Message {
  margin: 0;

  line-height: 1.5;

  white-space:
    pre-line;
}

#pelusitaV2Actions {
  display: grid;

  gap: .45rem;

  margin-top: .85rem;
}

.pelusita-v2-action {
  min-height: 40px;

  padding:
    .6rem .72rem;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.05);

  color: inherit;

  font: inherit;

  font-weight: 700;

  text-align: left;

  cursor: pointer;
}

.pelusita-v2-action:hover {
  border-color:
    rgba(0,234,255,.55);

  background:
    rgba(0,234,255,.08);
}

.pelusita-v2-action.primary {
  border-color:
    rgba(168,85,247,.5);

  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,.2),
      rgba(0,234,255,.08)
    );
}

.pelusita-v2-tutorial-nav {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: .45rem;

  padding:
    .7rem .8rem;

  border-top:
    1px solid
    rgba(255,255,255,.08);
}

.pelusita-v2-tutorial-nav[hidden] {
  display: none;
}

.pelusita-v2-tutorial-nav button {
  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:
    10px;

  padding:
    .5rem .6rem;

  background:
    rgba(255,255,255,.05);

  color: inherit;

  cursor: pointer;
}

#pelusitaV2Progress {
  text-align: center;
  align-self: center;
}

#pelusitaV2Exit {
  grid-column:
    1 / -1;
}

.pelusita-v2-settings {
  padding:
    0 .9rem .9rem;

  color:
    var(--pelusita-muted);

  font-size:
    .8rem;
}

.pelusita-v2-settings label {
  display: grid;

  gap: .35rem;

  margin-top: .5rem;
}

.pelusita-v2-settings select {
  min-height: 38px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.06);

  color:
    var(--pelusita-text);

  border:
    1px solid
    rgba(255,255,255,.1);
}

.pelusita-v2-spotlight {
  position: fixed;

  inset: 0;

  z-index:
    calc(
      var(--pelusita-z) + 1
    );

  pointer-events: none;

  opacity: 0;

  transition:
    opacity .18s ease;
}

.pelusita-v2-spotlight.active {
  opacity: 1;
}

.pelusita-v2-mask {
  position: fixed;

  background:
    rgba(3,7,18,.82);

  pointer-events: auto;
}

.pelusita-v2-ring {
  position: fixed;

  border:
    2px solid
    rgba(0,234,255,.9);

  border-radius:
    16px;

  box-shadow:
    0 0 25px
    rgba(0,234,255,.45);

  pointer-events: none;

  transition: none;
}

.pelusita-v2-target-pulse {
  position: relative;

  z-index:
    calc(
      var(--pelusita-z) + 3
    ) !important;

  animation:
    pelusita-target-pulse
    1.1s
    ease-in-out
    infinite !important;
}

@keyframes pelusita-float {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }
}

@keyframes pelusita-target-pulse {

  0%,
  100% {
    filter:
      brightness(1);

    box-shadow:
      0 0 0 0
      rgba(0,234,255,.15);
  }

  50% {
    filter:
      brightness(1.15);

    box-shadow:
      0 0 0 8px
      rgba(0,234,255,.18),
      0 0 30px
      rgba(0,234,255,.3);
  }
}

@media (max-width: 760px) {

  .pelusita-v2-character {
    width: 82px;
    height: 96px;

    right: 8px;
    bottom: 8px;
  }

  .pelusita-v2-panel {
    left: 10px;
    right: 10px;

    bottom: 108px;

    width: auto;

    max-height: 58vh;
  }
}

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

  .pelusita-v2-character img,
  .pelusita-v2-target-pulse,
  .pelusita-v2-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   PELUSITA V2 · SIDEBAR DOCK
   ========================================================== */

#sidebarPelusitaDock {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 118px;
  padding: 6px 0 8px;
  overflow: visible;
}

.pelusita-v2-character.docked {
  position: relative;

  left: auto;
  top: auto;
  right: auto;
  bottom: auto;

  width: 92px;
  height: 108px;

  margin: 0 auto;

  display: block;
}

.pelusita-v2-character.docked:hover {
  transform:
    translateY(-4px)
    scale(1.04);
}


/* ==========================================================
   PANEL CUANDO PELUSITA ESTÁ EN SIDEBAR
   ========================================================== */

.pelusita-v2-panel {
  left: 250px;
  right: auto;
  bottom: 24px;
}


/* ==========================================================
   BOTONES V2
   ========================================================== */

.pelusita-v2-action {
  position: relative;

  border:
    1px solid
    rgba(0,234,255,.16);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(168,85,247,.06)
    );

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

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.pelusita-v2-action:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(0,234,255,.6);

  background:
    linear-gradient(
      135deg,
      rgba(0,234,255,.11),
      rgba(168,85,247,.12)
    );

  box-shadow:
    0 8px 22px
    rgba(0,234,255,.07);
}

.pelusita-v2-action.primary {
  border-color:
    rgba(168,85,247,.55);

  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,.26),
      rgba(0,234,255,.12)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08),
    0 6px 20px
    rgba(168,85,247,.08);
}


/* botones de cabecera */

.pelusita-v2-header-actions button {
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.pelusita-v2-header-actions button:hover {
  transform:
    translateY(-1px)
    scale(1.04);

  border-color:
    rgba(0,234,255,.45);

  background:
    rgba(0,234,255,.09);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

  #sidebarPelusitaDock {
    min-height: 88px;
  }

  .pelusita-v2-character.docked {
    width: 72px;
    height: 84px;
  }

  .pelusita-v2-panel {
    left: 10px;
    right: 10px;
    bottom: 102px;
  }
}

/* ==========================================================
   PELUSITA V2 · PANEL DURANTE TUTORIAL
   ========================================================== */

.pelusita-v2-panel.guiding {
  position: fixed;

  left:
    var(
      --pelusita-panel-x
    ) !important;

  top:
    var(
      --pelusita-panel-y
    ) !important;

  right:
    auto !important;

  bottom:
    auto !important;

  z-index:
    calc(
      var(--pelusita-z) + 7
    );
}

@media (max-width: 760px) {

  .pelusita-v2-panel.guiding {
    left: 10px !important;
    right: 10px !important;

    top: auto !important;
    bottom: 102px !important;

    width: auto;
  }
}


/* Pelusita visible por encima del blackout durante tutoriales */
.pelusita-v2-character.tutorial-floating {
  position: fixed !important;
  z-index: 10080 !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

.pelusita-v2-character.tutorial-floating img {
  filter: none !important;
  opacity: 1 !important;
}



/* Pelusita por encima del blackout durante la guia */
.pelusita-v2-character.tutorial-floating {
  position: fixed !important;
  z-index: 10150 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: auto !important;
}

.pelusita-v2-character.tutorial-floating img {
  opacity: 1 !important;
  filter: none !important;
}



/* ==========================================================
   PELUSITA V2 · LIBERAR CLICKS FUERA DEL TUTORIAL
   ========================================================== */

.pelusita-v2-spotlight:not(.active) .pelusita-v2-mask {
  pointer-events: none !important;
}

.pelusita-v2-spotlight.active .pelusita-v2-mask {
  pointer-events: auto !important;
}



/* Pelusita dock final */
.sidebar-v2-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar-v2-spacer {
  display: none !important;
}

.sidebar-v2-staff {
  flex: 0 0 auto !important;
}

#sidebarPelusitaDock {
  position: relative;
  flex: 0 0 132px;
  min-height: 132px !important;
  height: 132px !important;
  padding: 0 !important;
  overflow: hidden;
}

.pelusita-v2-character.docked:not(.guiding):not(.tutorial-floating) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: 110px !important;
  height: 128px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.pelusita-v2-character.docked:not(.guiding):not(.tutorial-floating) img {
  position: absolute !important;
  width: 190% !important;
  height: 190% !important;
  max-width: none !important;
  max-height: none !important;
  left: -45% !important;
  top: -45% !important;
  object-fit: contain !important;
}

.pelusita-v2-character.guiding,
.pelusita-v2-character.tutorial-floating {
  width: 86px !important;
  height: 100px !important;
}

@media (max-width: 760px) {
  #sidebarPelusitaDock {
    flex-basis: 132px;
    min-height: 132px !important;
    height: 132px !important;
  }

  .pelusita-v2-character.guiding,
  .pelusita-v2-character.tutorial-floating {
    width: 72px !important;
    height: 84px !important;
  }
}

/* ==========================================================
   MOBILE SHELL CLEANUP 20261020
   Corrige drawer, Cursos, Pelusita y cabecera mobile.
   ========================================================== */

@property --classroom-mobile-topbar-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 54px;
}

@property --classroom-mobile-topbar-vpad {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}

@property --classroom-mobile-title-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 24px;
}

@property --classroom-mobile-eyebrow-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 14px;
}

@property --classroom-mobile-eyebrow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --classroom-mobile-action-size {
  syntax: "<length>";
  inherits: true;
  initial-value: 40px;
}

@media (max-width: 980px) {
  .sidebar-v2 {
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    gap: .42rem !important;
    padding-bottom: .55rem !important;
  }

  .sidebar-v2-brand {
    flex: 0 0 auto !important;
    margin-bottom: .1rem !important;
  }

  .sidebar-v2-brand-link {
    gap: .55rem !important;
  }

  .sidebar-v2-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .sidebar-v2-logo img {
    width: 31px !important;
    height: 31px !important;
  }

  .sidebar-v2-brand-text span {
    font-size: .82rem !important;
  }

  .sidebar-v2-brand-text small {
    font-size: .58rem !important;
    letter-spacing: .11em !important;
  }

  .sidebar-v2-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: .24rem !important;
    padding: .05rem .12rem .28rem 0 !important;
    overscroll-behavior: contain;
  }

  .sidebar-v2-link {
    min-height: 34px !important;
    padding: .42rem .58rem !important;
    border-radius: 11px !important;
    font-size: .82rem !important;
    gap: .58rem !important;
  }

  .sidebar-v2-submenu {
    padding-left: .85rem !important;
  }

  .sidebar-v2-submenu.open {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding-bottom: .18rem !important;
  }

  .sidebar-v2-subitem {
    min-height: 26px !important;
    padding: .26rem .46rem !important;
    font-size: .76rem !important;
    gap: .45rem !important;
  }

  .sidebar-v2-staff {
    flex: 0 0 auto !important;
  }

  .sidebar-v2-admin-btn {
    min-height: 34px !important;
    padding: .42rem .58rem !important;
    font-size: .8rem !important;
  }

  #sidebarPelusitaDock {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 82px !important;
    min-height: 82px !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(0,234,255,.08) !important;
    background:
      linear-gradient(to top, rgba(3,5,18,.92), rgba(3,5,18,.44), transparent) !important;
  }

  html[data-theme="light"] #sidebarPelusitaDock {
    background:
      linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.58), transparent) !important;
    border-top-color: rgba(79,70,229,.08) !important;
  }

  .pelusita-v2-character.docked:not(.guiding):not(.tutorial-floating) {
    bottom: -3px !important;
    width: 72px !important;
    height: 82px !important;
  }

  .pelusita-v2-character.docked:not(.guiding):not(.tutorial-floating) img {
    width: 158% !important;
    height: 158% !important;
    left: -29% !important;
    top: -29% !important;
  }

  .pelusita-v2-panel.open {
    z-index: 14050 !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(58dvh, 420px) !important;
    border-radius: 18px !important;
  }

  .pelusita-v2-panel.guiding.open {
    z-index: 14060 !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
  }

  .pelusita-v2-header {
    padding: .62rem .72rem !important;
  }

  .pelusita-v2-body {
    padding: .72rem !important;
  }

  .pelusita-v2-action {
    min-height: 36px !important;
    padding: .5rem .62rem !important;
    font-size: .88rem !important;
  }

  .topbar {
    --classroom-mobile-topbar-height: 54px;
    --classroom-mobile-topbar-vpad: 8px;
    --classroom-mobile-title-size: 24px;
    --classroom-mobile-eyebrow-height: 14px;
    --classroom-mobile-eyebrow-opacity: 1;
    --classroom-mobile-action-size: 40px;

    min-height: var(--classroom-mobile-topbar-height) !important;
    padding-top: var(--classroom-mobile-topbar-vpad) !important;
    padding-bottom: var(--classroom-mobile-topbar-vpad) !important;
  }

  .topbar h1 {
    font-size: var(--classroom-mobile-title-size) !important;
  }

  .topbar .eyebrow {
    max-height: var(--classroom-mobile-eyebrow-height) !important;
    opacity: var(--classroom-mobile-eyebrow-opacity);
    overflow: hidden !important;
    transition: opacity .12s linear !important;
  }

  .theme-toggle-icon,
  .sound-toggle,
  .sound-toggle-icon {
    width: var(--classroom-mobile-action-size) !important;
    height: var(--classroom-mobile-action-size) !important;
    min-height: var(--classroom-mobile-action-size) !important;
    flex-basis: var(--classroom-mobile-action-size) !important;
  }

  .user-menu-toggle {
    min-height: var(--classroom-mobile-action-size) !important;
  }

  .user-avatar {
    width: calc(var(--classroom-mobile-action-size) - 10px) !important;
    height: calc(var(--classroom-mobile-action-size) - 10px) !important;
    flex-basis: calc(var(--classroom-mobile-action-size) - 10px) !important;
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 980px) {
    .topbar {
      animation-name: classroom-mobile-topbar-compact;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 120px;
    }
  }
}

@keyframes classroom-mobile-topbar-compact {
  from {
    --classroom-mobile-topbar-height: 54px;
    --classroom-mobile-topbar-vpad: 8px;
    --classroom-mobile-title-size: 24px;
    --classroom-mobile-eyebrow-height: 14px;
    --classroom-mobile-eyebrow-opacity: 1;
    --classroom-mobile-action-size: 40px;
  }

  to {
    --classroom-mobile-topbar-height: 44px;
    --classroom-mobile-topbar-vpad: 3px;
    --classroom-mobile-title-size: 18px;
    --classroom-mobile-eyebrow-height: 0px;
    --classroom-mobile-eyebrow-opacity: 0;
    --classroom-mobile-action-size: 34px;
  }
}

@media (max-width: 520px) {
  .sidebar-v2 {
    padding-bottom: .45rem !important;
  }

  #sidebarPelusitaDock {
    flex-basis: 74px !important;
    min-height: 74px !important;
    height: 74px !important;
  }

  .pelusita-v2-character.docked:not(.guiding):not(.tutorial-floating) {
    width: 66px !important;
    height: 76px !important;
  }

  .pelusita-v2-panel.open {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-height: 62dvh !important;
  }
}