/* ClaseHub · estilo cristal y degradados.
   Se carga la última (después de theme-dark.css) para tener prioridad. Las
   reglas de modo oscuro de este archivo van con el prefijo html.theme-dark. */

:root {
  --g-blue: #2563eb;
  --g-indigo: #4f46e5;
  --g-violet: #7c3aed;
  --g-gradient: linear-gradient(135deg, #2563eb 0%, #5b5bf0 55%, #7c3aed 100%);
  --g-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(124, 58, 237, .14));
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-shadow: 0 8px 32px rgba(49, 46, 129, .1), 0 1px 2px rgba(15, 23, 42, .04);
  --glass-blur: blur(18px) saturate(170%);
  --primary: #3b54e0;
  --primary-dark: #2f43c4;
  --primary-soft: rgba(79, 70, 229, .12);
  --ring: rgba(79, 70, 229, .25);
  --accent-soft: rgba(79, 70, 229, .1);
  --surface: rgba(255, 255, 255, .66);
  --surface-2: rgba(255, 255, 255, .5);
  --surface-3: rgba(255, 255, 255, .8);
  --line: rgba(15, 23, 42, .08);
  --line-strong: rgba(15, 23, 42, .14);
  --muted: #55607a;
  --text-2: #2e3650;
}

/* ---------- Fondo degradado ---------- */

html,
body {
  min-height: 100%;
  background:
    radial-gradient(1000px 720px at -8% -12%, rgba(79, 124, 255, .55), transparent 62%),
    radial-gradient(950px 700px at 108% -8%, rgba(160, 110, 255, .5), transparent 62%),
    radial-gradient(900px 700px at 102% 108%, rgba(80, 190, 255, .42), transparent 62%),
    radial-gradient(820px 620px at -4% 104%, rgba(240, 150, 255, .36), transparent 62%),
    radial-gradient(700px 500px at 50% 50%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(135deg, #e3e9ff 0%, #efe6ff 100%);
  background-attachment: fixed;
}

.main,
.login-wrap {
  background: transparent;
}

/* ---------- Superficies de cristal ---------- */

.app-shell .sidebar,
.topbar,
.card,
.hero,
.quick-link,
.calendar-toolbar,
.day-agenda,
.next-class,
.chat-online,
.login-card {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.week-strip button,
.chip,
.hero-quickfacts span,
.empty-block,
.note,
.secondary,
.search-trigger,
.icon-button,
.bell,
.menu-button,
.calendar-control,
.calendar-jump,
.form-input,
.search,
.filter,
.code-input,
.name-choice,
.chat-composer textarea,
.presence-toggle,
.chat-photo-button {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, .55);
}

/* Campos y botones de elección: borde visible sobre el cristal */
.secondary,
.form-input,
.search,
.filter,
.code-input,
.name-choice,
.chat-composer textarea,
.calendar-jump,
.chip,
.week-strip button {
  border-color: rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .7);
}

.topbar-title > div {
  min-width: 0;
}

.topbar-title h1,
.topbar-title .eyebrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card:hover,
.quick-link:hover,
.next-class:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 14px 40px rgba(49, 46, 129, .14), 0 1px 2px rgba(15, 23, 42, .05);
}

/* Ventanas y menús emergentes: más opacos para que se lean bien */
.modal,
.notifications-panel,
.mention-box,
.search-modal {
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  box-shadow: 0 24px 70px rgba(49, 46, 129, .22);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

.modal-backdrop {
  background: rgba(30, 27, 75, .28);
}

/* ---------- Menú lateral flotante ---------- */

@media (min-width: 651px) {
  .app-shell .sidebar {
    top: 12px;
    height: calc(100vh - 24px);
    margin: 12px 0 12px 12px;
    border-radius: 22px;
  }

  .topbar {
    top: 12px;
    margin: 12px 12px 0 16px;
    border-radius: 18px;
  }

  .notifications-panel {
    top: 86px;
  }

  .chat-online {
    top: 96px;
  }
}

.app-shell .side-bottom {
  border-top-color: var(--line);
}

.app-shell .nav button {
  border-radius: 12px;
}

.app-shell .nav button:hover {
  background: rgba(255, 255, 255, .6);
}

.app-shell .nav button.active {
  background: var(--g-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .32);
}

.app-shell .nav button.active svg {
  color: #fff;
}

.app-shell .nav button.active .nav-badge {
  background: #fff;
  color: var(--g-indigo);
}

.app-shell .mini-profile {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, .55);
}

.sidebar-rail span {
  border-color: var(--glass-border);
  background: var(--glass-strong);
}

.sidebar-rail:hover span,
.sidebar-rail:focus-visible span {
  border-color: transparent;
  background: var(--g-gradient);
}

/* ---------- Barra superior ---------- */

.topbar {
  height: 62px;
}

/* ---------- Cabeceras ---------- */

.hero {
  border-radius: 24px;
}

.dashboard-hero {
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(124, 58, 237, .16), transparent 70%),
    radial-gradient(500px 220px at 0% 100%, rgba(37, 99, 235, .12), transparent 70%),
    var(--glass);
}

.dashboard-hero h2,
.hero:not(.dashboard-hero) h2 {
  background: linear-gradient(120deg, #1e2a78 0%, #3b54e0 55%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--g-indigo);
}

.next-class {
  border-radius: 18px;
}

/* ---------- Tarjetas ---------- */

.card {
  border-radius: 20px;
}

.quick-link {
  border-radius: 16px;
}

.quick-link-icon,
.note-icon,
.empty-icon,
.search-result-icon {
  background: var(--g-gradient-soft);
  color: var(--g-indigo);
}

.note {
  border-radius: 14px;
}

.note:hover {
  background: rgba(255, 255, 255, .8);
}

/* ---------- Botones ---------- */

.hero-action,
.primary {
  border-radius: 12px;
  background: var(--g-gradient);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-action:hover,
.primary:hover {
  background: var(--g-gradient);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(79, 70, 229, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-action--classroom {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  box-shadow: 0 8px 22px rgba(13, 148, 136, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-action--classroom:hover {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  box-shadow: 0 12px 28px rgba(13, 148, 136, .38);
}

.secondary {
  border-radius: 12px;
}

.secondary:hover {
  background: rgba(255, 255, 255, .85);
}

.link-btn {
  color: var(--g-indigo);
}

/* ---------- Chips, etiquetas y avatar ---------- */

.chip.active {
  border-color: transparent;
  background: var(--g-gradient);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}

.tag {
  background: rgba(79, 70, 229, .1);
  color: var(--g-indigo);
}

.avatar {
  background: var(--g-gradient);
}

.week-strip button.selected {
  border-color: transparent;
  background: var(--g-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}

.week-strip button.selected span,
.week-strip button.selected strong {
  color: #fff;
}

.week-strip button.selected i {
  background: #fff;
  color: var(--g-indigo);
}

.day-agenda {
  border-radius: 18px;
}

.day-agenda.today {
  border-color: rgba(79, 70, 229, .45);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12), var(--glass-shadow);
}

/* ---------- Formularios ---------- */

.form-input,
.search,
.filter,
.code-input,
.chat-composer textarea,
.calendar-jump {
  border-radius: 12px;
}

.form-input:focus,
.search:focus,
.filter:focus,
.code-input:focus,
.chat-composer textarea:focus {
  border-color: rgba(79, 70, 229, .55);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Chat ---------- */

.chat-head,
.chat-composer {
  background: transparent;
}

.chat-messages {
  background: rgba(255, 255, 255, .25);
}

.chat-bubble {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, .8);
}

.chat-message.own .chat-bubble {
  background: var(--g-gradient);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .25);
}

/* ---------- Tablas ---------- */

.table th {
  background: rgba(255, 255, 255, .5);
}

.table tbody tr:hover td {
  background: rgba(255, 255, 255, .45);
}

/* ---------- Pantalla de acceso ---------- */

.login-card {
  border-radius: 26px;
  background: rgba(255, 255, 255, .7);
}

.name-choice.selected {
  border-color: transparent;
  background: var(--g-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}

.name-choice.selected small {
  color: rgba(255, 255, 255, .85);
}

/* ---------- Avisos ---------- */

.toast {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(17, 20, 45, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Móvil ---------- */

@media (max-width: 650px) {
  .app-shell .sidebar {
    border-radius: 0 22px 22px 0;
    background: rgba(255, 255, 255, .82);
  }

  .topbar {
    top: 8px;
    margin: 8px 8px 0;
    border-radius: 16px;
  }

  .notifications-panel {
    top: 76px;
  }

  .hero {
    border-radius: 20px;
  }

  .topbar {
    padding: 0 10px;
  }

  .topbar h1 {
    font-size: 14.5px;
  }
}

/* ======================================================================
   Modo oscuro
   ====================================================================== */

html.theme-dark {
  --glass: rgba(20, 26, 52, .58);
  --glass-strong: rgba(22, 28, 56, .9);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-shadow: 0 10px 36px rgba(0, 0, 0, .35);
  --surface: rgba(24, 31, 60, .62);
  --surface-2: rgba(255, 255, 255, .04);
  --surface-3: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --primary: #6d7cff;
  --primary-dark: #5a68f0;
}

html.theme-dark,
html.theme-dark body {
  background:
    radial-gradient(1100px 760px at -5% -10%, rgba(56, 82, 200, .45), transparent 60%),
    radial-gradient(1000px 720px at 105% -5%, rgba(124, 58, 237, .38), transparent 60%),
    radial-gradient(900px 700px at 100% 105%, rgba(14, 116, 144, .3), transparent 60%),
    linear-gradient(135deg, #0a0f24 0%, #120b26 100%);
  background-attachment: fixed;
}

html.theme-dark .main,
html.theme-dark .login-wrap {
  background: transparent;
}

html.theme-dark .app-shell .sidebar,
html.theme-dark .topbar,
html.theme-dark .card,
html.theme-dark .hero,
html.theme-dark .hero:not(.dashboard-hero),
html.theme-dark .quick-link,
html.theme-dark .calendar-toolbar,
html.theme-dark .day-agenda,
html.theme-dark .next-class,
html.theme-dark .chat-online,
html.theme-dark .login-card {
  border-color: var(--glass-border);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

html.theme-dark .dashboard-hero {
  background:
    radial-gradient(600px 240px at 100% 0%, rgba(124, 58, 237, .25), transparent 70%),
    radial-gradient(500px 220px at 0% 100%, rgba(37, 99, 235, .18), transparent 70%),
    var(--glass);
}

html.theme-dark .week-strip button,
html.theme-dark .chip,
html.theme-dark .hero-quickfacts span,
html.theme-dark .empty-block,
html.theme-dark .note,
html.theme-dark .secondary,
html.theme-dark .search-trigger,
html.theme-dark .icon-button,
html.theme-dark .bell,
html.theme-dark .menu-button,
html.theme-dark .calendar-control,
html.theme-dark .calendar-jump,
html.theme-dark .form-input,
html.theme-dark .search,
html.theme-dark .filter,
html.theme-dark .code-input,
html.theme-dark .name-choice,
html.theme-dark .chat-composer textarea,
html.theme-dark .presence-toggle,
html.theme-dark .chat-photo-button,
html.theme-dark .app-shell .mini-profile,
html.theme-dark .chat-bubble {
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, .05);
}

html.theme-dark .secondary,
html.theme-dark .form-input,
html.theme-dark .search,
html.theme-dark .filter,
html.theme-dark .code-input,
html.theme-dark .name-choice,
html.theme-dark .chat-composer textarea,
html.theme-dark .calendar-jump,
html.theme-dark .chip,
html.theme-dark .week-strip button {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}

html.theme-dark .card:hover,
html.theme-dark .quick-link:hover,
html.theme-dark .next-class:hover {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(28, 36, 70, .7);
}

html.theme-dark .modal,
html.theme-dark .notifications-panel,
html.theme-dark .mention-box,
html.theme-dark .search-modal {
  border-color: var(--glass-border);
  background: var(--glass-strong);
}

html.theme-dark .modal-backdrop {
  background: rgba(3, 5, 18, .55);
}

html.theme-dark .dashboard-hero h2,
html.theme-dark .hero:not(.dashboard-hero) h2 {
  background: linear-gradient(120deg, #ffffff 0%, #b9c2ff 55%, #d6b8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html.theme-dark .eyebrow,
html.theme-dark .link-btn {
  color: #a5b4ff;
}

html.theme-dark .app-shell .nav button:hover {
  background: rgba(255, 255, 255, .06);
}

html.theme-dark .app-shell .nav button.active,
html.theme-dark .chip.active,
html.theme-dark .week-strip button.selected,
html.theme-dark .name-choice.selected,
html.theme-dark .chat-message.own .chat-bubble {
  border-color: transparent;
  background: var(--g-gradient);
  color: #fff;
}

html.theme-dark .tag {
  background: rgba(124, 140, 255, .16);
  color: #c7ceff;
}

html.theme-dark .quick-link-icon,
html.theme-dark .note-icon,
html.theme-dark .empty-icon,
html.theme-dark .search-result-icon {
  background: rgba(124, 140, 255, .16);
  color: #c7ceff;
}

html.theme-dark .chat-messages {
  background: rgba(0, 0, 0, .12);
}

html.theme-dark .table th {
  background: rgba(255, 255, 255, .04);
}

html.theme-dark .table tbody tr:hover td {
  background: rgba(255, 255, 255, .04);
}

html.theme-dark .sidebar-rail span {
  border-color: var(--glass-border);
  background: var(--glass-strong);
}

@media (max-width: 650px) {
  html.theme-dark .app-shell .sidebar {
    background: rgba(16, 20, 44, .92);
  }
}