/* =========================================
  AXIOMATH - SISTEMA DE VARIABLES GLOBALES
  Paletas corporativas, planes, servicios y estados
========================================= */
:root {
  /* ----------- Marca corporativa ----------- */
  --brand-primary: #003498;
  --brand-gradient-start: #0081E6;
  --brand-gradient-end: #5D00C3;

  /* ----------- Escala de blancos y negros ----------- */
  --white: #FFFFFF;
  --white-soft: #FAFAFA;

  --black: #000000;
  --black-soft: #1A1A1A;

  /* ----------- Escala de grises ----------- */
  --gray-50:  #F6F8FB;
  --gray-100: #EEF1F7;
  --gray-200: #DDE2EB;
  --gray-300: #C9CFDB;
  --gray-400: #AAB2C1;
  --gray-500: #8891A2;
  --gray-600: #666F80;
  --gray-700: #4A5260;
  --gray-800: #323742;
  --gray-900: #1E2127;

  /* ----------- Superficies y fondos ----------- */
  --surface-0: var(--white);
  --surface-1: var(--gray-50);
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);

  /* ----------- Texto ----------- */
  --text-strong: var(--gray-900);
  --text-default: var(--gray-700);
  --text-soft: var(--gray-500);
  --text-muted: var(--gray-400);

  /* ----------- Bordes ----------- */
  --border-soft: var(--gray-300);
  --border-medium: var(--gray-400);
  --border-strong: var(--gray-600);

  /* ----------- Sombras ----------- */
  --shadow-0: 0px 2px 4px rgba(0,0,0,0.05);
  --shadow-1: 0px 4px 8px rgba(0,0,0,0.08);
  --shadow-2: 0px 8px 16px rgba(0,0,0,0.12);

  /* ----------- Tablas ----------- */
  --table-accent: var(--brand-gradient-start);
  --table-accent-strong: var(--brand-primary);
  --table-border: color-mix(in srgb, var(--table-accent-strong), var(--border-soft) 65%);
  --table-header-bg: color-mix(in srgb, var(--table-accent), var(--surface-0) 90%);
  --table-row-bg: var(--surface-0);
  --table-row-alt: color-mix(in srgb, var(--table-accent), var(--surface-0) 95%);
  --table-row-hover: color-mix(in srgb, var(--table-accent), var(--surface-0) 85%);
  --table-caption: var(--text-soft);

  /* =========================================
    PLANES
  ========================================= */

  /* ----------- Plan Duo ----------- */
  --duo-main: #2b1381;
  --duo-accent: #8A33E5;
  --duo-soft: #ECDDFF;

  /* ----------- Plan Suite ----------- */
  --suite-main: #2b1381;
  --suite-accent: #8A33E5;
  --suite-soft: #ECDDFF;

  /* =========================================
    SERVICIOS AXIOMATH
  ========================================= */

  /* Matemática */
  --math-main: #003498;
  --math-accent: #00B3FF;
  --math-soft: #DDF3FF;

  /* Lenguaje */
  --lang-main: #d86314;
  --lang-accent: #FF9A4A;
  --lang-soft: #FFE7D3;

  /* SIMCE */
  --simce-main: #4a9614;
  --simce-accent: #70D32A;
  --simce-soft: #E6FAD9;

  /* PAES */
  --paes-main: #4a9614;
  --paes-accent: #70D32A;
  --paes-soft: #E6FAD9;

  /* =========================================
    ESTADOS (funcionalidad global)
  ========================================= */

  --success: #3CB371;
  --warning: #F3C63C;
  --error: #E64545;
  --info: #47B0FF;

  /* ----------- Popups ----------- */
  --popup-accent-base: var(--brand-primary);
  --popup-accent-strong-base: var(--brand-gradient-start);
  --popup-accent: var(--popup-accent-base);
  --popup-accent-strong: var(--popup-accent-strong-base);

  /* ----------- Avatar ----------- */
  --avatar-color: var(--brand-primary);

  /* ----------- Tooltip e iconos de ayuda ----------- */
  --tooltip-bg: var(--surface-2);
  --tooltip-border: var(--border-soft);
  --tooltip-color: var(--text-soft);
  --logo-info-icon-color: var(--surface-0);
  --logo-info-icon-bg: color-mix(in srgb, var(--surface-0), transparent 80%);
  --logo-info-icon-border: color-mix(in srgb, var(--surface-0), transparent 35%);
  --logo-info-tooltip-bg: var(--surface-0);
  --logo-info-tooltip-border: var(--border-soft);
  --logo-info-tooltip-color: var(--text-strong);
  --layout-header-height: 3.5rem;
  --layout-sidebar-width: 16rem;
  --layout-sidebar-collapsed-width: 4.5rem;
  --layout-shell-padding: clamp(1rem, 2vw, 2rem);
}

/* Modo oscuro local */
:root[data-color-scheme="night"] {
  color-scheme: dark;
  --surface-0: #3d4046;
  --surface-1: #434851;
  --surface-2: #4a505c;
  --surface-3: #535a68;
  --text-strong: #dee0e2;
  --text-default: #c9ceda;
  --text-soft: #a7b0bd;
  --text-muted: #8790a1;
  --border-soft: #575f6e;
  --border-medium: #616b7c;
  --border-strong: #768094;
  --shadow-0: 0px 2px 6px rgba(0, 0, 0, 0.34);
  --shadow-1: 0px 6px 12px rgba(0, 0, 0, 0.44);
  --shadow-2: 0px 12px 20px rgba(0, 0, 0, 0.54);
}

:root[data-color-scheme="reading"] {
  color-scheme: light;
  --surface-0: #f7f2e7;
  --surface-1: #f0e9dc;
  --surface-2: #e6ddcf;
  --surface-3: #ded3c2;
  --text-strong: #2e2a24;
  --text-default: #4a433a;
  --text-soft: #6b6156;
  --text-muted: #8f8376;
  --border-soft: #d5c9b8;
  --border-medium: #c7baa8;
  --border-strong: #b3a694;
  --shadow-0: 0px 2px 6px rgba(40, 32, 24, 0.08);
  --shadow-1: 0px 6px 12px rgba(40, 32, 24, 0.12);
  --shadow-2: 0px 12px 20px rgba(40, 32, 24, 0.16);
}

body[data-color-scheme] {
  background-color: var(--surface-0);
  color: var(--text-strong);
}

:root[data-color-scheme] header,
:root[data-color-scheme] .app-header,
:root[data-color-scheme] .dashboard-header,
:root[data-color-scheme] .sidebar,
:root[data-color-scheme] .user-menu {
  color-scheme: light;
  --surface-0: var(--white);
  --surface-1: var(--gray-50);
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);
  --text-strong: var(--gray-900);
  --text-default: var(--gray-700);
  --text-soft: var(--gray-500);
  --text-muted: var(--gray-400);
  --border-soft: var(--gray-300);
  --border-medium: var(--gray-400);
  --border-strong: var(--gray-600);
  --shadow-0: 0px 2px 4px rgba(0,0,0,0.05);
  --shadow-1: 0px 4px 8px rgba(0,0,0,0.08);
  --shadow-2: 0px 8px 16px rgba(0,0,0,0.12);
}

/* =========================================
= Animaciones
========================================= */
@keyframes popupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideBottom {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popupSlideIn {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes bounceAlert {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-20%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}


.content {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--layout-header-height));
  margin-left: var(--layout-sidebar-offset);
  margin-top: var(--layout-header-height);
  overflow-y: auto;
  text-align: center;
  padding: var(--layout-shell-padding);
  gap: 1rem;
  transition: margin-left .38s cubic-bezier(.22, 1, .36, 1), padding .32s ease;
}

.content.collapsed {
  margin-left: var(--layout-sidebar-collapsed-width);
}

.app-header {
  align-items: center;
  animation: fadeIn 1s ease-out;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  color: var(--surface-0);
  display: flex;
  justify-content: space-between;
  min-height: var(--layout-header-height);
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: padding .38s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease;
}

.dashboard-header {
  background: linear-gradient(to left, var(--brand-primary), var(--brand-gradient-start));
  gap: 1rem;
  overflow: visible;
  padding-left: calc(var(--layout-sidebar-offset) + max(var(--layout-shell-padding), env(safe-area-inset-left)));
  padding-right: max(var(--layout-shell-padding), env(safe-area-inset-right));
  width: 100%;
  box-sizing: border-box;
}

.dashboard-header__brand,
.dashboard-header__actions {
  align-items: center;
  display: flex;
  gap: .75rem;
  min-width: 0;
}

.dashboard-header__brand {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-header__actions {
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.dashboard-header__logo-slot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.dashboard-header .menu-toggle {
  align-items: center;
  background: color-mix(in srgb, var(--surface-0), transparent 82%);
  border: 1px solid color-mix(in srgb, var(--surface-0), transparent 55%);
  border-radius: 999px;
  color: var(--surface-0);
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
  width: 40px;
}

.dashboard-header .menu-toggle .icon-image {
  display: block;
  height: 20px;
  width: 20px;
}

.dashboard-header .menu-toggle:hover {
  background: color-mix(in srgb, var(--surface-0), transparent 72%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.dashboard-header .menu-toggle:focus-visible {
  outline: 2px solid var(--surface-0);
  outline-offset: 2px;
}

.dashboard-header .logo,
.logo-dropdown {
  align-items: center;
  display: flex;
  gap: 1rem;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.dashboard-header .logo img,
.logo-button img {
  height: auto;
  max-height: 48px;
  max-width: min(180px, 32vw);
  width: auto;
  object-fit: contain;
}

.logo-dropdown {
  position: relative;
  gap: 0.45rem;
  z-index: 2;
}

.logo-button {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
  padding: 0;
  transition: transform .24s ease;
}

.logo-button__hint {
  align-items: center;
  background: color-mix(in srgb, var(--surface-0), transparent 82%);
  border: 1px solid color-mix(in srgb, var(--surface-0), transparent 55%);
  border-radius: 999px;
  color: var(--surface-0);
  display: inline-flex;
  font-size: 0.65rem;
  font-weight: 600;
  gap: 0.2rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  transition: background .24s ease, transform .24s ease, box-shadow .24s ease;
  white-space: nowrap;
}

.logo-button__caret {
  border: 0.32rem solid transparent;
  border-top-color: currentColor;
  display: inline-block;
  height: 0;
  transform: translateY(0.1rem);
  width: 0;
}

.logo-button:hover .logo-button__hint,
.logo-button:focus-visible .logo-button__hint {
  background: color-mix(in srgb, var(--surface-0), transparent 70%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.logo-dropdown-menu {
  display: flex;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  background: var(--surface-2);
  border-radius: 0.8rem;
  padding: 0.8rem;
  box-shadow: var(--shadow-1);
  gap: 0.6rem;
  flex-direction: column;
  z-index: 1002;
  width: max-content;
  min-width: min(220px, calc(100vw - 2rem));
  max-width: min(320px, calc(100vw - 2rem));
  box-sizing: border-box;
  border: 1px solid var(--border-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.3rem) scale(.98);
  transform-origin: top left;
  transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s ease;
  visibility: hidden;
}

.logo-dropdown.is-open .logo-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.logo-dropdown-item {
  width: 100%;
  max-width: 100%;
  max-height: 36px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}

.header-notifications {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-notifications__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--surface-0), transparent 60%);
  background: color-mix(in srgb, var(--surface-0), transparent 82%);
  color: var(--surface-0);
  cursor: pointer;
  transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}

.header-notifications__button:hover {
  background: color-mix(in srgb, var(--surface-0), transparent 70%);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

.header-notifications__button:focus-visible {
  outline: 2px solid var(--surface-0);
  outline-offset: 2px;
}

.header-notifications__icon .icon-image {
  width: 20px;
  height: 20px;
  display: block;
}

.header-notifications__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error);
  color: var(--surface-0);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-notifications__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  left: auto;
  transform: translateY(-0.3rem) scale(.985);
  width: min(360px, calc(100vw - 2rem));
  background: var(--surface-2);
  color: var(--text-strong);
  border-radius: 1rem;
  box-shadow: var(--shadow-1);
  padding: 0.9rem;
  display: block;
  z-index: 1005;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  opacity: 0;
  pointer-events: none;
  transform-origin: top right;
  transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s ease;
  visibility: hidden;
}

.header-notifications.is-open .header-notifications__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.header-notifications__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.header-notifications__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}

.header-notifications__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.header-notifications__item {
  padding: 0.6rem 0.7rem;
  border-radius: 0.8rem;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.header-notifications__item.is-unread {
  border-left: 4px solid var(--brand-gradient-start);
  background: color-mix(in srgb, var(--surface-2), var(--white) 35%);
}

.header-notifications__item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.header-notifications__item-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.header-notifications__item-header span {
  font-size: 10px;
  color: var(--text-soft);
  white-space: nowrap;
}

.header-notifications__delete {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.header-notifications__delete .icon-image {
  width: 13px;
  height: 13px;
  display: block;
}

.header-notifications__delete:hover {
  color: var(--error);
  background: color-mix(in srgb, var(--error), transparent 88%);
}

.header-notifications__item p {
  margin: 0;
  color: var(--text-strong);
  font-weight: 500;
}

.header-notifications__actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.header-notifications__actions .default-button:not(.ax-button) {
  min-width: auto;
  padding: 0.35rem 0.55rem;
  font-size: 0.72rem;
}

.header-notifications__actions .default-button:not(.ax-button) span {
  font-size: 0.72rem;
}

.header-notifications__empty {
  margin: 0;
  color: var(--text-soft);
  text-align: center;
}

.disabled {
  background: var(--gray-400) !important;
  color: var(--surface-0) !important;
  cursor: not-allowed !important;
}

/* =========================================
= Sidebar / Layout (base)
========================================= */
body {
  --layout-sidebar-offset: var(--layout-sidebar-width);
}

body.sidebar-collapsed {
  --layout-sidebar-offset: var(--layout-sidebar-collapsed-width);
}

body.sidebar-open {
  overflow: hidden;  overscroll-behavior: none;
}

.sidebar {
  align-items: center;
  animation: slideIn 1s ease-out;
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-gradient-start));
  border-radius: 0 2rem 0 0;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
  color: var(--surface-0);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  inset: 0 auto 0 0;
  min-height: 100dvh;
  overflow: visible;
  padding: 1rem;
  position: fixed;
  width: var(--layout-sidebar-width);
  z-index: 1001;
}

.sidebar :is(h5, h6) {
  margin: 0;
}

.sidebar[data-collapsible] {
  transition: width .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}

.sidebar[data-collapsible].is-collapsed {
  width: var(--layout-sidebar-collapsed-width);
}

.sidebar,
.sidebar .menu .menu-submenu,
.header-notifications__panel {
  scrollbar-color: color-mix(in srgb, var(--surface-0), transparent 52%) transparent;
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar,
.sidebar .menu .menu-submenu::-webkit-scrollbar,
.header-notifications__panel::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar .menu .menu-submenu::-webkit-scrollbar-thumb,
.header-notifications__panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--surface-0), transparent 55%);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.sidebar img#establishmentlogo {
  background-color: var(--surface-0);
  border-radius: 50%;
  height: calc(100% - .3rem - 2rem);
  width: calc(100% - .3rem - 2rem);
  padding: .3rem;
}

.sidebar.is-collapsed img#establishmentlogo {
  height: calc(100% - .1rem - .5rem);
  width: calc(100% - .1rem - .5rem);
  padding: .1rem;
}

.sidebar-backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  inset: var(--layout-header-height) 0 0 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .32s ease, backdrop-filter .32s ease;
  z-index: 1000;
}

.sidebar-backdrop[hidden] {
  display: none;
}

body.sidebar-open .sidebar-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-sheet-handle {
  display: none;
}

.sidebar .toggle {
  align-items: center;
  background: color-mix(in srgb, var(--surface-0), transparent 82%);
  border: 1px solid color-mix(in srgb, var(--surface-0), transparent 58%);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  display: none;
  height: 2rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 5rem;
  right: 1rem;
  transition: transform .26s ease, background .24s ease, box-shadow .24s ease;
  width: 2rem;
}

.sidebar:hover .toggle,
.sidebar .toggle:focus-visible {
  display: flex;
}

.sidebar .toggle:hover {
  background: color-mix(in srgb, var(--surface-0), transparent 70%);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.22);
  transform: translateY(-1px);
}

.hamburger {
  display: block;
  height: 20px;
  width: 20px;
}

.sidebar.is-collapsed .toggle {
  position: relative;
  top: 0;
  right: 0;
}

.sidebar .menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .25rem;
  height: auto;
  justify-content: flex-start;
  margin: 0 -1rem;
  min-height: 0;
  padding: 0.15rem 0 0;
  width: calc(100% + 2rem);
}

.sidebar .menu .menu-item {
  list-style: none;
  position: relative;
}

.sidebar .menu :is(a, .menu-button) {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 1.5rem;
  color: var(--surface-0);
  cursor: pointer;
  display: flex;
  gap: .55rem;
  justify-content: start;
  left: 1rem;
  min-height: 2.35rem;
  padding: .32rem 1.12rem;
  position: relative;
  text-align: left;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), filter .26s ease;
  width: calc(100% - 1rem);
  box-sizing: border-box;
}

.sidebar .menu .menu-button {
  font: inherit;
}

.sidebar .menu :is(a, .menu-button) h5 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .menu :is(a, .menu-button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surface-0), transparent 12%);
  outline-offset: 2px;
}

.sidebar.is-collapsed .menu :is(a, .menu-button) {
  justify-content: center;
  left: 0;
  padding-inline: 0;
  width: 100%;
}

.sidebar.is-collapsed .menu :is(a, .menu-button) h5 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sidebar .menu :is(a, .menu-button)::after {
  background: var(--brand-gradient-start);
  border-radius: 2rem 0 0 2rem;
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  width: 100%;
  z-index: -1;
}

.sidebar .menu a.active::after {
  background: var(--brand-gradient-start);
}

.sidebar .menu :is(a, .menu-button):hover,
.sidebar .menu a.active,
.sidebar .menu .menu-item.is-open > .menu-button,
.sidebar .menu .menu-item.is-active-ancestor > .menu-button {
  filter: brightness(1.04);
}

.sidebar .menu :is(a, .menu-button):hover::after,
.sidebar .menu a.active::after,
.sidebar .menu .menu-item.is-open > .menu-button::after,
.sidebar .menu .menu-item.is-active-ancestor > .menu-button::after {
  transform: scaleX(1);
}

.sidebar.is-collapsed .menu :is(a, .menu-button):hover,
.sidebar.is-collapsed .menu a.active,
.sidebar.is-collapsed .menu .menu-item.is-open > .menu-button,
.sidebar.is-collapsed .menu .menu-item.is-active-ancestor > .menu-button {
  transform: none;
}

.menu li img {
  height: 16px;
  flex-shrink: 0;
  width: 16px;
}

/* =========================================
= Submenu del sidebar
========================================= */
.sidebar .menu .menu-item.has-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0.75rem;
  height: 100%;
}

.sidebar .menu .submenu-caret {
  position: absolute;
  right: 1rem;
  font-size: 0.9rem;
  opacity: 0.75;
  transition: transform .28s ease, opacity .24s ease;
}

.sidebar .menu .menu-item.is-open > .menu-button .submenu-caret {
  opacity: 1;
  transform: rotate(90deg);
}

.sidebar .menu .menu-submenu {
  position: absolute;
  top: 50%;
  left: 100%;
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-gradient-start));
  border-radius: 0 1rem 1rem 0;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  min-width: 12.75rem;
  opacity: 0;
  padding: 0.4rem;
  pointer-events: none;
  transform: translate3d(-0.35rem, -50%, 0) scale(.98);
  transform-origin: left center;
  transition: opacity .26s ease, transform .34s cubic-bezier(.22, 1, .36, 1), visibility .34s ease;
  visibility: hidden;
  z-index: 3;
}

.sidebar .menu .menu-item.has-submenu:hover > .menu-submenu,
.sidebar .menu .menu-item.has-submenu:focus-within > .menu-submenu,
.sidebar .menu .menu-item.has-submenu.is-open > .menu-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, -50%, 0) scale(1);
  visibility: visible;
}

.sidebar .menu .menu-submenu a {
  align-items: center;
  border-radius: 1rem;
  color: var(--surface-0);
  display: flex;
  gap: 0.5rem;
  justify-content: start;
  left: 0;
  padding: 0.28rem 0.62rem;
  position: relative;
  transition: transform .22s ease, filter .22s ease;
  width: 100%;
  box-sizing: border-box;
}

.sidebar .menu .menu-submenu a::after {
  border-radius: 0 2rem 2rem 0;
  background: var(--brand-gradient-start);
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  left: -0.35rem;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  width: 100%;
  z-index: -1;
}

.sidebar .menu .menu-submenu a.active::after {
  background: var(--brand-gradient-start);
}

.sidebar .menu .menu-submenu a:hover,
.sidebar .menu .menu-submenu a:focus-visible {
  filter: brightness(1.05);
  transform: translateX(.12rem);
}

.sidebar .menu .menu-submenu a:hover::after,
.sidebar .menu .menu-submenu a.active::after {
  transform: scaleX(1);
}

.sidebar.is-collapsed .menu .submenu-caret {
  display: none;
}

.sidebar.is-collapsed .menu .menu-submenu {
  min-width: 12.75rem;
  width: max-content;
}

.sidebar.is-collapsed .menu .menu-submenu a {
  justify-content: flex-start;
  padding: 0.35rem 0.65rem;
}

.sidebar.is-collapsed .menu .menu-submenu h5 {
  clip: auto;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  position: static;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}

/* =========================================
= Tarjeta establecimiento / Usuario
========================================= */
.establishment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.establishment .info h3 {
  color: var(--surface-0);
  font-weight: 700;
}

.establishment .logo {
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  width: 120px;
  height: 120px;
  position: relative;
}

.establishment .logo::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--surface-0), transparent 70%) 0%, transparent 72%);
  border-radius: 50%;
  content: "";
  inset: -0.75rem;
  opacity: 0.7;
  position: absolute;
  z-index: -1;
}

.sidebar.is-collapsed .establishment .logo {
  width: 40px;
  height: 40px;
}

.sidebar.is-collapsed .establishment .info {
  display: none;
}

.user-menu .logo {
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  padding: .2rem;
  position: relative;
}

.establishment .info {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
  width: 100%;
}

.establishment .info h5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  display: block;
  color: var(--avatar-color);
  --avatar-ink: var(--surface-0);
  --avatar-rim: var(--white);
  --avatar-shadow: rgba(0, 0, 0, 0.2);
}

.sidebar .user-avatar {
  --avatar-bg-start: var(--surface-0);
  --avatar-bg-end: var(--surface-2);
  --avatar-ink: var(--avatar-color);
  --avatar-rim: var(--surface-0);
  --avatar-shadow: transparent;
}

.user-info {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  width: 100%;
}

.user-info:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surface-0), transparent 10%);
  outline-offset: 3px;
}

.sidebar.is-collapsed .user-info {
  justify-content: center;
  padding: 0;
  width: 100%;
}

.sidebar.is-collapsed .user-info .user-info-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.user-info.hidden {
  display: none;
}

.user-info .user-avatar {
  border-radius: 50%;
  height: 32px;
  width: 32px;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  text-align: start;
}

.user-info-text :is(h5, h6) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================
= Menú de usuario
========================================= */
.user-menu {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  box-shadow: var(--shadow-1);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  text-align: center;
  left: 1rem;
  top: 4rem;
  z-index: 1002;
  padding: .5rem;
  gap: .5rem;
  width: calc(14rem - 1rem);
  color: var(--brand-primary);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem) scale(.985);
  transform-origin: top left;
  transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.user-menu[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.user-menu[data-anchor="side"] {
  transform-origin: left center;
}

.logo .user-avatar {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  margin: .2rem;
}

.user-menu ul {
  display: flex;
  flex-direction: column;
  width: calc(100% - 1rem);
  padding: 0 .5rem;
  gap: .5rem;
}

.user-menu ul li {
  background-color: var(--surface-0);
  border-radius: 1rem;
}

.user-menu ul li:last-child {
  border-bottom: none;
}

.user-menu ul li :is(a, button) {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  font: inherit;
  padding: .3rem 1rem;
  transition: all .3s ease;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary);
  gap: 1rem;
  text-align: left;
  width: 100%;
}

.user-menu ul li :is(a, button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary), transparent 25%);
  outline-offset: 2px;
}

.user-menu ul li .user-menu-icon {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0) saturate(100%) invert(17%) sepia(96%) saturate(3722%) hue-rotate(216deg) brightness(81%) contrast(108%);
}

.user-menu::before {
  content: "";
  position: absolute;
  top: -.4rem;
  left: .75rem;
  width: 0;
  height: 0;
  border-left: 8px solid transparent; 
  border-right: 8px solid transparent;
  border-bottom: 11px solid var(--surface-2);
}

.user-menu[data-anchor="side"]::before {
  border-bottom: 8px solid transparent;
  border-left: 0;
  border-right: 11px solid var(--surface-2);
  border-top: 8px solid transparent;
  left: -.55rem;
  top: calc(50% - .5rem);
}

/* =========================================
= Icono de información / Tooltip
========================================= */
.info-icon {
  align-items: center;
  background: var(--info-icon-bg, transparent);
  border: 1px solid var(--info-icon-border, currentColor);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--surface-0);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 15px;
  width: 15px;
  justify-content: center;
  line-height: 1;
  padding: 8px;
  text-align: center;
  transition: all .3s ease;
  position: relative;
}

.info-icon:focus-visible,
.has-tooltip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--table-accent-strong), var(--surface-0) 35%);
  outline-offset: 2px;
}

.has-tooltip[data-tooltip] {
  position: relative;
}

.info-icon[data-tooltip]:is(:hover, :focus-visible)::after,
.has-tooltip[data-tooltip]:is(:hover, :focus-visible)::after {
  border-radius: 1rem;
  color: var(--tooltip-color, var(--text-soft));
  background: var(--tooltip-bg, var(--surface-2));
  border: 1px solid var(--tooltip-border, var(--border-soft));
  content: attr(data-tooltip);
  padding: .5rem .8rem;
  position: absolute !important;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  width: max-content;
  max-width: 200px;
  white-space: pre-line;
  z-index: 1003 !important;
  pointer-events: none;
}

.dashboard-header .info-icon[data-tooltip]:is(:hover, :focus-visible)::after {
  left: 0;
  max-width: min(20rem, calc(100vw - 2rem));
  transform: translate(0, 10px);
}

/* =========================================
= Popups
========================================= */
.popup.hidden {
  opacity: 0;
  pointer-events: none;
}

.popup {
  --popup-accent-local: var(--popup-accent, var(--brand-primary));
  --popup-accent-strong-local: var(--popup-accent-strong, var(--brand-gradient-start));
  align-items: center;
  animation: popupFadeIn 0.35s ease-out forwards;
  background:
    radial-gradient(1200px 520px at 50% -10%, color-mix(in srgb, var(--popup-accent-strong-local), transparent 82%) 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 110%, color-mix(in srgb, var(--popup-accent-local), transparent 88%) 0%, transparent 55%),
    color-mix(in srgb, var(--black), transparent 55%);
  backdrop-filter: blur(6px);
  display: flex;
  height: calc(100% - 2rem);
  justify-content: center;
  left: 0;
  padding: 1rem;
  position: fixed;
  top: 0;
  width: calc(100% - 2rem);
  z-index: 1300;
}

.popup-content {
  --popup-border: color-mix(in srgb, var(--popup-accent-local), var(--surface-0) 85%);
  --popup-shadow: 0 30px 70px rgba(15, 23, 42, 0.2);
  align-items: stretch;
  animation: popupSlideIn 0.5s ease-out forwards;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--popup-accent-strong-local), transparent 20%) 0%, transparent 70%) top/100% 4px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--popup-accent-strong-local), var(--surface-0) 95%) 0%, var(--surface-0) 45%, color-mix(in srgb, var(--surface-0), var(--surface-2) 35%) 100%);
  border: 1px solid var(--popup-border);
  border-radius: 1rem;
  box-shadow: var(--popup-shadow);
  color: var(--text-strong);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: min(85vh, 920px);
  opacity: 0;
  overflow: auto;
  padding: 2rem;
  position: relative;
  text-align: left;
  transform: translateY(-12px);
  width: min(720px, 92vw);
}

.popup-content--compact {
  width: min(640px, 92vw);
  padding: 1rem 1rem;
}

.popup-content--wide {
  width: min(1100px, 95vw);
  max-height: 88vh;
  padding: 2rem;
}

.popup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.popup-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
}

.popup-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.popup-form .form-field.full {
  grid-column: 1 / -1;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

#popup-demo {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--warning) 45%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--warning) 35%);
}

#popup-demo .popup-content {
  align-items: center;
  text-align: center;
  width: min(520px, 92vw);
}

#mobile-app-popup .popup-content,
#training-dashboard-popup .popup-content,
#formation-dashboard-popup .popup-content,
#timer-popup .popup-content {
  align-items: center;
  text-align: center;
}

#edit-profile-popup {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--brand-gradient-end) 25%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--brand-gradient-end) 30%);
}

#accessibility-popup {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--info) 35%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--info) 30%);
}

#edit-profile-popup .popup-content {
  border-radius: 1.5rem;
  gap: 1.5rem;
  width: min(92vw, 860px);
  max-height: 88vh;
  padding: 1.75rem 2rem;
}

#note-modal {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--info) 35%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--info) 30%);
}

#bulk-modal {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--brand-gradient-end) 40%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--brand-gradient-end) 40%);
}

#history-modal {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--brand-gradient-start) 20%);
  --popup-accent-strong: var(--popup-accent-strong-base);
}

#add-student-popup {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--success) 35%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--success) 30%);
}

#move-students-popup {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--info) 35%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--info) 30%);
}

#eventModal {
  --popup-accent: color-mix(in srgb, var(--popup-accent-base), var(--brand-gradient-end) 30%);
  --popup-accent-strong: color-mix(in srgb, var(--popup-accent-strong-base), var(--brand-gradient-end) 35%);
}

/* =========================================
= Video
========================================= */

.video-container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 360px;
  width: 640px;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  border-radius: 1rem;
  box-shadow: var(--shadow-1);
  transition: all .3s ease;
  width: 100%;
  height: 100%;
}

/* =========================================
= Botón de cierre
========================================= */
.close-popup,
.close-popup--inline {
  align-items: center;
  appearance: none;
  background: color-mix(in srgb, var(--surface-0), var(--surface-2) 70%);
  border: 1px solid color-mix(in srgb, var(--popup-accent-local, var(--popup-accent, var(--brand-primary))), var(--surface-2) 70%);
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  font-size: 22px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all .3s ease;
  width: 38px;
}

button.close-popup,
button.close-popup--inline {
  font-size: 22px !important;
}

.close-popup {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.close-popup--inline {
  flex-shrink: 0;
}

.close-popup:hover,
.close-popup--inline:hover {
  background: var(--popup-accent-local, var(--popup-accent, var(--brand-primary)));
  color: var(--surface-0);
  transform: translateY(-1px);
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.18);
}

.close-popup:focus-visible,
.close-popup--inline:focus-visible {
  outline: 2px solid var(--popup-accent-strong-local, var(--popup-accent-strong, var(--brand-gradient-start)));
  outline-offset: 2px;
}

/* =========================================
= Iconos / Alertas
========================================= */
.alertPopup {
  animation: bounceAlert 1s ease-in-out infinite;
  height: 44px;
  width: 44px;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.2));
}

/* =========================================
= Edición de perfil
========================================= */
.edit-profile {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: auto;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.edit-profile-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.edit-profile-header h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.edit-profile-subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.headerphoto {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.headerphoto h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-strong);
}

.headerphoto p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.edit-photo {
  align-items: center;
  background: var(--surface-1);
  border-radius: 1.2rem;
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  justify-content: flex-start;
  padding: 1rem 1.25rem;
}

.edit-text {
  align-items: stretch;
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  width: 100%;
}

.photobtns {
  display: flex;
  flex-direction: row;
  gap: .5rem;
}

.photobtns img {
  height: 18px;
  width: 18px;
}

.photobtns .default-button:not(.ax-button) {
  border-radius: .8rem;
  padding: .5rem;
  transition: all .3s ease;
}

.photobtns .default-button:not(.ax-button):hover {
  transform: scale(1.05);
}

.edit {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

#saveButton {
  padding: 0.85rem 1.2rem;
  transition: all .3s ease;
}

#saveButton:hover {
  transform: scale(1.05);
}

/* =========================================
= Foto de perfil
========================================= */
#profilephoto {
  width: 88px;
  height: 88px;
}

#profilephoto .user-avatar {
  width: 100%;
  height: 100%;
}

#profilephoto img {
  border-radius: 50%;
  height: auto;
  max-width: 100%;
}

.edit-profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  width: 100%;
}

/* =========================================
= Botones flotantes: Training / Download
========================================= */
.training {
  bottom: 2rem;
  position: fixed;
  right: 2rem;
  z-index: 1000;
}

.training button {
  align-items: center;
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  color: var(--surface-0);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: bold;
  height: 60px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all .3s ease;
  width: 60px;
}

.training button img {
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  width: 32px;
  z-index: 2;
}

.training button span {
  color: var(--surface-0);
  font-size: 1rem;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 1;
}

.training button:hover {
  border-radius: 2rem;
  width: 220px;
}

.training button:hover span {
  opacity: 1;
  visibility: visible;
}

.training button:hover img {
  opacity: 0;
}

.download {
  position: fixed;
  right: 2rem;
  top: 5rem;
  z-index: 1000;
}

.download button,
.download a {
  align-items: center;
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  color: var(--surface-0);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: bold;
  height: 60px;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: all .3s ease;
  width: 60px;
}

.download button img,
.download a img {
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  width: 32px;
  z-index: 2;
}

.download button .download-icon,
.download a .download-icon {
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  width: 32px;
  z-index: 2;
}

.download button span,
.download a span {
  color: var(--surface-0);
  font-size: 1rem;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 1;
}

.download button:hover,
.download a:hover {
  border-radius: 2rem;
  width: 150px;
}

.download button:hover span,
.download a:hover span {
  opacity: 1;
  visibility: visible;
}

.download button:hover img,
.download a:hover img {
  opacity: 0;
}

.download button:hover .download-icon,
.download a:hover .download-icon {
  opacity: 0;
}

.share {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

.share button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-0);
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  width: 60px;
  height: 60px;
  transition: all .3s ease;
}

.training button,
.download button,
.download a,
.share button {
  background: var(--table-accent);
}

.share button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  z-index: 2;
  transition: all .3s ease;
}

.share button span {
  font-size: 1rem;
  color: var(--surface-0);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.share button:hover {
  width: 150px;
  border-radius: 2rem;
}

.share button:hover span {
  opacity: 1;
  visibility: visible;
}

.share button:hover img {
  opacity: 0;
}

.share button.copied {
  background: var(--success) !important;
}

/* =========================================
= Temas de plan y servicio
========================================= */
body[data-theme="default"] {
  --avatar-color: var(--brand-primary);
  --avatar-bg-start: var(--brand-gradient-start);
  --avatar-bg-end: var(--brand-primary);
  --popup-accent-base: var(--brand-primary);
  --popup-accent-strong-base: var(--brand-gradient-start);
  --table-accent: var(--brand-gradient-start);
  --table-accent-strong: var(--brand-primary);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--brand-gradient-start) 6%);
  --control-border: color-mix(in srgb, var(--brand-primary), var(--border-soft) 72%);
  --control-accent: var(--brand-gradient-start);
  --control-accent-strong: var(--brand-primary);
  --logo-info-icon-color: var(--brand-primary);
  --logo-info-icon-bg: color-mix(in srgb, var(--surface-0), var(--surface-2) 60%);
  --logo-info-icon-border: color-mix(in srgb, var(--brand-primary), var(--surface-0) 35%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--brand-gradient-start), var(--surface-0) 90%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--brand-primary), var(--border-soft) 55%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--brand-primary), var(--text-strong) 45%);
}

body[data-theme="duo"] {
  --avatar-color: var(--duo-main);
  --avatar-bg-start: var(--duo-accent);
  --avatar-bg-end: var(--duo-main);
  --popup-accent-base: var(--duo-main);
  --popup-accent-strong-base: var(--duo-accent);
  --table-accent: var(--duo-accent);
  --table-accent-strong: var(--duo-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--duo-soft) 35%);
  --control-border: color-mix(in srgb, var(--duo-main), var(--border-soft) 70%);
  --control-accent: var(--duo-accent);
  --control-accent-strong: var(--duo-main);
  --logo-info-icon-color: var(--duo-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--duo-soft), var(--surface-0) 58%);
  --logo-info-icon-border: color-mix(in srgb, var(--duo-main), var(--surface-0) 32%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--duo-soft), var(--surface-0) 42%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--duo-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--duo-main), var(--text-strong) 42%);
}

body[data-theme="suite"] {
  --avatar-color: var(--suite-main);
  --avatar-bg-start: var(--suite-accent);
  --avatar-bg-end: var(--suite-main);
  --popup-accent-base: var(--suite-main);
  --popup-accent-strong-base: var(--suite-accent);
  --table-accent: var(--suite-accent);
  --table-accent-strong: var(--suite-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--suite-soft) 35%);
  --control-border: color-mix(in srgb, var(--suite-main), var(--border-soft) 70%);
  --control-accent: var(--suite-accent);
  --control-accent-strong: var(--suite-main);
  --logo-info-icon-color: var(--suite-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--suite-soft), var(--surface-0) 58%);
  --logo-info-icon-border: color-mix(in srgb, var(--suite-main), var(--surface-0) 32%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--suite-soft), var(--surface-0) 42%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--suite-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--suite-main), var(--text-strong) 42%);
}

body[data-theme="math"] {
  --avatar-color: var(--math-main);
  --avatar-bg-start: var(--math-accent);
  --avatar-bg-end: var(--math-main);
  --popup-accent-base: var(--math-main);
  --popup-accent-strong-base: var(--math-accent);
  --table-accent: var(--math-accent);
  --table-accent-strong: var(--math-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--math-soft) 35%);
  --control-border: color-mix(in srgb, var(--math-main), var(--border-soft) 70%);
  --control-accent: var(--math-accent);
  --control-accent-strong: var(--math-main);
  --logo-info-icon-color: var(--math-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--math-soft), var(--surface-0) 55%);
  --logo-info-icon-border: color-mix(in srgb, var(--math-main), var(--surface-0) 30%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--math-soft), var(--surface-0) 40%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--math-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--math-main), var(--text-strong) 38%);
}

body[data-theme="language"] {
  --avatar-color: var(--lang-main);
  --avatar-bg-start: var(--lang-accent);
  --avatar-bg-end: var(--lang-main);
  --popup-accent-base: var(--lang-main);
  --popup-accent-strong-base: var(--lang-accent);
  --table-accent: var(--lang-accent);
  --table-accent-strong: var(--lang-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--lang-soft) 35%);
  --control-border: color-mix(in srgb, var(--lang-main), var(--border-soft) 70%);
  --control-accent: var(--lang-accent);
  --control-accent-strong: var(--lang-main);
  --logo-info-icon-color: var(--lang-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--lang-soft), var(--surface-0) 55%);
  --logo-info-icon-border: color-mix(in srgb, var(--lang-main), var(--surface-0) 30%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--lang-soft), var(--surface-0) 40%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--lang-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--lang-main), var(--text-strong) 38%);
}

body[data-theme="simce"] {
  --avatar-color: var(--simce-main);
  --avatar-bg-start: var(--simce-accent);
  --avatar-bg-end: var(--simce-main);
  --popup-accent-base: var(--simce-main);
  --popup-accent-strong-base: var(--simce-accent);
  --table-accent: var(--simce-accent);
  --table-accent-strong: var(--simce-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--simce-soft) 35%);
  --control-border: color-mix(in srgb, var(--simce-main), var(--border-soft) 70%);
  --control-accent: var(--simce-accent);
  --control-accent-strong: var(--simce-main);
  --logo-info-icon-color: var(--simce-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--simce-soft), var(--surface-0) 55%);
  --logo-info-icon-border: color-mix(in srgb, var(--simce-main), var(--surface-0) 30%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--simce-soft), var(--surface-0) 40%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--simce-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--simce-main), var(--text-strong) 38%);
}

body[data-theme="paes"] {
  --avatar-color: var(--paes-main);
  --avatar-bg-start: var(--paes-main);
  --avatar-bg-end: var(--paes-accent);
  --popup-accent-base: var(--paes-main);
  --popup-accent-strong-base: var(--paes-accent);
  --table-accent: var(--paes-accent);
  --table-accent-strong: var(--paes-main);
  --control-bg: color-mix(in srgb, var(--surface-1), var(--paes-soft) 35%);
  --control-border: color-mix(in srgb, var(--paes-main), var(--border-soft) 70%);
  --control-accent: var(--paes-accent);
  --control-accent-strong: var(--paes-main);
  --logo-info-icon-color: var(--paes-main);
  --logo-info-icon-bg: color-mix(in srgb, var(--paes-soft), var(--surface-0) 55%);
  --logo-info-icon-border: color-mix(in srgb, var(--paes-main), var(--surface-0) 30%);
  --logo-info-tooltip-bg: color-mix(in srgb, var(--paes-soft), var(--surface-0) 40%);
  --logo-info-tooltip-border: color-mix(in srgb, var(--paes-main), var(--border-soft) 52%);
  --logo-info-tooltip-color: color-mix(in srgb, var(--paes-main), var(--text-strong) 38%);
}

body[data-theme="duo"] .sidebar {
  background: linear-gradient(to bottom, var(--duo-main), var(--duo-accent));
}

body[data-theme="duo"] .dashboard-header {
  background: linear-gradient(to left, var(--duo-main), var(--duo-accent));
}

body[data-theme="duo"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="duo"] .sidebar .menu .menu-submenu a::after {
  background: var(--duo-accent);
}

body[data-theme="duo"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--duo-main), var(--duo-accent));
}

body[data-theme="duo"] .page-title {
  color: var(--duo-main);
}


body[data-theme="suite"] .sidebar {
  background: linear-gradient(to bottom, var(--suite-main), var(--suite-accent));
}

body[data-theme="suite"] .dashboard-header {
  background: linear-gradient(to left, var(--suite-main), var(--suite-accent));
}

body[data-theme="suite"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="suite"] .sidebar .menu .menu-submenu a::after {
  background: var(--suite-accent);
}

body[data-theme="suite"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--suite-main), var(--suite-accent));
}

body[data-theme="suite"] .page-title {
  color: var(--suite-main);
}


body[data-theme="math"] .sidebar {
  background: linear-gradient(to bottom, var(--math-main), var(--math-accent));
}

body[data-theme="math"] .dashboard-header {
  background: linear-gradient(to left, var(--math-main), var(--math-accent));
}

body[data-theme="math"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="math"] .sidebar .menu .menu-submenu a::after {
  background: var(--math-accent);
}

body[data-theme="math"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--math-main), var(--math-accent));
}

body[data-theme="math"] .page-title {
  color: var(--math-main);
}


body[data-theme="language"] .sidebar {
  background: linear-gradient(to bottom, var(--lang-main), var(--lang-accent));
}

body[data-theme="language"] .dashboard-header {
  background: linear-gradient(to left, var(--lang-main), var(--lang-accent));
}

body[data-theme="language"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="language"] .sidebar .menu .menu-submenu a::after {
  background: var(--lang-accent);
}

body[data-theme="language"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--lang-main), var(--lang-accent));
}

body[data-theme="language"] .page-title {
  color: var(--lang-main);
}


body[data-theme="simce"] .sidebar {
  background: linear-gradient(to bottom, var(--simce-main), var(--simce-accent));
}

body[data-theme="simce"] .dashboard-header {
  background: linear-gradient(to left, var(--simce-main), var(--simce-accent));
}

body[data-theme="simce"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="simce"] .sidebar .menu .menu-submenu a::after {
  background: var(--simce-accent);
}

body[data-theme="simce"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--simce-main), var(--simce-accent));
}

body[data-theme="simce"] .page-title {
  color: var(--simce-main);
}


body[data-theme="paes"] .sidebar {
  background: linear-gradient(to bottom, var(--paes-main), var(--paes-accent));
}

body[data-theme="paes"] .dashboard-header {
  background: linear-gradient(to left, var(--paes-main), var(--paes-accent));
}

body[data-theme="paes"] .sidebar .menu :is(a, .menu-button)::after,
body[data-theme="paes"] .sidebar .menu .menu-submenu a::after {
  background: var(--paes-accent);
}

body[data-theme="paes"] .sidebar .menu .menu-submenu {
  background: linear-gradient(to bottom, var(--paes-main), var(--paes-accent));
}

body[data-theme="paes"] .page-title {
  color: var(--paes-main);
}


body[data-theme="duo"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--duo-accent), var(--duo-main));
}

body[data-theme="duo"] .default-button:not(.ax-button)::before {
  background-color: var(--duo-main);
}

body[data-theme="suite"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--suite-accent), var(--suite-main));
}

body[data-theme="suite"] .default-button:not(.ax-button)::before {
  background-color: var(--suite-main);
}

body[data-theme="math"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--math-accent), var(--math-main));
}

body[data-theme="math"] .default-button:not(.ax-button)::before {
  background-color: var(--math-main);
}

body[data-theme="language"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--lang-accent), var(--lang-main));
}

body[data-theme="language"] .default-button:not(.ax-button)::before {
  background-color: var(--lang-main);
}

body[data-theme="simce"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--simce-accent), var(--simce-main));
}

body[data-theme="simce"] .default-button:not(.ax-button)::before {
  background-color: var(--simce-main);
}

body[data-theme="paes"] .default-button:not(.ax-button) {
  background: linear-gradient(to left, var(--paes-accent), var(--paes-main));
}

body[data-theme="paes"] .default-button:not(.ax-button)::before {
  background-color: var(--paes-main);
}

.page-title {
  color: var(--brand-primary);
  font-size: clamp(1.05rem, 0.84rem + 1.26vw, 1.54rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: left;
}

.page-subtitle {
  color: var(--text-soft);
  font-size: clamp(0.6rem, 0.57rem + 0.25vw, 0.69rem);
  line-height: 1.6;
  margin: 0.35rem 0 0;
  text-align: left;
}

.section-header-standard {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  width: 100%;
}

.section-header-standard--split {
  align-items: flex-start;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
}

.section-header-standard__main {
  min-width: 0;
  width: 100%;
}

.section-header-context {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.section-header-standard__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.section-divider {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0.2rem;
  width: 100%;
}

.section-divider--split {
  align-items: flex-start;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
}

.section-divider__main {
  min-width: 0;
  width: 100%;
}

.section-divider__context {
  color: var(--text-soft);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.22rem;
  text-transform: uppercase;
}

.section-divider__heading {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
}

.section-divider__title {
  color: var(--text-strong);
  font-size: clamp(0.88rem, 0.82rem + 0.34vw, 1.02rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
}

.section-divider__line {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--table-accent), var(--border-soft) 56%),
    color-mix(in srgb, var(--border-soft), transparent 72%)
  );
  border-radius: 999px;
  display: block;
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
}

.section-divider__subtitle {
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0.28rem 0 0;
  width: 100%;
  text-align: start;
}

.section-divider__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* =========================================
= Tablas base
========================================= */
:where(body) table {
  --table-radius: 1rem;
  --table-cell-padding-block: 0.78rem;
  --table-cell-padding-inline: 0.92rem;
  --table-header-font-size: 0.7rem;
  --table-header-letter-spacing: 0.08em;

  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--table-row-bg);
  border: 1px solid var(--table-border);
  border-radius: var(--table-radius);
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--table-accent-strong), transparent 94%),
    var(--shadow-0);
  color: var(--text-strong);
  font-size: 0.92rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(body) table:focus-within {
  border-color: color-mix(in srgb, var(--table-accent-strong), var(--table-border) 55%);
  box-shadow: var(--shadow-1);
}

:where(body) caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--table-caption);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0 0 0.78rem;
}

:where(body) th,
:where(body) td {
  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--table-border);
  border-right: 1px solid color-mix(in srgb, var(--table-border), transparent 45%);
  overflow-wrap: anywhere;
  white-space: normal;
}

:where(body) th:last-child,
:where(body) td:last-child {
  border-right: none;
}

:where(body) thead th {
  background: linear-gradient(120deg, var(--table-header-bg), var(--surface-0) 70%);
  color: var(--text-strong);
  font-size: var(--table-header-font-size);
  text-transform: uppercase;
  letter-spacing: var(--table-header-letter-spacing);
  font-weight: 700;
  position: relative;
}

:where(body) thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--table-accent-strong), transparent);
  opacity: 0.72;
}

:where(body) tbody td {
  background: var(--table-row-bg);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

:where(body) tbody tr:nth-child(even) td {
  background: var(--table-row-alt);
}

:where(body) tbody tr:hover td {
  background: var(--table-row-hover);
}

:where(body) tbody tr:focus-within td {
  background: var(--table-row-hover);
}

:where(body) :is(tbody tr:hover td:first-child, tbody tr:focus-within td:first-child) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--table-accent-strong), transparent 15%);
}

:where(body) tbody tr:last-child td {
  border-bottom: none;
}

:where(body) thead th:first-child {
  border-top-left-radius: var(--table-radius);
}

:where(body) thead th:last-child {
  border-top-right-radius: var(--table-radius);
}

:where(body) tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--table-radius);
}

:where(body) tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--table-radius);
}

:where(body) td.empty-cell {
  text-align: center;
  color: var(--text-soft);
  font-weight: 600;
}

:where(
  .results-table,
  .students-table,
  .grades-table-wrapper,
  .bulk-table,
  .table-wrapper,
  .table-wrap,
  .master-table-container,
  .student-group-table-wrapper,
  .student-report-table-container,
  .questions-container,
  .questions-detail-list-container,
  .questions-detail-alternatives-table-container,
  .grade-scale-table-shell,
  .nem-table-wrap
) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: color-mix(in srgb, var(--table-accent-strong), transparent 45%) transparent;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

:where(
  .results-table,
  .students-table,
  .grades-table-wrapper,
  .bulk-table,
  .table-wrapper,
  .table-wrap,
  .master-table-container,
  .student-group-table-wrapper,
  .student-report-table-container,
  .questions-container,
  .questions-detail-list-container,
  .questions-detail-alternatives-table-container,
  .grade-scale-table-shell,
  .nem-table-wrap
)::-webkit-scrollbar {
  height: 0.55rem;
}

:where(
  .results-table,
  .students-table,
  .grades-table-wrapper,
  .bulk-table,
  .table-wrapper,
  .table-wrap,
  .master-table-container,
  .student-group-table-wrapper,
  .student-report-table-container,
  .questions-container,
  .questions-detail-list-container,
  .questions-detail-alternatives-table-container,
  .grade-scale-table-shell,
  .nem-table-wrap
)::-webkit-scrollbar-track {
  background: transparent;
}

:where(
  .results-table,
  .students-table,
  .grades-table-wrapper,
  .bulk-table,
  .table-wrapper,
  .table-wrap,
  .master-table-container,
  .student-group-table-wrapper,
  .student-report-table-container,
  .questions-container,
  .questions-detail-list-container,
  .questions-detail-alternatives-table-container,
  .grade-scale-table-shell,
  .nem-table-wrap
)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--table-accent-strong), transparent 50%);
  background-clip: content-box;
  border: 0.16rem solid transparent;
  border-radius: 999px;
}

:where(
  .results-table,
  .students-table,
  .grades-table-wrapper,
  .bulk-table,
  .table-wrapper,
  .table-wrap,
  .master-table-container,
  .student-group-table-wrapper,
  .student-report-table-container,
  .questions-container,
  .questions-detail-list-container,
  .questions-detail-alternatives-table-container,
  .grade-scale-table-shell,
  .nem-table-wrap
):is(:hover, :focus-within)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--table-accent-strong), transparent 35%);
  background-clip: content-box;
}

@media screen and (max-width: 900px) {
  :where(body) table {
    --table-cell-padding-block: 0.7rem;
    --table-cell-padding-inline: 0.75rem;

    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: color-mix(in srgb, var(--table-accent-strong), transparent 45%) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  :where(
    .results-table,
    .students-table,
    .grades-table-wrapper,
    .bulk-table,
    .table-wrapper,
    .table-wrap,
    .master-table-container,
    .student-group-table-wrapper,
    .student-report-table-container,
    .questions-container,
    .questions-detail-list-container,
    .questions-detail-alternatives-table-container,
    .grade-scale-table-shell,
    .nem-table-wrap
  ) table {
    display: table;
    overflow: visible;
  }

  :where(body) table::-webkit-scrollbar {
    height: 0.55rem;
  }

  :where(body) table::-webkit-scrollbar-track {
    background: transparent;
  }

  :where(body) table::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--table-accent-strong), transparent 50%);
    background-clip: content-box;
    border: 0.16rem solid transparent;
    border-radius: 999px;
  }

  :where(body) table:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--table-accent-strong), transparent 35%);
    background-clip: content-box;
  }

  :where(body) thead th {
    --table-header-font-size: 0.69rem;
    --table-header-letter-spacing: 0.07em;
  }
}

@media screen and (max-width: 640px) {
  :where(body) table {
    --table-cell-padding-block: 0.62rem;
    --table-cell-padding-inline: 0.66rem;

    font-size: 0.88rem;
  }
}

@media screen and (max-width: 480px) {
  :where(body) table {
    --table-radius: 0.75rem;
    --table-cell-padding-block: 0.55rem;
    --table-cell-padding-inline: 0.58rem;

    box-shadow: var(--shadow-0);
    font-size: 0.84rem;
  }

  :where(body) thead th {
    --table-header-font-size: 0.64rem;
    --table-header-letter-spacing: 0.05em;
  }
}

/* =========================================
= Menú móvil (extra)
========================================= */
.mobile-menu {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  text-align: start;
  border-top: 1px solid color-mix(in srgb, var(--surface-0), transparent 60%);
}

.mobile-menu :is(a, button) {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--surface-0);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: .75rem;
  justify-content: flex-start;
  padding: .55rem 0;
  text-align: left;
  width: 100%;
}

.mobile-menu :is(a, button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--surface-0), transparent 12%);
  outline-offset: 2px;
}

.mobile-menu :is(a, button) img {
  filter: brightness(0) invert(1);
}

/* =========================================
= Media Queries
========================================= */
@media screen and (max-width: 1024px) {
  :root {
    --layout-sidebar-width: 15rem;
    --layout-shell-padding: 1.25rem;
  }

  .dashboard-header .logo img,
  .logo-button img {
    max-height: 42px;
    max-width: min(156px, 30vw);
  }

  .logo-button__hint {
    font-size: 0.6rem;
    padding: 0.15rem 0.38rem;
  }

  .sidebar {
    padding-inline: 0.85rem;
  }

  .sidebar .menu :is(a, .menu-button) {
    min-height: 2.7rem;
    padding: .45rem 1.15rem;
  }

  .establishment .logo {
    height: 104px;
    width: 104px;
  }

  .section-header-standard--split,
  .section-divider--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-header-standard__actions,
  .section-divider__actions {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 768px) {
  body {
    --layout-shell-padding: 1rem;
    --layout-sidebar-offset: 0px;
  }

  .dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding-left: max(.85rem, env(safe-area-inset-left));
    padding-right: max(.85rem, env(safe-area-inset-right));
  }

  .app-header {
    min-height: var(--layout-header-height);
    top: 0;
    left: 0;
    right: 0;
  }

  .dashboard-header__brand {
    gap: .65rem;
    min-width: 0;
    padding-right: 0;
  }

  .dashboard-header__actions {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    flex-shrink: 0;
    gap: .42rem;
    justify-self: end;
    margin-left: 0;
    min-width: max-content;
    padding: 0;
    position: relative;
    z-index: 3;
  }

  .dashboard-header .menu-toggle {
    background: color-mix(in srgb, var(--surface-0), transparent 82%);
    border-color: color-mix(in srgb, var(--surface-0), transparent 58%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    height: 2.15rem;
    inset: auto;
    overflow: hidden;
    position: relative;
    width: 2.15rem;
  }

  .dashboard-header .menu-toggle .icon-image {
    opacity: 0;
    transform: scale(.8);
  }

  .dashboard-header .menu-toggle::before,
  .dashboard-header .menu-toggle::after {
    content: "";
    position: absolute;
  }

  .dashboard-header .menu-toggle::before {
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 .38rem .38rem;
    bottom: 0.55rem;
    height: 0.56rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1rem;
  }

  .dashboard-header .menu-toggle::after {
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 .3rem 0 color-mix(in srgb, currentColor, transparent 18%);
    height: 0.12rem;
    left: 50%;
    top: 0.72rem;
    transform: translateX(-50%);
    width: 1.05rem;
  }

  .dashboard-header .logo img,
  .logo-button img {
    max-height: 32px;
    max-width: min(104px, 32vw);
  }

  .dashboard-header .logo,
  .logo-dropdown {
    gap: 0.65rem;
  }

  .logo-button__hint {
    display: none;
  }

  .dashboard-header .header-notifications {
    display: flex;
    height: 2.15rem;
    width: 2.15rem;
  }

  .dashboard-header .header-notifications__button {
    background: color-mix(in srgb, var(--surface-0), transparent 82%);
    border-color: color-mix(in srgb, var(--surface-0), transparent 58%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    height: 100%;
    width: 100%;
  }

  .dashboard-header .menu-toggle:hover,
  .dashboard-header .header-notifications__button:hover {
    background: color-mix(in srgb, var(--surface-0), transparent 74%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    transform: none;
  }

  .dashboard-header .header-notifications__icon .icon-image {
    height: 18px;
    width: 18px;
  }

  .dashboard-header .header-notifications__badge {
    height: 16px;
    min-width: 16px;
    font-size: 0.58rem;
    right: -1px;
    top: -3px;
  }

  .logo-dropdown-menu {
    min-width: min(220px, calc(100vw - 2rem));
  }

  .header-notifications__panel {
    left: .75rem;
    right: .75rem;
    position: fixed;
    top: calc(var(--layout-header-height) + .5rem);
    width: auto;
    max-height: min(65dvh, 420px);
    transform: translateY(-0.2rem) scale(.985);
  }

  .sidebar {
    align-items: stretch;
    animation: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary), var(--brand-gradient-start) 12%), var(--brand-gradient-start));
    border: 1px solid color-mix(in srgb, var(--surface-0), transparent 78%);
    border-bottom: none;
    border-radius: 1.7rem 1.7rem 0 0;
    box-shadow: 0 -24px 56px rgba(15, 23, 42, 0.34);
    bottom: 0;
    gap: 0.65rem;
    height: auto;
    left: 0.5rem;
    right: 0.5rem;
    max-height: min(92dvh, calc(100dvh - 0.35rem));
    min-height: 0;
    overscroll-behavior: contain;
    padding: 0.72rem 0.9rem max(1rem, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    top: auto;
    transform: translate3d(0, calc(100% + 1.5rem), 0);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease;
    width: auto;
  }

  .sidebar[data-collapsible],
  .sidebar[data-collapsible].is-collapsed {
    width: auto;
  }

  .sidebar.is-collapsed {
    align-items: stretch;
  }

  .sidebar-sheet-handle {
    align-self: center;
    background: transparent;
    border-radius: 999px;
    cursor: grab;
    display: block;
    height: 1rem;
    margin-bottom: -0.15rem;
    min-height: 1rem;
    opacity: 0.82;
    position: relative;
    touch-action: none;
    width: 4rem;
  }

  .sidebar-sheet-handle::before {
    background: color-mix(in srgb, var(--surface-0), transparent 36%);
    border-radius: 999px;
    content: "";
    height: 0.3rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
  }

  .sidebar.is-open,
  body.sidebar-open .sidebar[data-sidebar] {
    transform: translate3d(0, 0, 0);
  }

  .sidebar.is-dragging {
    transition: none;
  }

  .sidebar.is-dragging .sidebar-sheet-handle {
    cursor: grabbing;
  }

  .sidebar-backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(7px);
    inset: 0;
  }

  .sidebar .toggle,
  .sidebar:hover .toggle {
    display: none;
  }

  .sidebar .user-info,
  .sidebar .establishment {
    background: color-mix(in srgb, var(--surface-0), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--surface-0), transparent 72%);
    border-radius: 1.2rem;
    box-sizing: border-box;
    width: 100%;
  }

  .sidebar .user-info {
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
  }

  .sidebar.is-collapsed .user-info {
    justify-content: flex-start;
    padding: 0.7rem 0.8rem;
  }

  .sidebar.is-collapsed .user-info .user-info-text {
    display: flex;
    height: auto;
    margin: 0;
    overflow: hidden;
    position: static;
    white-space: normal;
    width: auto;
    clip: auto;
    clip-path: none;
  }

  .sidebar .user-info .user-avatar {
    height: 34px;
    width: 34px;
  }

  .establishment {
    align-items: center;
    flex-direction: row;
    gap: 0.85rem;
    justify-content: flex-start;
    padding: 0.72rem 0.82rem;
  }

  .establishment .logo {
    height: 52px;
    width: 52px;
    flex-shrink: 0;
  }

  .sidebar.is-collapsed .establishment .logo {
    height: 52px;
    width: 52px;
  }

  .sidebar.is-collapsed img#establishmentlogo {
    height: calc(100% - .3rem - 2rem);
    padding: .3rem;
    width: calc(100% - .3rem - 2rem);
  }

  .establishment .info {
    justify-content: flex-start;
    text-align: left;
  }

  .sidebar.is-collapsed .establishment .info {
    display: flex;
  }

  .sidebar .menu {
    flex: 1 1 auto;
    height: auto;
    justify-content: flex-start;
    margin: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0.45rem;
    width: 100%;
  }

  .sidebar .menu :is(a, .menu-button) {
    background: color-mix(in srgb, var(--surface-0), transparent 89%);
    border: 1px solid color-mix(in srgb, var(--surface-0), transparent 72%);
    border-radius: 1.15rem;
    gap: .7rem;
    left: 0;
    min-height: 2.6rem;
    padding: .52rem 0.88rem;
    transform: none;
    width: 100%;
  }

  .sidebar.is-collapsed .menu :is(a, .menu-button) {
    justify-content: flex-start;
    left: 0;
    padding: .52rem 0.88rem;
    width: 100%;
  }

  .sidebar.is-collapsed .menu :is(a, .menu-button) h5 {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: hidden;
    position: static;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
  }

  .sidebar .menu :is(a, .menu-button)::after {
    background: color-mix(in srgb, var(--surface-0), transparent 76%);
    border-radius: 1.15rem;
    left: 0;
    right: 0;
  }

  .sidebar .menu :is(a, .menu-button):hover,
  .sidebar .menu a.active,
  .sidebar .menu .menu-item.is-open > .menu-button,
  .sidebar .menu .menu-item.is-active-ancestor > .menu-button {
    filter: none;
    transform: none;
  }

  .sidebar .menu .menu-item.has-submenu::after {
    display: none;
  }

  .sidebar .menu .menu-item.has-submenu > .menu-button {
    padding-right: 2.75rem;
  }

  .sidebar .menu .submenu-caret {
    right: 1rem;
  }

  .sidebar.is-collapsed .menu .submenu-caret {
    display: inline-block;
  }

  .sidebar .menu .menu-submenu {
    background: color-mix(in srgb, var(--surface-0), transparent 86%);
    border: 1px solid color-mix(in srgb, var(--surface-0), transparent 70%);
    box-sizing: border-box;
    box-shadow: none;
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    max-height: 0;
    max-width: 100%;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 0.4rem;
    pointer-events: none;
    position: static;
    transform: none;
    visibility: visible;
    transition: max-height .34s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, padding .24s ease;
    width: 100%;
  }

  .sidebar.is-collapsed .menu .menu-submenu {
    min-width: 0;
    width: 100%;
  }

  .sidebar .menu .menu-item.has-submenu:not(.is-open):hover > .menu-submenu,
  .sidebar .menu .menu-item.has-submenu:not(.is-open):focus-within > .menu-submenu {
    opacity: 0;
    pointer-events: none;
    transform: none;
  }

  .sidebar .menu .menu-item.has-submenu.is-open > .menu-submenu {
    max-height: 24rem;
    opacity: 1;
    padding: 0.4rem;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .sidebar .menu .menu-submenu a {
    border-radius: .95rem;
    filter: none;
    left: 0;
    padding: 0.42rem 0.66rem;
    transform: none;
  }

  .sidebar.is-collapsed .menu .menu-submenu a {
    justify-content: flex-start;
    padding: 0.42rem 0.66rem;
  }

  .sidebar.is-collapsed .menu .menu-submenu h5 {
    display: block;
  }

  .sidebar .menu .menu-submenu a::after {
    border-radius: .95rem;
    left: 0;
  }

  .sidebar .menu .menu-submenu a:hover,
  .sidebar .menu .menu-submenu a:focus-visible {
    filter: none;
    transform: none;
  }

  .content { 
    margin-left: 0;
    min-height: calc(100dvh - var(--layout-header-height));
    padding: var(--layout-shell-padding);
  }

  .mobile-menu {
    border-top: 1px solid color-mix(in srgb, var(--surface-0), transparent 68%);
    display: flex !important;
    flex-direction: column;
    gap: 0.42rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
  }

  .mobile-menu :is(a, button) {
    background: color-mix(in srgb, var(--surface-0), transparent 89%);
    border: 1px solid color-mix(in srgb, var(--surface-0), transparent 72%);
    border-radius: 1rem;
    padding: 0.72rem 0.8rem;
  }

  .mobile-menu :is(a, button):focus-visible,
  .mobile-menu :is(a, button):hover {
    background: color-mix(in srgb, var(--surface-0), transparent 80%);
  }

  .user-menu {
    display: none !important;
  }

  .section-header-standard--split,
  .section-divider--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-header-standard__actions,
  .section-divider__actions {
    justify-content: flex-start;
  }

  .section-divider__title {
    white-space: normal;
  }

  .popup {
    padding: 1rem;
  }

  .popup-content {
    width: min(94vw, 560px);
    padding: 1.4rem 1.5rem;
  }

  .popup-content--wide {
    width: min(94vw, 700px);
    padding: 1.5rem;
  }

  #edit-profile-popup .popup-content {
    width: min(94vw, 560px);
    padding: 1.5rem;
  }

  .close-popup,
  .close-popup--inline {
    height: 34px;
    width: 34px;
    font-size: 20px;
  }

  button.close-popup,
  button.close-popup--inline {
    font-size: 20px !important;
  }

  .close-popup {
    top: 0.75rem;
    right: 0.75rem;
  }

  #edit-profile-popup .edit-photo {
    align-items: flex-start;
    flex-direction: column;
  }

  #edit-profile-popup #profilephoto {
    width: 72px;
    height: 72px;
  }

  .video-container {
    height: 180px;
    width: 320px;
  }

  .training { bottom: 1rem; right: 1rem; }

  .mobile-menu { display: flex !important; }

  .edit-text { grid-template-columns: repeat(1, 1fr); }
}

@media (hover: none) and (min-width: 769px) {
  .sidebar .toggle {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-backdrop,
  .sidebar .toggle,
  .sidebar .menu :is(a, .menu-button),
  .sidebar .menu :is(a, .menu-button)::after,
  .sidebar .menu .submenu-caret,
  .sidebar .menu .menu-submenu,
  .content,
  .app-header,
  .dashboard-header .menu-toggle,
  .logo-button,
  .logo-button__hint,
  .logo-dropdown-menu,
  .header-notifications__button,
  .header-notifications__panel {
    animation: none !important;
    transition: none !important;
  }
}