/* ============================================================================
   Bloopy · system.css
   Capa de componentes del sistema. Se carga la última: corrige la estructura
   de las hojas heredadas y fija una sola regla por patrón (márgenes, rejillas,
   escala, vidrio, movimiento). Consume tokens.css; no declara colores nuevos.
   Índice:
     1. Base y tipografía por rol
     2. Controles (botones, campos, chips)
     3. Carcasa: barra lateral, barra superior, contenido
     4. Cabeceras de vista y de sección
     5. Tarjetas y paneles
     6. Portada del espacio
     7. Filas (clases, bloques, distribución)
     8. Repaso, Estadísticas, Calificaciones
     9. Editor
    10. Cuenta y diálogos
    11. Movimiento
    12. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Base */
/* Dirección A: sin figuras. Las cabeceras son vidrio con título; la de Inicio
   lleva su propia escena (ver «Cabecera de Inicio»). Se anulan también las
   esferas heredadas de liquid-glass.css en ::before/::after. */
.standard-heading,
.grades-page-heading,
.dashboard-intro,
.class-intro,
.space-cover,
.home-top-grid .goal-card,
.stats-context.panel { position: relative; isolation: isolate; overflow: hidden; }
:is(.standard-heading, .grades-page-heading, .dashboard-intro, .class-intro, .space-cover:not(.has-photo), .space-card:not(.has-photo), .home-top-grid .goal-card, .stats-context.panel)::before,
:is(.standard-heading, .grades-page-heading, .dashboard-intro, .class-intro, .space-cover:not(.has-photo), .space-card:not(.has-photo), .home-top-grid .goal-card, .stats-context.panel)::after,
:root[data-theme] :is(.standard-heading, .grades-page-heading, .dashboard-intro, .class-intro, .space-cover:not(.has-photo), .space-card:not(.has-photo), .home-top-grid .goal-card, .stats-context.panel)::before,
:root[data-theme] :is(.standard-heading, .grades-page-heading, .dashboard-intro, .class-intro, .space-cover:not(.has-photo), .space-card:not(.has-photo), .home-top-grid .goal-card, .stats-context.panel)::after { content: none; }

/* Tintes de espacio: tarjeta, portada sin foto y monograma comparten color. */
[data-tint="rosa"] { --tint-bg: var(--ap-tint-rosa-bg); --tint-mono: var(--ap-tint-rosa-mono); }
[data-tint="lavanda"] { --tint-bg: var(--ap-tint-lavanda-bg); --tint-mono: var(--ap-tint-lavanda-mono); }
[data-tint="melocoton"] { --tint-bg: var(--ap-tint-melocoton-bg); --tint-mono: var(--ap-tint-melocoton-mono); }
[data-tint="menta"] { --tint-bg: var(--ap-tint-menta-bg); --tint-mono: var(--ap-tint-menta-mono); }
[data-tint="teal"] { --tint-bg: var(--ap-tint-teal-bg); --tint-mono: var(--ap-tint-teal-mono); }
/* Color propio (--tint-hex, ver tintAttrs en app.js): la luminosidad la fija el tema y el tono y la
   saturación salen del color elegido, así el texto se lee sea cual sea el color. Sin color relativo
   (navegadores antiguos), una mezcla aproximada. */
[data-tint="custom"] { --tint-bg: color-mix(in srgb, var(--tint-hex) 22%, var(--ap-bg)); --tint-mono: color-mix(in srgb, var(--tint-hex) 65%, var(--ap-ink)); }
@supports (color: oklch(from red l c h)) {
  [data-tint="custom"] { --tint-bg: oklch(from var(--tint-hex) 0.93 min(c, 0.07) h); --tint-mono: oklch(from var(--tint-hex) 0.43 min(c, 0.16) h); }
  :root[data-theme="dark"] [data-tint="custom"] { --tint-bg: oklch(from var(--tint-hex) 0.31 min(c, 0.08) h); --tint-mono: oklch(from var(--tint-hex) 0.85 min(c, 0.12) h); }
}

.space-card-shell .space-card:not(.has-photo),
.space-cover:not(.has-photo),
:root[data-theme] .space-cover:not(.has-photo) {
  color: var(--ap-tint-ink);
  border-color: var(--ap-glass-edge);
  background:
    linear-gradient(180deg, var(--ap-reflection) 0%, transparent 38%),
    var(--tint-bg);
  box-shadow: inset 0 1px 0 var(--ap-glass-edge), var(--ap-shadow-2);
}
.space-card:not(.has-photo) > strong,
.space-card:not(.has-photo) > small,
.space-cover:not(.has-photo) h1,
.space-cover:not(.has-photo) p { color: var(--ap-tint-ink); text-shadow: none; }
.space-card:not(.has-photo) > small,
.space-cover:not(.has-photo) p { color: var(--ap-ink-2); }
.space-card:not(.has-photo) .space-card-top > .icon { color: var(--tint-mono); filter: none; }
.space-card-shell:has(> .space-card:not(.has-photo)) .space-reorder-handle { color: var(--tint-mono); border-color: var(--ap-glass-edge); background: var(--ap-glass-2); }
.space-card:not(.has-photo) .space-monogram:not(.has-image),
.space-cover:not(.has-photo) .space-monogram:not(.has-image) {
  width: 64px; height: 64px;
  font-family: var(--ap-font-display); font-size: var(--ap-text-section); font-weight: 800; letter-spacing: -0.03em;
  color: var(--tint-mono); border: 1px solid var(--ap-glass-edge);
  background: var(--ap-glass-2); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.space-monogram[data-tint]:not(.has-image) { font-family: var(--ap-font-display); font-weight: 800; color: var(--tint-mono); background: color-mix(in srgb, var(--tint-bg) 80%, transparent); }
/* Con portada propia manda la foto: el monograma va en vidrio claro, sin tinte. */
.space-card.has-photo .space-monogram:not(.has-image) { color: var(--on-cover); background: var(--cover-glass); border-color: var(--cover-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.space-card > strong { max-width: 90%; }
.space-card-top { padding-right: 0; }
.home-top-grid .goal-card > .goal-empty-copy, .home-top-grid .goal-card > .goal-value { max-width: 100%; }

h1, h2, h3, h4 { text-wrap: balance; }
.page h1,
.dashboard-intro h1,
.standard-heading h1,
.grades-page-heading h1,
.class-title-block h1,
.space-cover h1 {
  margin: 0;
  font-size: var(--ap-text-page);
  font-weight: var(--ap-weight-title);
  line-height: var(--ap-leading-tight);
  letter-spacing: var(--ap-tracking-title);
  max-width: 24ch;
}
.dashboard-intro h1,
.space-cover h1 { font-size: var(--ap-text-display); max-width: 20ch; }
.page h2,
.section-heading h2,
.class-documents-heading h2,
.class-blocks h2,
.stats-context h2,
.grades-section h2,
.source-manager h2,
.source-manager > header h2,
.v2-engine-panel h2,
.v2-engine-panel > header h2,
.repaso-section h2 {
  margin: 0;
  font-size: var(--ap-text-section);
  font-weight: var(--ap-weight-title);
  line-height: 1.2;
  letter-spacing: var(--ap-tracking-title);
}
.page h3 { margin: 0; font-size: var(--ap-text-subtitle); font-weight: var(--ap-weight-strong); line-height: 1.3; }
.page .lead,
.standard-heading .lead,
.grades-page-heading .lead,
.class-title-block .lead,
.dashboard-intro .lead,
.section-note {
  max-width: 60ch;
  margin: var(--ap-space-3) 0 0;
  color: var(--ap-muted);
  font-size: var(--ap-text-body);
  line-height: var(--ap-leading-body);
}
.section-note { font-size: var(--ap-text-meta); margin-top: var(--ap-space-1); }
.nav-section-head span,
.panel-heading,
.metric-card > span,
.paper-kicker,
.eyebrow {
  font-size: var(--ap-text-label);
  font-weight: var(--ap-weight-strong);
  letter-spacing: var(--ap-tracking-label);
  text-transform: uppercase;
  color: var(--ap-muted);
}
.panel-heading { text-transform: none; letter-spacing: 0; font-size: var(--ap-text-ui); color: var(--ap-ink-2); }
kbd { font-family: var(--ap-font); font-size: var(--ap-text-label); }
strong { font-weight: var(--ap-weight-strong); }
small { font-size: var(--ap-text-meta); }
.tabular, .metric-card strong, .timer-control span, .distribution-row strong { font-variant-numeric: tabular-nums; }

/* El anillo sigue la forma del control: no se toca su border-radius al enfocar. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ap-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ 2. Controles */
.primary-button,
.secondary-button,
.glass-button,
.light-button,
.timer-control,
.text-action,
.class-filter,
.search-trigger,
.export-menu > summary {
  min-height: var(--ap-control);
  font-family: var(--ap-font);
  font-size: var(--ap-text-ui);
  font-weight: var(--ap-weight-ui);
  border-radius: var(--ap-radius-sm);
  transition: background-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease),
    box-shadow var(--ap-dur-base) var(--ap-ease), transform var(--ap-dur-base) var(--ap-ease-spring);
}
.primary-button {
  color: var(--ap-on-accent);
  background: linear-gradient(135deg, var(--ap-accent-deep), var(--ap-accent));
  box-shadow: inset 0 1px 0 var(--ap-brand-sheen), var(--ap-shadow-2);
}
:root[data-theme="dark"] .primary-button { color: var(--ap-on-accent); background: linear-gradient(135deg, var(--ap-accent-deep), var(--ap-accent)); }
.primary-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--ap-brand-sheen), var(--ap-shadow-3); }
.primary-button:active { transform: translateY(0) scale(0.985); }
.secondary-button,
.glass-button,
.light-button,
.timer-control,
.class-filter,
.search-trigger,
.export-menu > summary {
  color: var(--ap-ink);
  background: var(--ap-glass-2);
  border: 1px solid var(--ap-glass-edge);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
}
.secondary-button:hover,
.glass-button:hover,
.light-button:hover,
.export-menu > summary:hover { background: var(--ap-glass-3); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-2); }
.secondary-button:active { transform: scale(0.985); }
.icon-button,
.round-action,
.space-chevron,
.sidebar-class-chevron,
.space-class-chevron .icon {
  transition: background-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease), transform var(--ap-dur-base) var(--ap-ease-spring);
}
.icon-button { border-radius: var(--ap-radius-sm); }
.icon-button:hover { background: var(--ap-accent-tint); color: var(--ap-ink); }
.round-action {
  width: var(--ap-control-round);
  height: var(--ap-control-round);
  border-radius: 50%;
  color: var(--ap-accent-deep);
  background:
    radial-gradient(circle at 30% 26%, var(--ap-reflection), transparent 45%),
    linear-gradient(160deg, var(--ap-glass-3), var(--ap-accent-soft));
  border: 1px solid var(--ap-glass-edge);
  box-shadow: inset 0 -6px 12px var(--ap-inset-shade), var(--ap-shadow-2);
}
:root[data-theme="dark"] .round-action { color: var(--ap-accent-deep); background: radial-gradient(circle at 30% 26%, var(--ap-glass-sheen), transparent 45%), linear-gradient(160deg, var(--ap-glass-3), var(--ap-accent-soft)); }
.round-action:hover { transform: translateY(-2px) scale(1.04); }
.round-action:active { transform: scale(0.96); }
.status-pill,
.class-documents-heading > span,
.sidebar-collection-toggle small,
.nav-link small {
  font-size: var(--ap-text-label);
  font-weight: var(--ap-weight-ui);
  border-radius: var(--ap-radius-pill);
}
.period-switch { padding: 3px; border-radius: var(--ap-radius-sm); background: var(--ap-glass-1); border: 1px solid var(--ap-glass-edge); box-shadow: inset 0 1px 0 var(--ap-reflection); }
.period-switch button { min-height: 32px; padding: 0 var(--ap-space-3); border-radius: var(--ap-radius-xs); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); color: var(--ap-muted); }
.period-switch button.active { color: var(--ap-ink); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-1); }
input[type="search"],
input[type="text"],
input[type="number"],
select,
textarea { font-family: var(--ap-font); font-size: var(--ap-text-ui); }

/* --------------------------------------------------------------- 3. Carcasa */
/* body con overflow auto creaba un contenedor de scroll que rompía el sticky de la barra. */
body { overflow: clip visible; }
.app-shell { min-height: 100dvh; align-items: start; }
@media (min-width: 981px) {
  .app-shell .sidebar { position: sticky; top: 12px; height: calc(100dvh - 24px); }
}
.sidebar {
  --nav-x: var(--ap-nav-inset);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--ap-reflection) 40%, transparent), transparent 40%),
    var(--ap-glass-2);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-3);
  backdrop-filter: var(--ap-glass-blur);
  -webkit-backdrop-filter: var(--ap-glass-blur);
}
/* Todo el bloque central hace scroll a la vez; la lista de espacios ya no es una
   zona de scroll propia. Marca y pie quedan fijos. */
.sidebar-scroll { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar > .nav-section:not(.tools-nav), .sidebar-scroll > .nav-section:not(.tools-nav) { flex: 0 0 auto; min-height: 0; overflow: visible; scrollbar-gutter: auto; }
.sidebar::after { display: none; }
/* Una sola columna de iconos: todo lo que hay en la barra empieza en --nav-x. */
.brand-row {
  min-height: 72px;
  padding: 0 var(--ap-space-4) 0 var(--ap-space-2);
  border-bottom: 1px solid var(--ap-line);
}
.brand { gap: var(--ap-space-3); }
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--ap-radius-sm);
  color: var(--ap-accent-deep);
  background: radial-gradient(circle at 30% 25%, var(--ap-reflection), transparent 50%), linear-gradient(150deg, var(--ap-glass-3), var(--ap-accent-soft));
  border: 1px solid var(--ap-glass-edge);
  box-shadow: inset 0 -4px 8px var(--ap-inset-shade), var(--ap-shadow-1);
}
:root[data-theme="dark"] .brand-mark { color: var(--ap-accent-deep); }
.brand strong { font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); letter-spacing: -0.01em; }
.brand small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.sidebar .icon-button { width: 32px; min-width: 32px; height: 32px; }
.sidebar .icon-button .icon { width: 16px; height: 16px; }
.primary-nav { gap: var(--ap-space-1); padding: var(--ap-space-3) var(--ap-space-2) var(--ap-space-2) var(--ap-space-2); }
.nav-section { padding: var(--ap-space-2); }
.nav-section-head {
  height: 36px;
  padding: 0 var(--ap-space-2) 0 calc(var(--nav-x) - var(--ap-space-2));
}
.nav-section-head .icon-button { width: 32px; min-width: 32px; height: 32px; }
.nav-link,
.space-link,
.sidebar-collection-toggle,
.theme-row,
.sidebar-account {
  min-height: var(--ap-control);
  padding-left: calc(var(--nav-x) - var(--ap-space-2));
  padding-right: var(--ap-space-2);
  border-radius: var(--ap-radius-sm);
  color: var(--ap-ink-2);
  font-size: var(--ap-text-ui);
  font-weight: var(--ap-weight-ui);
}
.nav-link { grid-template-columns: var(--ap-nav-icon) minmax(0, 1fr) auto; gap: var(--ap-space-3); }
.nav-link .icon, .theme-row .icon, .sidebar-collection-toggle > .icon:first-child { width: 18px; height: 18px; }
.nav-link:hover, .space-link:hover, .sidebar-collection-toggle:hover, .theme-row:hover { background: var(--ap-accent-tint); color: var(--ap-ink); }
.nav-link.active, .space-link.active { color: var(--ap-ink); background: var(--ap-glass-3); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); animation: nav-hop 0.5s var(--ap-ease-spring); }
.sidebar-class-row.active { animation: nav-hop 0.5s var(--ap-ease-spring); }
.confirm-icon .bin-lid { transform-box: view-box; transform-origin: 8px 6px; animation: bin-lid 0.55s var(--ap-ease-spring) both; }
/* El salto del elemento activo es para cuando se cambia de pantalla, no para cada repintado. */
body:not([data-entering]) :is(.nav-link.active, .space-link.active, .sidebar-class-row.active) { animation: none; }
@keyframes nav-hop { 0% { translate: 0 -10px; } 58% { translate: 0 3px; } 100% { translate: 0 0; } }
@keyframes bin-lid { from { transform: rotate(0deg); } to { transform: rotate(-32deg); } }
@media (prefers-reduced-motion: reduce) {
  .nav-link.active, .space-link.active, .sidebar-class-row.active, .confirm-icon .bin-lid { animation: none; }
}
.nav-link kbd { color: var(--ap-muted); }
.space-list { gap: var(--ap-space-1); }
.space-link { grid-template-columns: minmax(0, 1fr) 32px; gap: 0; padding-block: var(--ap-space-1); min-height: 52px; }
.sidebar .space-link { min-height: 52px; }
.space-main { grid-template-columns: var(--ap-nav-icon) minmax(0, 1fr); gap: var(--ap-space-3); }
.space-main .space-monogram { width: 28px; height: 28px; margin-left: -4px; border-radius: var(--ap-radius-xs); font-size: 11px; }
.space-link-copy strong { font-weight: var(--ap-weight-ui); font-size: var(--ap-text-ui); }
.space-link-copy small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.sidebar .space-chevron, .sidebar .sidebar-class-chevron { width: 32px; min-width: 32px; height: 32px; border-radius: var(--ap-radius-xs); }
.space-folder-list, .space-block-list { padding-left: calc(var(--nav-x) + var(--ap-nav-icon) - var(--ap-space-2)); }
.sidebar-class-main, .space-block-link { padding-left: 0; font-size: var(--ap-text-ui); }
.sidebar-collection-toggle { grid-template-columns: var(--ap-nav-icon) minmax(0, 1fr) auto 32px; gap: var(--ap-space-3); }
.sidebar-collection-toggle > .icon:last-child { width: 14px; height: 14px; justify-self: center; }
.sidebar-collection-toggle small { color: var(--ap-muted); border-color: var(--ap-line); }
.sidebar-library-row > button, .sidebar-library-row > span { padding-left: calc(var(--nav-x) - var(--ap-space-2)); }
.tools-nav { border-top: 1px solid var(--ap-line); padding-top: var(--ap-space-3); }
/* Las secciones siguen a Inicio y Buscar como un solo bloque; la raya separa los espacios. */
.primary-nav + .tools-nav { border-top: 0; padding-top: 0; }
.tools-nav + .nav-section { border-top: 1px solid var(--ap-line); padding-top: var(--ap-space-2); }
.tools-nav, .sidebar-footer { background: transparent; }
.sidebar-footer {
  position: relative;
  flex: 0 0 auto;
  gap: var(--ap-space-1);
  margin-top: 0;
  padding: var(--ap-space-2);
  border-top: 1px solid var(--ap-line);
  background: transparent;
}
.theme-row { justify-content: space-between; }
.theme-row > span:first-child { gap: var(--ap-space-3); font-size: var(--ap-text-ui); }
.theme-row .switch { width: 34px; height: 20px; }
/* El punto llena el hueco interior (34×20 menos borde y relleno = 28×14) para quedar centrado en los dos estados. */
.theme-row .switch i { width: 14px; height: 14px; }
.theme-row .switch.active i { transform: translateX(14px); }
/* La cuenta vive en el pie de la barra lateral, nunca flotando sobre el contenido. */
.sidebar-account { display: block; min-height: 0; padding: 0; }
.sidebar-account:empty { display: none; }
.sidebar-account .motor-user-chip {
  position: static;
  display: grid;
  width: 100%;
  min-height: var(--ap-control);
  grid-template-columns: var(--ap-nav-icon) minmax(0, 1fr) auto;
  gap: var(--ap-space-3);
  align-items: center;
  padding-left: calc(var(--nav-x) - var(--ap-space-2));
  padding-right: var(--ap-space-2);
  border: 0;
  border-radius: var(--ap-radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ap-ink-2);
  font-family: var(--ap-font);
  font-size: var(--ap-text-ui);
  font-weight: var(--ap-weight-ui);
  text-align: left;
}
.sidebar-account .motor-user-chip:hover { background: var(--ap-accent-tint); color: var(--ap-ink); }
.sidebar-account .motor-user-dot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--ap-reflection), transparent 50%), linear-gradient(150deg, var(--ap-accent), var(--ap-accent-deep)); box-shadow: inset 0 -3px 6px var(--ap-inset-shade); }
.sidebar-account .motor-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .motor-user-label { color: var(--ap-muted); font-size: var(--ap-text-meta); }
body > .motor-user-chip { position: fixed; right: var(--ap-space-4); bottom: var(--ap-space-4); }

.topbar {
  min-height: var(--topbar-height);
  padding-inline: var(--ap-space-3);
  gap: var(--ap-space-2);
  border-radius: var(--ap-radius-md);
  background: var(--ap-glass-2);
  border: 1px solid var(--ap-glass-edge);
  box-shadow: var(--ap-shadow-2);
}
.topbar::after { display: none; }
.topbar .icon-button { width: var(--ap-control); height: var(--ap-control); }
.search-trigger { gap: var(--ap-space-2); padding-inline: var(--ap-space-3); color: var(--ap-muted); }
.search-trigger:hover { color: var(--ap-ink); background: var(--ap-glass-3); }
.topbar-actions { gap: var(--ap-space-2); }
.timer-control { padding-inline: var(--ap-space-3); gap: var(--ap-space-2); }
.timer-control small { font-weight: var(--ap-weight-strong); color: var(--ap-accent); }
.app-body { scrollbar-gutter: stable; }
.main-content { min-height: calc(100dvh - var(--topbar-height) - 24px); }
/* La app enfoca <main> (tabindex="-1") al cambiar de ruta para los lectores de
   pantalla. No está en el orden de tabulación: sin anillo, que asomaba en
   rosa por las esquinas de la barra superior tras navegar con el teclado. */
.main-content:focus, .main-content:focus-visible { outline: none; }
.page { width: min(1480px, 100%); padding: var(--ap-space-5) var(--ap-gutter) var(--ap-space-8); }

/* ----------------------------------------------- 4. Cabeceras de vista/sección */
.dashboard-intro,
.standard-heading,
.grades-page-heading,
.class-intro {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ap-space-5);
  align-items: end;
  margin-bottom: var(--ap-space-5);
  padding: var(--ap-inset);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-lg);
  background: linear-gradient(115deg, var(--ap-glass-3), var(--ap-glass-1));
  box-shadow: var(--ap-shadow-2);
  overflow: hidden;
}

.standard-heading > div, .grades-page-heading > div, .dashboard-intro > div:first-child { max-width: 62ch; z-index: 2; }
.standard-heading .period-switch { align-self: end; z-index: 2; }
.standard-heading h1, .grades-page-heading h1 { max-width: 24ch; }

/* Cabecera de Inicio: saludo según la hora y, a la derecha, gotas que se funden con
   los ojos de Bloop. Se quita con la cruz (ver homeIntro en app.js). */
.dashboard-intro { --home-scene-w: 240px; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 220px; align-items: center; padding-right: calc(var(--home-scene-w) + var(--ap-space-5)); }
.dashboard-intro > .home-copy { position: relative; z-index: 1; max-width: 100%; }
.home-greeting { margin: 0 0 var(--ap-space-2); font: 700 var(--ap-text-label)/1 var(--ap-font); letter-spacing: var(--ap-tracking-label); text-transform: uppercase; color: var(--ap-accent); }
.dashboard-intro > .home-scene { position: absolute; z-index: 0; top: 0; right: var(--ap-space-5); bottom: 0; width: var(--home-scene-w); display: grid; place-items: center; pointer-events: none; }
.home-drops { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.home-drops .pink { fill: url(#home-pink); }
.home-drops .hi { stop-color: var(--ap-brand-hi); }
.home-drops .lo { stop-color: var(--ap-brand-lo); }
.home-drops .lav { fill: var(--ap-lav); }
.home-drops .peach { fill: var(--ap-peach); }
.home-drops .shine { fill: var(--ap-reflection); opacity: 0.55; }
.home-eyes ellipse { fill: var(--ap-on-brand); transform-box: fill-box; transform-origin: center; animation: home-blink 6s ease-in-out infinite; }
.home-eyes path { fill: none; stroke: var(--ap-on-brand); stroke-width: 3.5; stroke-linecap: round; }
/* Cada gota deriva unos píxeles a su ritmo; la grande arrastra sus ojos y su brillo. */
.home-drops .drop { animation: home-drift var(--t, 14s) ease-in-out infinite alternate; }
.home-drops .d1 { --dx: 4px; --dy: -5px; --t: 9s; }
.home-drops .d2 { --dx: -10px; --dy: 8px; --t: 11s; }
.home-drops .d3 { --dx: 12px; --dy: -8px; --t: 13s; }
.home-drops .d4 { --dx: -8px; --dy: -10px; --t: 12s; }
.home-drops .d5 { --dx: -14px; --dy: 6px; --t: 10s; }
.home-drops .d6 { --dx: 10px; --dy: 10px; --t: 14s; }
.home-drops .d7 { --dx: 14px; --dy: -4px; --t: 9s; }
@keyframes home-drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes home-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
.home-intro-close { position: absolute; z-index: 2; top: var(--ap-space-3); right: var(--ap-space-3); width: 36px; height: 36px; color: var(--ap-muted); background: transparent; }
.home-intro-close:hover { color: var(--ap-ink); background: var(--ap-glass-3); }
@media (max-width: 760px) {
  /* En columna, el dibujo arranca en el mismo borde que el texto de debajo. */
  .dashboard-intro { --home-scene-w: 180px; padding-right: var(--ap-inset); padding-top: 148px; align-items: end; }
  .dashboard-intro > .home-scene { top: var(--ap-space-4); right: auto; bottom: auto; left: var(--ap-inset); height: 116px; place-items: center start; }
}
@media (prefers-reduced-motion: reduce) { .home-drops .drop, .home-eyes ellipse { animation: none; } }

.studio-art { display: none; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ap-space-5);
  min-height: 0;
  margin-bottom: var(--ap-space-4);
}
.section-heading.inline { min-height: 0; margin-bottom: var(--ap-space-3); }
.section-heading > div { min-width: 0; }
.section-heading small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.class-list-actions { display: flex; gap: var(--ap-space-2); align-items: center; }
.class-filter { display: flex; align-items: center; gap: var(--ap-space-2); padding-inline: var(--ap-space-3); min-width: 260px; color: var(--ap-muted); }
.class-filter input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--ap-ink); font-size: var(--ap-text-ui); outline: 0; }

/* Vista de clase: un solo borde de contenido; el título no lleva relleno propio. */
.class-intro { grid-template-columns: minmax(0, 1fr); gap: var(--ap-space-5); padding: var(--ap-inset); }
.class-title-block { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--ap-space-3) var(--ap-space-4); padding: 0; }
.class-title-block .back-link { grid-column: 1; grid-row: 1; }
.class-title-block .status-pill { grid-column: 2; grid-row: 1; }
.class-title-block h1 { grid-column: 1 / -1; width: auto; max-width: 30ch; margin-top: var(--ap-space-2); }
.class-title-block .lead { grid-column: 1 / -1; margin-top: 0; }
.class-title-block .status-pill { display: inline-flex; align-items: center; gap: var(--ap-space-2); margin: 0; min-height: 28px; padding: 0 var(--ap-space-3); background: var(--ap-glass-3); border: 1px solid var(--ap-glass-edge); color: var(--ap-ink-2); font-size: var(--ap-text-meta); }
.back-link { display: inline-flex; align-items: center; gap: var(--ap-space-2); min-height: 28px; margin: 0; padding: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-ui); }
.back-link .icon { transform: rotate(180deg); width: 12px; }
.back-link:hover { color: var(--ap-ink); }
.editable-class-title,
.document-title-editor {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--ap-radius-xs);
  cursor: text;
  transition: box-shadow var(--ap-dur-fast) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease);
}
.editable-class-title:hover,
.document-title-editor:hover { box-shadow: 0 0 0 8px var(--ap-accent-tint); background: var(--ap-accent-tint); }
.editable-class-title:focus-visible,
.document-title-editor:focus-visible,
.document-page .document-title-editor:focus-visible { outline: 0; box-shadow: 0 0 0 8px var(--ap-glass-3), 0 0 0 10px var(--ap-accent); background: var(--ap-glass-3); }
.class-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr); gap: var(--ap-space-4); align-items: start; }
.class-documents { padding: var(--ap-inset-card); border-radius: var(--ap-radius-lg); background: var(--ap-glass-1); border: 1px solid var(--ap-glass-edge); box-shadow: var(--ap-shadow-1); }
.class-documents-heading { align-items: end; padding: 0; margin-bottom: var(--ap-space-4); }
.class-documents-heading p { font-size: var(--ap-text-meta); margin-top: var(--ap-space-1); }

/* ----------------------------------------------------- 5. Tarjetas y paneles */
.panel,
.stats-panel,
.grades-section,
.empty-state,
.space-class-disclosure,
.metric-card {
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-md);
  background: var(--ap-glass-1);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.panel { padding: var(--ap-inset-card); }
.panel-heading { display: flex; align-items: center; gap: var(--ap-space-2); min-height: 28px; margin-bottom: var(--ap-space-3); }
.panel-heading .panel-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--ap-radius-xs); color: var(--ap-accent-deep); background: var(--ap-accent-tint); }
.panel-heading small { margin-left: auto; color: var(--ap-muted); font-weight: var(--ap-weight-strong); }
.panel-heading .text-action { margin-left: auto; }

.home-top-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: var(--ap-space-4); align-items: stretch; margin: 0 0 var(--ap-space-6); }
.home-top-grid .focus-card,
.home-top-grid .goal-card,
:root[data-theme] .goal-card.featured-goal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--ap-inset-card);
  overflow: hidden;
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-lg);
  background: var(--ap-glass-1);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
}
.focus-card::before, .focus-card::after, .goal-card::before { content: none; }
.focus-content { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--ap-space-4); padding: var(--ap-space-2) 0 var(--ap-space-4); }
.focus-content > div { min-width: 0; }
.focus-content p { margin: 0 0 var(--ap-space-1); color: var(--ap-muted); font-size: var(--ap-text-meta); }
.focus-content h2 { margin: 0; font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); line-height: 1.2; letter-spacing: var(--ap-tracking-title); max-width: 30ch; }
/* La línea pertenece a la fila de metadatos y se mueve con ella. */
.focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-2) var(--ap-space-4);
  align-items: center;
  min-height: 0;
  margin-top: auto;
  padding: var(--ap-space-3) 0 0;
  border-top: 1px solid var(--ap-line);
  color: var(--ap-muted);
  font-size: var(--ap-text-meta);
}
.focus-meta span + span::before { width: 4px; height: 4px; margin: 0 var(--ap-space-2) 2px 0; background: var(--ap-accent); }
.goal-empty-copy, .goal-value { margin: var(--ap-space-2) 0 var(--ap-space-4); }
.goal-empty-copy strong { display: block; font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }
.goal-empty-copy p { margin: var(--ap-space-1) 0 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.goal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ap-space-2); margin-top: auto; }
.goal-actions.single { grid-template-columns: 1fr; }

.home-subjects { margin-top: 0; }
.spaces-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-space-4); }
.spaces-grid > .space-card-shell, .spaces-grid > .space-card-shell:nth-child(n) { grid-column: auto; grid-row: auto; }
.space-card-shell { border-radius: var(--ap-radius-lg); }
.space-card-shell .space-card {
  position: relative;
  min-height: 176px;
  padding: var(--ap-inset-card);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-lg);
  background: var(--ap-glass-1);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  transition: transform var(--ap-dur-base) var(--ap-ease-spring), box-shadow var(--ap-dur-base) var(--ap-ease);
}
.space-card-shell .space-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-2); }
.space-card-top { display: flex; justify-content: space-between; align-items: center; }
.space-card-top .space-monogram { width: var(--ap-control-round); height: var(--ap-control-round); border-radius: var(--ap-radius-sm); }
.space-card > strong { display: block; max-width: 24ch; margin-top: var(--ap-space-4); font-size: var(--ap-text-subtitle); font-weight: var(--ap-weight-strong); line-height: 1.3; }
.space-card > small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
/* Tarjeta con portada propia: la foto manda, con un velo oscuro abajo para el texto. */
.space-card-shell .space-card.has-photo {
  background-image:
    linear-gradient(180deg, var(--cover-veil-top) 0%, var(--cover-veil-mid) 45%, var(--cover-veil-bottom) 100%),
    var(--space-cover-image);
  background-size: cover, cover;
  background-position: center, center;
  background-color: var(--ap-accent-deep);
  border-color: var(--cover-line);
}
.space-card-shell .space-card.has-photo::before,
.space-card-shell .space-card.has-photo::after { content: none; }
.space-card.has-photo > strong, .space-card.has-photo > small { color: var(--on-cover); text-shadow: 0 1px 2px var(--cover-text-shadow); }
.space-card.has-photo .space-monogram { border-color: var(--cover-line); }
.space-reorder-handle { top: var(--ap-inset-card); right: calc(var(--ap-inset-card) + 52px); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ap-space-4); margin-bottom: var(--ap-space-4); }
.metric-card { display: grid; align-content: start; gap: var(--ap-space-2); min-height: 0; padding: var(--ap-inset-card); }
.metric-card.featured-metric { grid-column: auto; background: linear-gradient(140deg, var(--ap-glass-3), var(--ap-glass-1)); }
.metric-card strong { font-size: var(--ap-text-metric); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); line-height: 1.05; }
.metric-card p { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.stats-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--ap-space-4); margin-bottom: var(--ap-space-4); }
.stats-context { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-5); }
.stats-context h2 { font-size: var(--ap-text-subtitle); }
.stats-context p { margin: var(--ap-space-1) 0 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }

/* ------------------------------------------------------ 6. Portada del espacio */
.space-cover,
:root[data-theme] .space-cover:not(.has-photo) {
  --cover-inset: var(--ap-inset);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: 280px;
  margin-bottom: var(--ap-space-5);
  padding: var(--cover-inset);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-2);
  overflow: hidden;
}
.space-cover.has-photo::before { display: block; border-radius: inherit; } /* sin asomar si la portada deja de recortar (menú abierto) */
.space-cover.has-photo::after { content: none; }
.space-cover.has-photo > * { position: relative; z-index: 1; }
.space-cover-copy { position: relative; z-index: 2; display: grid; align-self: stretch; align-content: end; gap: var(--ap-space-3); justify-items: start; max-width: min(720px, calc(100% - 72px)); padding-top: calc(var(--ap-control-round) + var(--ap-space-4)); }
/* Sin foto no hay nada que enseñar en la portada: la cabecera se ajusta al monograma, el título y la línea de clases, sin un hueco de ~100 px. */
.space-cover:not(.has-photo),
:root[data-theme] .space-cover:not(.has-photo) { min-height: 0; }
/* Monograma y menú: mismo tamaño y mismo margen desde su esquina superior. */
.space-cover .space-monogram.large,
.space-cover:not(.has-photo) .space-monogram.large {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: var(--ap-control-round);
  height: var(--ap-control-round);
  margin: 0;
  border-radius: var(--ap-radius-sm);
  font-size: var(--ap-text-ui);
  font-weight: var(--ap-weight-strong);
}
.space-cover:not(.has-photo) .space-monogram.large { font-family: var(--ap-font-display); font-weight: 800; color: var(--tint-mono); background: var(--ap-glass-2); border-color: var(--ap-glass-edge); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.space-cover.has-photo .space-monogram.large { color: var(--on-cover); background: var(--cover-glass); border-color: var(--cover-line); backdrop-filter: blur(16px); }
.space-cover-copy > p:last-child,
.space-cover:not(.has-photo) .space-cover-copy > p:last-child { margin: 0; font-size: var(--ap-text-body); }
.space-cover:not(.has-photo) .space-cover-copy > p:last-child { color: var(--ap-ink-2); }
/* La portada recorta su contenido; con el menú «…» abierto no, que el menú es más alto. Y se
   pone por encima de la barra «Buscar entre las clases», que si no tapaba su última opción. */
.space-cover:has(.space-actions-menu[open]),
:root[data-theme] .space-cover:not(.has-photo):has(.space-actions-menu[open]) { overflow: visible; z-index: 6; }
.space-cover > .cover-actions,
.space-cover.has-photo > .cover-actions { position: absolute; z-index: 4; top: var(--cover-inset); right: var(--cover-inset); display: block; width: auto; }
.space-actions-menu > summary,
.space-cover:not(.has-photo) .space-actions-menu > summary {
  width: var(--ap-control-round);
  height: var(--ap-control-round);
  display: grid;
  place-items: center;
  border-radius: var(--ap-radius-sm);
  border: 1px solid var(--ap-glass-edge);
  color: var(--ap-accent-deep);
  background: var(--ap-glass-3);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  cursor: pointer;
  list-style: none;
}
.space-cover.has-photo .space-actions-menu > summary { color: var(--on-cover); background: var(--cover-glass); border-color: var(--cover-line); backdrop-filter: blur(16px); }
.space-actions-menu > summary::-webkit-details-marker { display: none; }
.space-actions-panel { border-radius: var(--ap-radius-md); }
.space-page { padding-top: var(--ap-space-5); }
.archived-notice { margin-bottom: var(--ap-space-4); padding: var(--ap-space-3) var(--ap-space-4); border-radius: var(--ap-radius-sm); background: var(--ap-accent-tint); color: var(--ap-ink-2); font-size: var(--ap-text-meta); }

/* ------------------------------------------------------------------ 7. Filas */
.class-disclosure-list { display: grid; gap: var(--ap-space-2); }
.space-class-disclosure { border-radius: var(--ap-radius-md); overflow: hidden; }
/* Rejilla única: identidad · estado · contador · acción. Todo al mismo eje. */
.space-class-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--ap-space-7); min-height: 72px; align-items: stretch; }
.space-class-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.4fr) 96px;
  gap: var(--ap-space-4);
  align-items: center;
  padding: var(--ap-space-3) 0 var(--ap-space-3) var(--ap-inset-card);
  transition: background-color var(--ap-dur-fast) var(--ap-ease);
}
.space-class-open:hover { background: var(--ap-accent-tint); }
.space-class-identity { grid-template-columns: minmax(0, 1fr); gap: 0; }
.class-marker { display: none; }
.class-marker {
  width: 32px;
  height: 40px;
  border-radius: var(--ap-radius-xs);
  border: 1px solid var(--ap-glass-edge);
  background: radial-gradient(circle at 30% 20%, var(--ap-reflection), transparent 55%), linear-gradient(160deg, var(--ap-glass-3), var(--ap-accent-soft));
  box-shadow: inset 0 -3px 6px var(--ap-inset-shade), var(--ap-shadow-1);
}
.space-class-identity strong { font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); line-height: var(--ap-leading-ui); }
.space-class-identity small { margin-top: 2px; color: var(--ap-muted); }
.space-class-status { display: flex; align-items: center; gap: var(--ap-space-2); color: var(--ap-ink-2); font-size: var(--ap-text-meta); }
.space-class-count { color: var(--ap-muted); font-size: var(--ap-text-meta); text-align: right; padding-right: var(--ap-space-2); font-variant-numeric: tabular-nums; }
.space-class-chevron { display: grid; place-items: center; border-left: 1px solid var(--ap-line); color: var(--ap-muted); transition: background-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease); }
.space-class-chevron:hover { background: var(--ap-accent-tint); color: var(--ap-ink); }
.space-class-chevron[aria-expanded="true"] .icon { transform: rotate(90deg); }
.space-class-content { padding: var(--ap-space-3) var(--ap-inset-card) var(--ap-inset-card); border-top: 1px solid var(--ap-line); }
.space-class-blocks button,
.block-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: var(--ap-space-3); align-items: center; min-height: 48px; padding: 0 var(--ap-space-2); border-radius: var(--ap-radius-xs); text-align: left; }
.space-class-blocks button:hover { background: var(--ap-accent-tint); }
.space-class-blocks button > span:first-child, .block-number { color: var(--ap-muted); font-size: var(--ap-text-meta); font-variant-numeric: tabular-nums; }
.distribution-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 72px; gap: var(--ap-space-3); align-items: center; min-height: 44px; padding: var(--ap-space-1) 0; border-bottom: 1px solid var(--ap-line); }
.distribution-row:last-child { border-bottom: 0; }
.distribution-row > span { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--ap-space-3); align-items: center; }
.distribution-row > span i { display: block; width: 4px; height: 20px; border-radius: 2px; background: var(--ap-accent); }
.distribution-row strong { text-align: right; font-size: var(--ap-text-ui); }
.distribution-row > small { grid-column: auto; padding: 0; color: var(--ap-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------ 8. Repaso, Estadísticas, Calificaciones */
/* Chips de ámbito: ancho fijo, nombre truncado, una sola fila con scroll. */
.stats-scope-switch,
.grade-scope-switch {
  display: flex;
  gap: var(--ap-space-2);
  margin: 0 0 var(--ap-space-5);
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.stats-scope-switch::-webkit-scrollbar { display: none; }
.stats-scope-switch > button {
  flex: 0 0 auto;
  min-width: 0;
  width: 220px;
  min-height: var(--ap-control);
  gap: var(--ap-space-2);
  padding: var(--ap-space-1) var(--ap-space-3) var(--ap-space-1) var(--ap-space-1);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-glass-1);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  color: var(--ap-ink-2);
  font-size: var(--ap-text-ui);
  font-weight: var(--ap-weight-ui);
  scroll-snap-align: start;
}
.stats-scope-switch > button:first-of-type { width: 96px; padding-inline: var(--ap-space-3); justify-content: center; }
.stats-scope-switch > button:last-child { grid-column: auto; }
.stats-scope-switch > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-scope-switch > button.active, .period-switch button.active { color: var(--ap-ink); background: var(--ap-glass-3); box-shadow: inset 0 1px 0 var(--ap-reflection), 0 0 0 1px var(--ap-accent-soft), var(--ap-shadow-1); }
.stats-scope-switch .space-monogram { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--ap-radius-xs); }
.grades-section { padding: var(--ap-inset-card); }
.activity-calendar { padding: var(--ap-inset-card); }
.activity-calendar-scroll { overflow-x: auto; padding-bottom: var(--ap-space-2); }
/* La rejilla ocupa todo el ancho de la tarjeta (semanas de 12 px como mínimo,
   celdas cuadradas); si no cabe, hace scroll dentro de la tarjeta. */
.activity-calendar-layout { display: grid; grid-template-columns: 16px minmax(max-content, 1fr); column-gap: 8px; row-gap: 6px; width: 100%; }
.activity-calendar-months, .activity-calendar-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12px, 1fr); gap: 3px; }
.activity-calendar-months span { grid-column: span var(--span, 1); overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 1; color: var(--ap-muted); }
.activity-calendar-dow { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; color: var(--ap-muted); font-size: 10px; line-height: 1; }
.activity-calendar-dow span { display: flex; align-items: center; }
.activity-calendar-week { display: grid; grid-template-rows: repeat(7, auto); gap: 3px; }
.activity-calendar-cell { display: block; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--ap-ink) 8%, transparent); }
.activity-calendar-week .activity-calendar-cell { width: 100%; height: auto; aspect-ratio: 1; }
.activity-calendar-cell.lvl-1 { background: color-mix(in srgb, var(--ap-brand) 30%, transparent); }
.activity-calendar-cell.lvl-2 { background: color-mix(in srgb, var(--ap-brand) 52%, transparent); }
.activity-calendar-cell.lvl-3 { background: color-mix(in srgb, var(--ap-brand) 74%, transparent); }
.activity-calendar-cell.lvl-4 { background: var(--ap-brand); }
.activity-calendar-cell.is-future { visibility: hidden; }
.activity-calendar-scale { display: flex; align-items: center; gap: 4px; margin: var(--ap-space-3) 0 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.activity-calendar-months-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--ap-space-3); margin: var(--ap-space-4) 0 0; padding: 0; list-style: none; }
.activity-calendar-months-list li { display: grid; gap: 4px; min-width: 0; }
.activity-calendar-months-list span { color: var(--ap-ink-2); font-size: var(--ap-text-meta); text-transform: capitalize; }
.activity-calendar-months-list b { display: block; height: 6px; width: var(--fill, 0%); max-width: 100%; border-radius: 6px; background: var(--ap-brand); }
.activity-calendar-months-list small { color: var(--ap-muted); font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .activity-calendar-week .activity-calendar-cell { animation: calendar-cell 0.35s var(--ap-ease) both; animation-delay: calc(var(--w) * 12ms); }
}
@keyframes calendar-cell { from { opacity: 0; scale: 0.5; } }
.grades-section h2, .grades-section .section-heading { margin-bottom: var(--ap-space-3); }

/* Repaso: misma estructura que Estadísticas (cabecera, ámbito, métricas, listas). */
.repaso-heading { grid-template-columns: minmax(0, 1fr) auto; }
.repaso-heading-actions { display: flex; gap: var(--ap-space-2); align-self: end; flex-wrap: wrap; justify-content: flex-end; }
.repaso-page > * + * { margin-top: 0; }
.repaso-metrics { margin: 0 0 var(--ap-space-6); }
.repaso-page .section-block + .section-block { margin-top: var(--ap-space-6); }
.rp-list { display: grid; gap: var(--ap-space-2); }
.rp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) auto;
  gap: var(--ap-space-5);
  align-items: center;
  min-height: 84px;
  padding: var(--ap-space-4) var(--ap-inset-card);
  border: 1px solid var(--ap-glass-edge);
  border-radius: var(--ap-radius-md);
  background: var(--ap-glass-1);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  transition: background-color var(--ap-dur-fast) var(--ap-ease), box-shadow var(--ap-dur-base) var(--ap-ease);
}
.rp-row:hover { background: var(--ap-glass-2); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-2); }
.rp-row.quiet { background: transparent; box-shadow: none; border-style: dashed; }
.rp-main { display: grid; gap: 2px; min-width: 0; }
.rp-space { color: var(--ap-muted); font-size: var(--ap-text-label); font-weight: var(--ap-weight-strong); letter-spacing: var(--ap-tracking-label); text-transform: uppercase; }
.rp-main h3 { margin: 0; font-size: var(--ap-text-body); font-weight: var(--ap-weight-strong); line-height: var(--ap-leading-ui); overflow-wrap: anywhere; }
.rp-meta { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.rp-state { display: grid; gap: var(--ap-space-2); min-width: 0; }
.rp-state .repaso-progress { max-width: none; height: 6px; }
.rp-state .repaso-counts { display: flex; flex-wrap: wrap; gap: var(--ap-space-1) var(--ap-space-3); margin: 0; padding: 0; list-style: none; font-size: var(--ap-text-meta); color: var(--ap-muted); }
.rp-state .repaso-count { display: inline-flex; align-items: center; gap: 6px; }
.rp-state .repaso-count b { width: 8px; height: 8px; border-radius: 50%; }
.rp-score { display: grid; gap: 2px; }
.rp-score strong { font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); line-height: 1; font-variant-numeric: tabular-nums; }
.rp-score span { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.rp-score.pending span { color: var(--ap-muted); }
.rp-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ap-space-2); white-space: nowrap; }
.rp-actions .primary-button, .rp-actions .secondary-button { min-width: 150px; }
.rp-more { position: relative; }
.rp-more-spacer { display: block; width: var(--ap-control); height: var(--ap-control); }
.rp-more > summary { list-style: none; display: grid; place-items: center; width: var(--ap-control); height: var(--ap-control); border-radius: var(--ap-radius-sm); color: var(--ap-muted); cursor: pointer; }
.rp-more > summary::-webkit-details-marker { display: none; }
.rp-more > summary:hover, .rp-more[open] > summary { background: var(--ap-accent-tint); color: var(--ap-ink); }
.rp-more-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; gap: 2px; min-width: 240px; padding: var(--ap-space-1); border-radius: var(--ap-radius-md); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-3); backdrop-filter: var(--ap-glass-blur); -webkit-backdrop-filter: var(--ap-glass-blur); }
.rp-more-panel button { display: block; width: 100%; padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-xs); color: var(--ap-ink); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); text-align: left; white-space: nowrap; }
.rp-more-panel button:hover { background: var(--ap-accent-tint); }
.rp-more-panel button.danger { color: var(--ap-danger); }
/* Diálogos de tarjetas y tests: los controles nativos no se estiran. */
.repaso-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--ap-space-3); align-items: center; min-height: var(--ap-control); padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); }
.repaso-check input[type="radio"], .repaso-check input[type="checkbox"], .repaso-choice-option input, .repaso-mode input, .repaso-option input { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 0; padding: 0; }
.repaso-check > span { min-width: 0; font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); color: var(--ap-ink); }
.repaso-check small { color: var(--ap-muted); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-body); }
.repaso-check:has(input:checked) { border-color: var(--ap-accent-soft); background: var(--ap-glass-3); box-shadow: 0 0 0 1px var(--ap-accent-soft); }
.repaso-picker-group { display: grid; gap: var(--ap-space-2); }
.repaso-picker-group + .repaso-picker-group { margin-top: var(--ap-space-3); }
.repaso-picker-space { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-label); font-weight: var(--ap-weight-strong); letter-spacing: var(--ap-tracking-label); text-transform: uppercase; }
.repaso-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--ap-space-2); }
.repaso-choice-option { display: grid; gap: 2px; padding: var(--ap-space-3) var(--ap-space-4); border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); cursor: pointer; }
.repaso-choice-option > span { font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); }
.repaso-choice-option small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.repaso-choice-option:has(input:checked) { background: var(--ap-glass-3); border-color: var(--ap-accent-soft); box-shadow: 0 0 0 1px var(--ap-accent-soft); }
.repaso-choice-option input { position: absolute; opacity: 0; pointer-events: none; }
.repaso-form fieldset.field { display: grid; gap: var(--ap-space-2); margin: 0; padding: 0; border: 0; }
.repaso-form legend, .repaso-form label > span:first-child, .modal label > span:first-child { font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); color: var(--ap-ink-2); }
.repaso-form .field-hint, .repaso-cost { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.repaso-form textarea { min-height: 72px; padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-line-strong); background: var(--ap-glass-3); font-family: var(--ap-font); font-size: var(--ap-text-ui); resize: vertical; }
.feedback-form textarea { min-height: 140px; padding: var(--ap-space-2) var(--ap-space-3); border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-line-strong); background: var(--ap-glass-3); font-family: var(--ap-font); font-size: var(--ap-text-ui); line-height: 1.5; resize: vertical; }

/* Buzón: selector de tipo (sin <legend> dentro de un fieldset con borde) y animación de enviado. */
.feedback-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); background: var(--ap-glass-1); }
.feedback-kind label { position: relative; display: block; margin: 0; }
.feedback-kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.modal .feedback-kind label > span { display: grid; min-height: 40px; place-items: center; border-radius: var(--ap-radius-xs); color: var(--ap-muted); font-size: var(--ap-text-ui); font-weight: var(--ap-weight-ui); transition: background var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease); pointer-events: none; }
.feedback-kind label:hover > span { color: var(--ap-ink); }
.modal .feedback-kind label:has(input:checked) > span { background: var(--ap-glass-3); color: var(--ap-accent); font-weight: var(--ap-weight-strong); box-shadow: var(--ap-shadow-1); }
.feedback-kind label:has(input:focus-visible) > span { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

.feedback-sent { display: grid; justify-items: center; gap: var(--ap-space-2); padding: var(--ap-space-5) var(--ap-space-3) var(--ap-space-6); text-align: center; }
.feedback-sent-title { margin: 0; font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); color: var(--ap-ink); }
.feedback-sent-copy { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-ui); }
.feedback-envelope { width: 168px; height: auto; overflow: visible; }
.feedback-envelope .env-back { fill: color-mix(in srgb, var(--ap-accent) 72%, #000); }
.feedback-envelope .env-front { fill: var(--ap-accent); }
.feedback-envelope .env-flap { fill: color-mix(in srgb, var(--ap-accent) 78%, #fff); stroke: var(--ap-accent); stroke-width: 1.5; stroke-linejoin: round; transform-box: view-box; transform-origin: 80px 50px; }
.feedback-envelope .env-flap-back { transform: scaleY(-1); }
.feedback-envelope .env-flap-front { transform: scaleY(0); }
.feedback-envelope .env-letter rect { fill: #fffdf7; stroke: var(--ap-line-strong); }
.feedback-envelope .env-letter path { fill: none; stroke: color-mix(in srgb, var(--ap-accent) 45%, #b9b2a3); stroke-width: 3; stroke-linecap: round; }
.feedback-envelope .env-letter { transform: translateY(-34px); }
.feedback-envelope .env-seal circle { fill: #fff; stroke: var(--ap-accent); stroke-width: 2; }
.feedback-envelope .env-seal path { fill: none; stroke: var(--ap-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.feedback-envelope .env-seal { transform-box: fill-box; transform-origin: center; transform: scale(0); }
@media (prefers-reduced-motion: no-preference) {
  .feedback-envelope { animation: env-pop 420ms var(--ap-ease-spring, ease-out) both, env-fly 520ms cubic-bezier(.5,0,.75,0) 1650ms forwards; }
  .feedback-envelope .env-letter { animation: env-letter-in 560ms cubic-bezier(.3,.7,.3,1) 220ms forwards; }
  .feedback-envelope .env-flap-back { animation: env-flap-back 180ms ease-in 820ms forwards; }
  .feedback-envelope .env-flap-front { animation: env-flap-front 200ms ease-out 1000ms forwards; }
  .feedback-envelope .env-seal { animation: env-seal 320ms var(--ap-ease-spring, ease-out) 1220ms forwards; }
  .feedback-sent-title, .feedback-sent-copy { animation: env-text 320ms ease-out 1150ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-envelope .env-letter { transform: translateY(32px); }
  .feedback-envelope .env-flap-back { visibility: hidden; }
  .feedback-envelope .env-flap-front, .feedback-envelope .env-seal { transform: none; }
}
@keyframes env-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes env-letter-in { to { transform: translateY(32px); } }
@keyframes env-flap-back { to { transform: scaleY(0); visibility: hidden; } }
@keyframes env-flap-front { to { transform: scaleY(1); } }
@keyframes env-seal { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes env-text { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes env-fly { 0% { opacity: 1; transform: none; } 25% { transform: translate(-6px, 6px) rotate(-4deg); } 100% { opacity: 0; transform: translate(150px, -120px) rotate(14deg) scale(.55); } }

/* Estudio y test: barra superior alineada, opciones con el control centrado. */
.repaso-study-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-4); min-height: var(--ap-control); }
.repaso-mode { display: inline-flex; align-items: center; gap: var(--ap-space-2); color: var(--ap-ink-2); font-size: var(--ap-text-ui); }
.repaso-progress-label { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.repaso-options { display: grid; gap: var(--ap-space-2); }
.repaso-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--ap-space-3); align-items: center; min-height: var(--ap-control); padding: var(--ap-space-3) var(--ap-space-4); border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); font-size: 15px; font-weight: var(--ap-weight-body); letter-spacing: 0; line-height: var(--ap-leading-ui); }
.repaso-option:has(input:checked) { background: var(--ap-glass-3); border-color: var(--ap-accent-soft); box-shadow: 0 0 0 1px var(--ap-accent-soft); }
.repaso-question { font-size: var(--ap-text-body); font-weight: var(--ap-weight-body); letter-spacing: 0; line-height: var(--ap-leading-body); }
.repaso-question-prompt { font-size: clamp(18px, 1.6vw, 21px); font-weight: var(--ap-weight-strong); letter-spacing: -0.01em; line-height: 1.35; }
.repaso-question-actions, .repaso-exam-actions { display: flex; justify-content: flex-end; gap: var(--ap-space-2); }

/* ------------------------------------------------------------------ 9. Editor */
/* Dos filas explícitas: contexto + acciones arriba, herramientas abajo a ancho
   completo. Las dos filas empiezan en el mismo borde. */
.editor-command-bar,
.editor-shell .editor-command-bar {
  top: calc(var(--topbar-height) + var(--ap-space-3));
  width: min(100%, 1400px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: var(--ap-space-2) var(--ap-space-3);
  align-items: center;
  padding: var(--ap-space-2) var(--ap-space-3);
  border-radius: var(--ap-radius-md);
  background: var(--ap-glass-3);
  border: 1px solid var(--ap-glass-edge);
  box-shadow: var(--ap-shadow-2);
}
.editor-command-bar .editor-context { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: var(--ap-space-3); min-width: 0; }
.editor-command-bar .editor-context > span { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.editor-command-bar .editor-context p { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-label); text-transform: uppercase; letter-spacing: var(--ap-tracking-label); font-weight: var(--ap-weight-strong); }
.editor-command-bar .editor-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ap-text-ui); font-weight: var(--ap-weight-strong); }
.editor-command-bar .editor-actions { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: var(--ap-space-2); }
.editor-command-bar .editor-format-tools { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; padding-top: var(--ap-space-2); border-top: 1px solid var(--ap-line); }
.editor-format-tools > button, .editor-format-tools > .toolbar-file-button { min-width: 36px; min-height: 36px; border-radius: var(--ap-radius-xs); }
.editor-format-tools > button:hover { background: var(--ap-accent-tint); color: var(--ap-ink); }
.editor-format-tools .toolbar-separator, .editor-format-tools hr { width: 1px; height: 22px; margin: 0 var(--ap-space-1); background: var(--ap-line); border: 0; }
.editor-actions .save-state { color: var(--ap-muted); font-size: var(--ap-text-meta); white-space: nowrap; }
/* Panel de revisión y documento comparten el mismo ancho y el mismo eje. */
.editor-document-scroll { padding: var(--ap-space-4) 0 0; }
.editor-document-scroll > .v2-review-panel,
.editor-document-scroll > .editor-warning,
.editor-document-scroll > .note-index,
.editor-document-scroll .paper-sheet,
.document-page .paper-sheet {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--ap-inset));
  max-width: 1400px;
  margin: 0 auto var(--ap-space-5);
}
.v2-review-panel { border-radius: var(--ap-radius-lg); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); box-shadow: var(--ap-shadow-1); }
.v2-review-panel h2, .v2-review-title { font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }
.paper-sheet { border-radius: var(--ap-radius-lg); box-shadow: var(--ap-shadow-2); }
.paper-sheet h1 { font-size: var(--type-paper-heading); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }

/* ------------------------------------------------------- 10. Cuenta y diálogos */
.motor-auth-card { border-radius: var(--ap-radius-lg); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-3); }
.motor-auth-card h1 { font-size: var(--ap-text-page); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }
.motor-auth-btn { min-height: var(--ap-control); border-radius: var(--ap-radius-sm); font-weight: var(--ap-weight-strong); }
.motor-account-head h2 { font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); }
.motor-account-section { border-radius: var(--ap-radius-md); }
.motor-account, .modal { border-radius: var(--ap-radius-lg); border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-3); }
.modal::after { display: none; }
.toast { border-radius: var(--ap-radius-sm); font-family: var(--ap-font); }

/* Color del espacio en «Cambiar portada»: cinco muestras redondas (radios). */
.tint-field { margin: 0; padding: 0; border: 0; display: grid; gap: var(--ap-space-3); }
.tint-field legend { display: grid; gap: 2px; padding: 0; margin-bottom: var(--ap-space-3); }
.tint-field legend small { color: var(--ap-muted); font-size: var(--ap-text-meta); }
.tint-options { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); }
.tint-swatch { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; font-size: var(--ap-text-meta); color: var(--ap-ink-2); }
.tint-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tint-dot { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, var(--ap-reflection), transparent 45%), var(--tint-bg); border: 2px solid var(--tint-mono); box-shadow: var(--ap-shadow-1); transition: transform var(--ap-dur-base) var(--ap-ease-spring); }
.tint-swatch input:checked + .tint-dot { transform: scale(1.08); box-shadow: 0 0 0 3px var(--ap-bg), 0 0 0 5px var(--tint-mono); }
.tint-swatch input:checked ~ .tint-name { color: var(--ap-ink); font-weight: var(--ap-weight-strong); }
.tint-swatch input:focus-visible + .tint-dot { outline: 2.5px solid var(--ap-accent); outline-offset: 4px; }
/* «Más colores»: abre el selector del sistema; la muestra es una rueda de color. */
.tint-more .tint-dot { border-color: var(--ap-line-strong); background: radial-gradient(circle, var(--ap-bg) 0 28%, transparent 30%), conic-gradient(var(--ap-brand), var(--ap-peach), var(--ap-warning), var(--ap-success), var(--ap-tint-teal-mono), var(--ap-lav), var(--ap-brand)); }
.tint-more input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tint-more input[type="color"]:focus-visible + .tint-dot { outline: 2.5px solid var(--ap-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .tint-dot { transition: none; } }

/* --------------------------------------------------------------- 11. Movimiento */
.nav-link, .space-link, .space-card, .panel, .stats-scope-switch > button, .space-class-disclosure {
  transition: background-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease),
    transform var(--ap-dur-base) var(--ap-ease-spring), box-shadow var(--ap-dur-base) var(--ap-ease);
}
.main-content { view-transition-name: atlas-content; }
::view-transition-old(atlas-content) { animation: ap-out var(--ap-dur-fast) var(--ap-ease) both; }
::view-transition-new(atlas-content) { animation: ap-in var(--ap-dur-slow) var(--ap-ease) both; }
@keyframes ap-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes ap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Solo al navegar (lo marca commitRender): al refrescar datos el contenido no vuelve a entrar. */
body[data-entering] .page > * { animation: ap-rise var(--ap-dur-slow) var(--ap-ease) both; }
body[data-entering] .page > *:nth-child(2) { animation-delay: 40ms; }
body[data-entering] .page > *:nth-child(3) { animation-delay: 80ms; }
body[data-entering] .page > *:nth-child(n+4) { animation-delay: 120ms; }
@keyframes ap-rise { from { opacity: 0.001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(atlas-content), ::view-transition-new(atlas-content), .page > * { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .panel, .space-card, .dashboard-intro, .standard-heading, .class-intro, .editor-command-bar { background: var(--ap-glass-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --------------------------------------------------------------- 12. Responsive */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid, .class-layout { grid-template-columns: 1fr; }
}
/* Altura real de la barra superior por tramo (liquid-glass.css): una fila en todos
   los anchos desde que se quitó el selector de espacio; el área segura del iPhone se suma. */
@media (max-width: 980px) { :root, :root[data-theme] { --topbar-height: calc(64px + env(safe-area-inset-top)); } }
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) { :root, :root[data-theme] { --topbar-height: calc(60px + env(safe-area-inset-top)); } }
@media (max-width: 980px) {
  .sidebar, .app-shell.sidebar-collapsed .sidebar { top: 8px; bottom: 8px; left: 8px; height: calc(100dvh - 16px); border-radius: var(--ap-radius-lg); }
  /* Barra superior en una sola fila (el selector de espacio que ocupaba la segunda ya no está). */
  .topbar { height: auto; min-height: 0; grid-template-rows: auto; row-gap: 0; padding-block: var(--ap-space-2); align-items: center; }
  body:is([data-route="document"], [data-route="summary"]) .topbar { flex: 0 0 auto; }
  .space-class-count { padding-left: 44px; }
  .class-title-block { grid-template-columns: 1fr; }
  .class-title-block .status-pill { grid-column: 1; grid-row: 2; white-space: nowrap; }
  .class-title-block h1 { grid-row: 3; }
  .class-title-block .lead { grid-row: 4; }
  .home-top-grid { grid-template-columns: 1fr; }
  .dashboard-intro > div:first-child { max-width: 100%; }
  .space-class-open { grid-template-columns: minmax(0, 1fr); gap: var(--ap-space-1); padding-block: var(--ap-space-3); }
  .rp-row { grid-template-columns: 1fr; gap: var(--ap-space-3); }
  .rp-actions { justify-content: flex-start; }
  .repaso-heading { grid-template-columns: 1fr; }
  .repaso-heading-actions { justify-content: flex-start; }
  .repaso-choice { grid-template-columns: 1fr; }
  .space-class-count { text-align: left; padding: 0; }
}
@media (max-width: 760px) {
  :root { --ap-inset: var(--ap-space-5); --ap-inset-card: var(--ap-space-4); --ap-text-page: 28px; --ap-text-display: 30px; --ap-text-section: 21px; }
  .page { padding-top: var(--ap-space-4); }
  .dashboard-intro, .standard-heading, .grades-page-heading, .class-intro, .space-cover:not(.has-photo) { min-height: 0; padding-right: var(--ap-inset); grid-template-columns: 1fr; align-items: start; gap: var(--ap-space-4); }
  .dashboard-intro { padding-bottom: var(--ap-inset); }
  .spaces-grid, .metric-grid, .goal-actions { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; align-items: stretch; gap: var(--ap-space-3); }
  .class-list-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .class-filter { min-width: 0; }
  .space-cover.has-photo { min-height: 240px; }
  .space-cover-copy { max-width: calc(100% - 56px); }
  .space-class-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .space-class-identity strong { white-space: normal; }
  .stats-scope-switch > button { width: 200px; }
  /* En móvil la fila hace scroll: el borde derecho se funde para que se note. */
  .stats-scope-switch { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
}

/* ============================================================================
   Dirección A (2026-09-24): Bloop de vidrio rosa, Bricolage + Figtree
   ========================================================================== */

/* Títulos de la interfaz en la tipografía de marca. El documento de apuntes
   (.paper-sheet) conserva la suya: es contenido, no interfaz. */
.page h1, .dashboard-intro h1, .standard-heading h1, .grades-page-heading h1, .class-title-block h1, .space-cover h1,
.page h2, .section-heading h2, .class-documents-heading h2, .class-blocks h2, .stats-context h2, .grades-section h2,
.source-manager h2, .v2-engine-panel h2, .repaso-section h2, .focus-content h2, .v2-review-panel h2, .v2-review-title,
.motor-auth-card h1, .motor-account-head h2, .goal-empty-copy strong,
.metric-card strong, .rp-score strong, .modal-card h2, .space-card > strong {
  font-family: var(--ap-font-display);
}
.paper-sheet h1, .paper-sheet h2, .paper-sheet h3 { font-family: inherit; }

/* Logotipo: «bloopy.» en minúsculas con el punto rosa. */
.ap-wordmark {
  font-family: var(--ap-font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: none;
}
.ap-wordmark i { font-style: normal; color: var(--ap-brand); }
.brand strong.ap-wordmark { font-size: 21px; line-height: 1; }

/* La marca es la gota: sin azulejo ni borde alrededor. */
img.brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 8px var(--ap-bloop-shadow));
  transition: transform var(--ap-dur-slow) var(--ap-ease-spring);
}
.brand:hover img.brand-mark { transform: translateY(-2px) rotate(-6deg) scale(1.05); }

.motor-auth-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 var(--ap-space-3);
  filter: drop-shadow(0 10px 16px var(--ap-bloop-shadow));
  animation: ap-bloop-bob 4.2s var(--ap-ease) infinite;
}
@keyframes ap-bloop-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }

/* Botón principal: rosa Bloop con texto oscuro (contraste 6:1) y brillo de vidrio. */
.primary-button,
:root[data-theme="dark"] .primary-button {
  color: var(--ap-on-brand);
  background: linear-gradient(160deg, var(--ap-brand-hi), var(--ap-brand) 55%, var(--ap-brand-lo));
  box-shadow: inset 0 1px 0 var(--ap-brand-sheen), inset 0 -8px 14px -8px var(--ap-brand-inner), 0 10px 22px -12px var(--ap-brand-glow);
}
.primary-button:hover { box-shadow: inset 0 1px 0 var(--ap-brand-sheen), inset 0 -8px 14px -8px var(--ap-brand-inner), 0 14px 28px -12px var(--ap-brand-glow-strong); }

@media (prefers-reduced-motion: reduce) {
  .motor-auth-mark { animation: none; }
  .brand:hover img.brand-mark { transform: none; }
}

/* ---- Bloop en los estados de la app (dirección A) ----
   escuchando: el motor procesa · curioso: hay dudas o algo se interrumpió ·
   celebrando: apuntes listos o exportados · durmiendo: estados vacíos. */
.bloop-art {
  display: block;
  height: auto;
  filter: drop-shadow(0 12px 14px var(--ap-bloop-shadow));
  pointer-events: none;
  user-select: none;
}
.v2-engine-panel > header > div,
.v2-review-panel > header > div { flex: 1 1 auto; min-width: 0; }
.v2-bloop { flex: none; width: 72px; margin-top: -4px; animation: ap-bloop-bob 4.2s var(--ap-ease) infinite; }
.v2-engine-panel:is(.queued, .preparing, .transcribing, .writing, .exporting, .receiving) .v2-bloop { animation: ap-bloop-listen 1.6s var(--ap-ease) infinite; }
/* Bloop 3D de los paneles de la clase y de revisión (mountBloop3d en app.js). Hasta que carga, y si no
   hay WebGL, se ve la imagen de siempre. Se puede tocar: se aplasta y rebota. */
:is(.v2-engine-panel, .v2-review-panel) > header > .v2-bloop3d { flex: none; position: relative; width: 180px; aspect-ratio: 3 / 2; margin: -16px -20px -20px -28px; cursor: pointer; }
.v2-bloop3d > .v2-bloop { position: absolute; inset: 0; margin: auto; width: 72px; }
.v2-bloop3d.is-3d > .v2-bloop { display: none; }
.bloop3d-stage, .bloop3d-stage canvas { display: block; width: 100%; height: 100%; }
.v2-engine-legal { margin: var(--ap-space-3) 0 0; color: var(--ap-muted); font-size: var(--type-meta); line-height: 1.45; }
.v2-engine-legal a { color: var(--ap-accent-deep); text-underline-offset: 3px; }
/* Subida de audio/PDF: porcentaje a la vista (una subida silenciosa parecía colgada). Abajo a la izquierda,
   lejos de los avisos (abajo a la derecha). */
.v2-upload-status { position: fixed; z-index: var(--ap-z-toast); left: 22px; bottom: 22px; width: min(320px, calc(100vw - 44px));
  display: grid; gap: var(--ap-space-2); padding: 12px 16px; border-radius: var(--ap-radius-sm);
  background: var(--atlas-glass-strong, var(--glass-surface-strong)); color: var(--ink);
  box-shadow: var(--atlas-depth, var(--glass-shadow)); backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%); font-family: var(--ap-font); font-size: var(--type-meta); }
.v2-upload-status p { display: grid; gap: 6px; margin: 0; }
.v2-upload-status[popover] { margin: 0; inset: auto auto 22px 22px; height: auto; border: 0; overflow: visible; }
.v2-upload-status progress { width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; appearance: none;
  background: color-mix(in srgb, var(--ap-accent-deep) 14%, transparent); accent-color: var(--ap-accent-deep); }
.v2-upload-status progress::-webkit-progress-bar { background: transparent; }
.v2-upload-status progress::-webkit-progress-value { background: var(--ap-accent-deep); border-radius: 999px; }
.v2-upload-status progress::-moz-progress-bar { background: var(--ap-accent-deep); border-radius: 999px; }
@media (max-width: 640px) {
  .v2-upload-status, .v2-upload-status[popover] { inset: calc(12px + env(safe-area-inset-top)) 16px auto 16px; width: auto; }
}
.v2-bloop.bloop-celebrating { animation: ap-bloop-hop 1.5s var(--ap-ease-spring) infinite; }
.empty-state .empty-bloop { width: 132px; margin: 0 auto var(--ap-space-3); animation: ap-bloop-breathe 4.8s ease-in-out infinite; }
.empty-state .empty-bloop.small { width: 92px; }
.grade-space-progress.is-empty { visibility: hidden; }
/* Texto de los estados vacíos legible (styles.css lo dejaba en 12 px). */
.empty-state h2 { margin: 0 0 var(--ap-space-2); font-family: var(--ap-font-display); font-size: var(--ap-text-section); font-weight: var(--ap-weight-title); letter-spacing: var(--ap-tracking-title); text-wrap: balance; }
.empty-state p { max-width: 52ch; margin: 0 0 var(--ap-space-4); color: var(--ap-ink-2); font-size: var(--ap-text-ui); line-height: 1.55; text-wrap: pretty; }
.toast.has-bloop { display: flex; align-items: center; gap: var(--ap-space-3); }
.toast-bloop { width: 40px; flex: none; animation: ap-bloop-hop 1.5s var(--ap-ease-spring) 2; }
@keyframes ap-bloop-listen { 50% { transform: translateY(-3px) scale(1.03, 0.98); } }
@keyframes ap-bloop-hop { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 45% { transform: translateY(-8px) scale(0.97, 1.03); } }
@keyframes ap-bloop-breathe { 50% { transform: scale(1.03, 0.98); } }
@media (max-width: 760px) {
  .v2-bloop { width: 60px; }
  :is(.v2-engine-panel, .v2-review-panel) > header > .v2-bloop3d { width: 168px; margin: -12px 0 -14px -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-bloop, .empty-state .empty-bloop, .toast-bloop { animation: none; }
}

/* Gestos de Rare UI dentro de la app. */
.primary-nav, .tools-nav, .space-list { position: relative; }
.nav-bounce-dot { position: absolute; left: 0; top: 0; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--ap-brand); pointer-events: none; }
.period-switch, .stats-scope-switch { position: relative; }
.period-switch:has(.period-goo) > button, .stats-scope-switch:has(.period-goo) > button { position: relative; z-index: 1; }
.period-switch:has(.period-goo) > button.active, .stats-scope-switch:has(.period-goo) > button.active { background: transparent; box-shadow: none; }
.period-goo { position: absolute; left: 0; top: 0; border-radius: var(--ap-radius-sm); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-1); pointer-events: none; }
.app-scroll-progress { position: fixed; top: 0; left: 0; z-index: var(--ap-z-progress); width: calc(var(--read, 0) * 100%); height: 3px; background: var(--ap-brand); pointer-events: none; }
.gravity-glyph { display: inline-block; animation: gravity-drop 0.7s var(--ap-ease-spring) both; animation-delay: calc(var(--g) * 40ms); transition: transform var(--ap-dur-base) var(--ap-ease-spring); }
@keyframes gravity-drop { from { transform: translateY(-18px); } 60% { transform: translateY(3px); } to { transform: none; } }
.v2-review-actions .v2-audio-player { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; }
.v2-audio-track { position: relative; flex: 1; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ap-ink) 10%, transparent); }
.v2-audio-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ap-brand); pointer-events: none; }
.v2-audio-track .v2-audio-seek { position: absolute; inset: -8px 0; width: 100%; height: 22px; margin: 0; opacity: 0; cursor: pointer; }

/* Nota de voz (VoiceNote de Rare UI, https://rareui.com): el tramo de clase de cada punto. */
.voice-note { --vn-h: 44px; position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; height: var(--vn-h); padding: 0 12px 0 5px; border-radius: 999px; user-select: none; }
.voice-note::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: color-mix(in srgb, var(--ap-ink) 6%, var(--ap-glass-2)); }
.voice-note-glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; mix-blend-mode: multiply; pointer-events: none; }
:root[data-theme="dark"] .voice-note-glow { mix-blend-mode: screen; }
.voice-note-field { position: absolute; inset: 0; opacity: 0; filter: blur(calc(var(--vn-h) * 0.32)); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,.3) 54%, #000 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.3) 46%, rgba(0,0,0,.3) 54%, #000 100%); }
.voice-note[data-playing="true"] .voice-note-field { opacity: 0.62; }
.voice-note-wash { position: absolute; inset: 0; background: radial-gradient(70% 170% at 8% 115%, var(--ap-brand) 0%, transparent 62%), radial-gradient(55% 150% at 40% 130%, var(--ap-brand) 0%, transparent 58%); }
.voice-note-blob { position: absolute; left: 0; top: 0; width: calc(var(--size) * var(--vn-h)); height: calc(var(--size) * var(--vn-h)); margin: calc(var(--size) * var(--vn-h) / -2) 0 0 calc(var(--size) * var(--vn-h) / -2); border-radius: 50%; background: var(--ap-brand); }
.voice-note-control { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: var(--ap-glass-3); color: var(--ap-ink); box-shadow: var(--ap-shadow-1); cursor: pointer; transition: transform 0.25s var(--ap-ease-spring); }
.voice-note-control:active { transform: scale(0.9); }
.voice-note-control svg { width: 24px; height: 24px; }
.voice-note-control path { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.voice-note-track { position: relative; flex: 1; align-self: stretch; border-radius: 4px; outline: none; cursor: pointer; touch-action: none; }
.voice-note:not([data-active]) .voice-note-track { cursor: default; }
.voice-note-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.voice-note-bars.is-played { clip-path: inset(0 100% 0 0); }
.voice-note-bar { flex: 1; min-width: 2px; border-radius: 999px; background: color-mix(in srgb, var(--ap-ink) 30%, transparent); }
.voice-note-bars.is-played .voice-note-bar { background: var(--ap-ink); }
.voice-note-time { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ap-muted); font: 600 var(--type-meta, 12px)/1 inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.voice-note-speed { padding: 1px 4px; border-radius: 999px; background: color-mix(in srgb, var(--ap-ink) 10%, transparent); color: var(--ap-ink-2); font-size: 0.85em; }
.voice-note-control:focus-visible, .voice-note-track:focus-visible, .voice-note-time:focus-visible { outline: 2px solid var(--ap-brand); outline-offset: 2px; }
.review-context .voice-note, .v2-review-item .voice-note { margin-top: 10px; }

/* Bloop ofrece ayuda una vez en la cabecera y como carita en cada punto. */
.bloop-help-offer { color: var(--ap-ink); font-weight: 650; }
.bloop-help-button { display: grid; align-self: flex-end; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid color-mix(in srgb, var(--ap-brand) 35%, var(--line)); border-radius: 50%; background: var(--ap-glass-2); cursor: pointer; transition: transform 0.25s var(--ap-ease-spring), box-shadow 0.25s; }
.bloop-help-button img { width: 26px; height: 26px; }
.bloop-help-button:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ap-brand) 18%, transparent); }
.bloop-help-button:active { transform: scale(0.94); }
.bloop-help-button:focus-visible { outline: 2px solid var(--ap-brand); outline-offset: 2px; }

/* Los cinco tipos de corrección: una barra con iconos y una píldora que se desliza a la opción elegida. */
.review-guided-types .type-switch { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--ap-ink) 5%, var(--ap-glass-2)); }
.type-switch-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; background: var(--ap-brand); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--ap-brand) 70%, transparent); opacity: 0; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; pointer-events: none; }
.review-guided-types .type-switch .type-switch-option { position: relative; z-index: 1; display: flex; border: 0; box-shadow: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 9px 4px; border-radius: 12px; color: var(--ap-muted); font-size: 12px; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer; transition: color 0.3s, background-color 0.2s; }
.review-guided-types .type-switch .type-switch-option svg { width: 20px; height: 20px; transition: transform 0.35s var(--ap-ease-spring); }
.review-guided-types .type-switch .type-switch-option:hover:not(.is-active):not(.is-disabled) { background: color-mix(in srgb, var(--ap-ink) 6%, transparent); color: var(--ap-ink); }
.review-guided-types .type-switch .type-switch-option.is-active { color: var(--ap-on-accent); }
.review-guided-types .type-switch .type-switch-option.is-active svg { transform: scale(1.12); }
.review-guided-types .type-switch .type-switch-option input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.review-guided-types .type-switch .type-switch-option:has(input:focus-visible) { outline: 2px solid var(--ap-brand); outline-offset: 1px; }
.review-guided-types .type-switch .type-switch-option.is-disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 480px) { .review-guided-types .type-switch .type-switch-option { min-height: 58px; font-size: 11px; } .review-guided-types .type-switch .type-switch-option svg { width: 18px; height: 18px; } }

/* Ayuda de Bloop sobre el texto arrastrado en los apuntes. */
.bloop-selection mark { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--ap-brand) 22%, transparent); color: var(--ap-ink); }
::highlight(bloop-target) { background-color: color-mix(in srgb, var(--ap-brand) 16%, transparent); }
.bloop-coach { position: fixed; left: 50%; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100vw - 32px)); padding: 10px 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--ap-brand) 30%, var(--line)); border-radius: 18px; background: var(--ap-glass-3, var(--ap-glass-2)); box-shadow: var(--ap-shadow-1); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateX(-50%); animation: bloop-coach-in 0.45s var(--ap-ease-spring); }
.bloop-coach img { flex: none; }
.bloop-coach p { display: grid; flex: 1; gap: 2px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; }
.bloop-coach strong { overflow: hidden; color: var(--ap-ink); text-overflow: ellipsis; white-space: nowrap; }
.bloop-coach span { color: var(--ap-muted); }
.bloop-coach .secondary-button { flex: none; }
.bloop-coach { flex-wrap: wrap; }
.bloop-coach .voice-note, .bloop-coach .v2-slide-buttons { flex: 1 0 100%; margin-top: 0; }
.bloop-coach .voice-note { max-width: none; }
@keyframes bloop-coach-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.bloop-bubble { position: fixed; z-index: 61; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: var(--ap-brand); color: var(--ap-on-accent); font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--ap-brand) 80%, transparent); cursor: pointer; animation: bloop-bubble-in 0.35s var(--ap-ease-spring); }
.bloop-bubble img { padding: 2px; border-radius: 50%; background: #fff; }
.bloop-bubble:hover { transform: translateY(-1px); }
.bloop-bubble:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
.bloop-bubble.is-hint { background: var(--ap-glass-3, var(--ap-glass-2)); color: var(--ap-ink); font-weight: 600; cursor: default; box-shadow: var(--ap-shadow-1); }
/* Buscador dentro de los apuntes (notes-search.js) */
::highlight(notes-search) { background-color: color-mix(in srgb, #f5c542 45%, transparent); color: inherit; }
::highlight(notes-search-current) { background-color: #f5a524; color: #1b1406; }
.notes-search { position: fixed; z-index: 59; display: flex; align-items: center; gap: 4px; width: min(380px, calc(100vw - 32px)); padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--ap-glass-3, var(--ap-glass-2, var(--surface, #fff))); color: var(--ap-ink); box-shadow: var(--ap-shadow-1); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: bloop-bubble-in 0.25s var(--ap-ease-spring); }
.notes-search > svg { flex: none; color: var(--ap-muted); }
.notes-search input { flex: 1; min-width: 0; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; outline: none; }
.notes-search input::-webkit-search-cancel-button { display: none; }
/* El anillo global de foco (:is(...[tabindex]):focus-visible) pesa más que .notes-search input: el foco ya lo marca la barra. */
.notes-search input:focus, .notes-search input:focus-visible { outline: none; box-shadow: none; }
.notes-search-count { flex: none; min-width: 3.5em; color: var(--ap-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.notes-search button { display: inline-grid; flex: none; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: inherit; cursor: pointer; }
.notes-search button:hover:not(:disabled) { background: color-mix(in srgb, var(--ap-ink) 8%, transparent); }
.notes-search button:disabled { opacity: 0.35; cursor: default; }
.notes-search button:focus-visible, .notes-search:focus-within { outline: 2px solid color-mix(in srgb, var(--ap-brand) 55%, transparent); outline-offset: 1px; }
@media (max-width: 640px) { .notes-search { left: 16px; right: 16px !important; width: auto; } }
@media (prefers-reduced-motion: reduce) { .notes-search { animation: none; } }
.review-pick-again { margin: -6px 0 0; }
.review-pick-again .text-button { padding: 2px 0; border: 0; background: none; color: var(--ap-brand); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-pick-again .text-button:focus-visible { outline: 2px solid var(--ap-brand); outline-offset: 2px; border-radius: 4px; }
@keyframes bloop-bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .voice-note-field, .type-switch-pill, .type-switch-option, .type-switch-option svg { transition: none; } .bloop-coach, .bloop-bubble { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .gravity-glyph { animation: none; transition: none; }
}

/* Objetivos: resumen, filtros e historial. Colores y radios salen de tokens. */
.goals-page { display: grid; gap: var(--ap-space-5); }
.goals-page .standard-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--ap-space-4); }
.goals-page .standard-heading p { max-width: 62ch; color: var(--ap-ink-2); }
.goal-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ap-space-3); }
.goal-filters { display: flex; flex-wrap: wrap; gap: var(--ap-space-2); }
.goal-filter { min-height: 44px; padding: 0 var(--ap-space-3); border: 1px solid var(--ap-glass-edge); border-radius: var(--ap-radius-pill); background: var(--ap-glass-1); color: var(--ap-ink-2); font: inherit; cursor: pointer; }
.goal-filter.active, .goal-filter[aria-pressed="true"] { color: var(--ap-ink); background: var(--ap-accent-tint); border-color: transparent; }
.goal-filter:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 3px; }
.goal-summary { margin: 0; color: var(--ap-ink-2); }
.goal-list { display: grid; gap: var(--ap-space-3); }
.goal-item { display: grid; gap: var(--ap-space-2); }
.goal-item-head, .goal-item-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-3); }
.goal-item h3 { margin: 0; font-family: var(--ap-font-display); font-size: var(--ap-text-section); letter-spacing: var(--ap-tracking-title); }
.goal-kicker, .goal-renew, .goal-pending { margin: 0; color: var(--ap-muted); font-size: var(--ap-text-meta); }
.goal-progress-text { margin: 0; font-size: var(--ap-text-body); font-weight: var(--ap-weight-strong); }
.goal-met { box-shadow: inset 0 0 0 1px var(--ap-accent); }
.goal-met-flag { padding: 4px 10px; border-radius: var(--ap-radius-pill); background: var(--ap-brand); color: var(--ap-on-brand, #1f0a13); font-size: var(--ap-text-meta); font-weight: var(--ap-weight-strong); }
.goal-history { display: grid; gap: var(--ap-space-2); margin: 0; padding: 0; list-style: none; }
.goal-history li { display: grid; gap: 4px; padding: var(--ap-space-3); border: 1px solid var(--ap-glass-edge); border-radius: var(--ap-radius-md); background: var(--ap-glass-1); }
.goal-card .goal-value strong { font-family: var(--ap-font-display); font-size: var(--ap-text-section); }
.goal-card.featured-goal,
:root[data-theme] .goal-card.featured-goal,
:root[data-theme="light"] .goal-card.featured-goal,
:root[data-theme="dark"] .goal-card.featured-goal { color: var(--ap-ink); background: var(--ap-glass-1); }
.goal-card.featured-goal .goal-value,
.goal-card.featured-goal .goal-value p,
.goal-card.featured-goal .goal-value small,
.goal-card.featured-goal .goal-empty-copy,
.goal-card.featured-goal .goal-empty-copy p,
:root[data-theme="light"] .goal-card.featured-goal .goal-value,
:root[data-theme="dark"] .goal-card.featured-goal .goal-value { color: var(--ap-ink); }
.goal-card.featured-goal .secondary-button,
:root[data-theme] .goal-card.featured-goal .secondary-button { color: var(--ap-ink); background: var(--ap-glass-2); }
@media (max-width: 760px) {
  .goals-page .standard-heading, .goal-item-actions { align-items: stretch; flex-direction: column; }
  .goal-item-actions .secondary-button { width: 100%; }
}

/* Pantalla de clase (auditoría 2026-09-28): volver y menú «⋯» en una barra,
   Bloop con el estado y la acción principal debajo del título, y el documento
   como una fila en vez de una tarjeta con su propio botón. */
.class-intro-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-3); grid-column: 1 / -1; justify-self: stretch; }
.class-actions-menu > summary {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-glass-1);
  box-shadow: none;
  color: var(--ap-ink-2);
  backdrop-filter: none;
}
.class-actions-menu > summary:hover,
.class-actions-menu[open] > summary { background: var(--ap-glass-2); color: var(--ap-ink); }
.class-actions-menu .space-actions-panel { z-index: 5; width: max-content; min-width: 0; max-width: calc(100vw - 32px); } /* «auto» lo encogía a 40 px y cortaba «Enviar a la papelera» */
.class-page .class-intro .lead { margin-top: var(--ap-space-2); color: var(--ap-muted); }
.class-page > .class-documents { display: grid; gap: var(--ap-space-2); margin-top: 18px; padding: var(--ap-space-3); } /* mismo aire que .source-manager */
.class-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ap-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--ap-space-2);
  border: 0;
  border-radius: var(--ap-radius-sm);
  background: transparent;
  color: var(--ap-ink);
  text-align: left;
  cursor: pointer;
}
.class-document-row:hover { background: var(--ap-glass-2); }
.class-document-copy { display: grid; gap: 2px; min-width: 0; }
.class-document-copy strong { font-weight: var(--ap-weight-strong); }
.class-document-copy small { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); color: var(--ap-muted); }
.class-document-row > .icon { width: 18px; color: var(--ap-muted); }

/* Contenido por confirmar: las decisiones rápidas cierran sin escribir. */
.review-quick-decision { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ap-glass-2); }
.review-quick-decision p { margin: 0; color: var(--ap-ink-2, var(--ap-ink)); font-size: 0.92rem; }
.review-quick-decision .v2-review-actions { flex-wrap: wrap; justify-content: flex-start; }

/* Puntos sin audio: se ve la diapositiva que citan. */
.v2-slide-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v2-slide-button { min-height: 34px; padding: 6px 14px; font-size: 0.88rem; }
.v2-slide-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* Versión beta: etiqueta junto al logo; al pulsarla explica qué significa. */
.beta-badge {
  flex: none;
  align-self: center;
  margin-left: calc(var(--ap-space-1) * -1);
  padding: 2px 8px;
  border: 1px solid var(--ap-accent-soft);
  border-radius: var(--ap-radius-pill);
  background: var(--ap-accent-tint);
  color: var(--ap-accent-deep);
  font: var(--ap-weight-strong) 11px/1.4 var(--ap-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.beta-badge:hover { background: var(--ap-accent-soft); }
.beta-badge:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

/* Mantenimiento: franja fija abajo en el centro (no tapa la barra superior; los avisos salen abajo a la derecha)
   mientras V2_MAINTENANCE_MESSAGE esté activa en el servidor. */
.maintenance-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ap-z-toast);
  width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  border: 1px solid var(--ap-glass-edge);
  border-left: 4px solid var(--ap-warning);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-glass-3);
  backdrop-filter: var(--ap-glass-blur);
  box-shadow: var(--ap-shadow-2);
  color: var(--ap-ink);
  font: 500 var(--ap-text-meta)/1.45 var(--ap-font);
}
/* Sin conexión: mismo aviso; si a la vez hay mantenimiento, va encima de él. */
.offline-banner { border-left-color: var(--ap-accent); }
.maintenance-banner:not(.offline-banner) ~ .offline-banner,
.offline-banner:has(~ .maintenance-banner:not(.offline-banner)) { bottom: 88px; }