/* ══════════════════════════════════════════════════════════════════════
   SHELL: sidebar.css
   Navegación lateral izquierda (desktop) — usada en todas las páginas
   autenticadas.

   Elementos:
   - .sidebar (container 260px width)
   - .sidebar-logo (+ -icon, -text, -sub)
   - .sidebar-nav, .sidebar-link (+ .active, :hover, link-indicator)
   - .sidebar-link[data-area="..."] (matemáticas, lectura, sociales, naturales, inglés)
   - .sidebar-more (popover for overflow nav items) + dark mode
   - .sidebar-divider, .sidebar-link--soon
   - .sidebar-link--coming-soon, .sidebar-coming-soon-badge, .drawer-coming-soon-badge
   - .drawer-link--coming-soon (drawer-related, será movido a mobile-topbar en Round 11)
   - .sidebar-alerts-btn
   - .sidebar-user-panel, .sidebar-user-avatar, .sidebar-user-info,
     .sidebar-user-name, .sidebar-user-plan, .sidebar-user-settings
   - .sidebar-theme-row

   Usado por: js/utils/sidebar.js (#canonical-sidebar)

   Extraído de learning.css en Round 10.1.
   ══════════════════════════════════════════════════════════════════════ */

.sidebar {
  width: 260px;
  background: var(--bg-white);
  border-right: 2px solid var(--border-subtle);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 0 12px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--violet);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.sidebar-logo-icon span {
  font-size: 20px;
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sidebar-logo-sub {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.sidebar-link-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px;
  height: 60%;
  border-radius: 0 4px 4px 0;
  background: var(--violet);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
}

.sidebar-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: var(--violet-light);
  color: var(--violet);
  font-weight: var(--fw-semi);
}

.sidebar-link.active .sidebar-link-indicator {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.sidebar-link.active .icon-sm {
  font-variation-settings: 'FILL' 1;
}

/* ── Sidebar "Más" Popover ── */
.sidebar-more {
  position: relative;
}

.sidebar-more-trigger {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-more-popover {
  position: fixed;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-white, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  pointer-events: none;
  z-index: 9999;
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

/* Invisible bridge to prevent hover gap between trigger and popover */
.sidebar-more-popover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
}

.sidebar-more-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.sidebar-more-popover-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease-out;
}

.sidebar-more-popover-row:hover {
  background: var(--bg-hover);
}

.sidebar-more-popover-row .icon-sm {
  color: #afafaf;
}

.sidebar-more-popover-label {
  color: var(--text-primary);
}

/* Dark mode for popover */
[data-theme="dark"] .sidebar-more-popover {
  background: var(--bg-secondary);
  border-color: var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sidebar-more-popover-row:hover {
  background: var(--bg-hover);
}

/* ── Active & Hover States by Area ── */
.sidebar-link[data-area="mat"].active {
  background: rgba(0, 229, 255, 0.12);
  color: var(--area-mat);
}

.sidebar-link[data-area="mat"].active .sidebar-link-indicator {
  background: var(--area-mat);
}

.sidebar-link[data-area="mat"]:hover:not(.active) {
  background: rgba(0, 229, 255, 0.05);
  color: var(--area-mat);
}

.sidebar-link[data-area="lec"].active {
  background: rgba(255, 152, 0, 0.12);
  color: var(--area-lec);
}

.sidebar-link[data-area="lec"].active .sidebar-link-indicator {
  background: var(--area-lec);
}

.sidebar-link[data-area="lec"]:hover:not(.active) {
  background: rgba(255, 152, 0, 0.05);
  color: var(--area-lec);
}

.sidebar-link[data-area="soc"].active {
  background: rgba(211, 47, 47, 0.12);
  color: var(--area-soc);
}

.sidebar-link[data-area="soc"].active .sidebar-link-indicator {
  background: var(--area-soc);
}

.sidebar-link[data-area="soc"]:hover:not(.active) {
  background: rgba(211, 47, 47, 0.05);
  color: var(--area-soc);
}

.sidebar-link[data-area="nat"].active {
  background: rgba(0, 200, 83, 0.12);
  color: var(--area-nat);
}

.sidebar-link[data-area="nat"].active .sidebar-link-indicator {
  background: var(--area-nat);
}

.sidebar-link[data-area="nat"]:hover:not(.active) {
  background: rgba(0, 200, 83, 0.05);
  color: var(--area-nat);
}

.sidebar-link[data-area="eng"].active {
  background: rgba(98, 0, 234, 0.12);
  color: var(--area-eng);
}

.sidebar-link[data-area="eng"].active .sidebar-link-indicator {
  background: var(--area-eng);
}

.sidebar-link[data-area="eng"]:hover:not(.active) {
  background: rgba(98, 0, 234, 0.05);
  color: var(--area-eng);
}

.sidebar-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 16px 0;
}

.sidebar-link--soon {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Coming Soon — Sidebar & Drawer Badges ── */
.sidebar-link--coming-soon {
  opacity: 0.55;
}

.sidebar-link--coming-soon:hover {
  opacity: 0.7;
}

.sidebar-coming-soon-badge,
.drawer-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6rem;
  font-weight: var(--fw-extra, 800);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7C3AED22, #6C2BFF18);
  color: var(--violet, #6C2BFF);
  border: 1px solid rgba(108, 43, 255, 0.15);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.drawer-link--coming-soon {
  opacity: 0.55;
}

.drawer-link--coming-soon:hover {
  opacity: 0.7;
}


/* ── Coming Soon — Side Card Variant ── */
.learn-side-card--coming-soon {
  border: 1px dashed var(--border-subtle, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

/* Sidebar Bottom Panels */
.sidebar-alerts-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-secondary);
  font-weight: var(--fw-semi);
  font-size: 0.9rem;
  margin-bottom: 16px;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  width: 100%;
  transition: background 0.2s;
}

.sidebar-alerts-btn:hover {
  background: var(--bg-hover);
}

.sidebar-user-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-hover);
  border-radius: 16px;
  margin-top: 8px;
}

.sidebar-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  margin: 0 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-user-name {
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.sidebar-user-plan {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sidebar-user-settings {
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  display: flex;
}

.sidebar-user-settings:hover {
  color: var(--violet);
}



/* ── Dark mode (extracted from learning.css in Round 11) ── */
/* ── Sidebar ── */
[data-theme="dark"] .sidebar-logo img {
  filter: brightness(0) invert(1);
}

/* ── Aviso «Nuevo» de Novedades ──
   Lo encienden js/utils/novedades.js (pintarAvisosNovedades) quitando el
   hidden a lo que lleva data-nov-aviso. Está aquí y no en novedades.css
   porque el menú vive en todas las pantallas. Blanco sobre #6C2BFF = 5,9:1. */
.nov-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--violet, #6C2BFF);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.nov-badge[hidden],
.nov-dot[hidden] {
  display: none;
}

/* Punto sobre el icono de «Más»: el aviso real está dentro del menú, que
   está cerrado. Sin el punto nadie lo abriría. */
.sidebar-more-trigger {
  position: relative;
}

.nov-dot {
  position: absolute;
  top: 10px;
  left: 30px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet, #6C2BFF);
  box-shadow: 0 0 0 2px var(--bg-white, #fff);
}

/* ── Tarjeta Novedades de la columna derecha ──
   Reemplaza a «Más funciones pronto». Usa la base .learn-side-card
   (learn.css) y solo añade lo suyo. Toda la tarjeta es el enlace. */
.nov-side-card {
  display: block;
}

.nov-side-head {
  margin-bottom: 8px;
}

.nov-side-head .nov-badge {
  margin-left: 0;
}

.nov-side-date {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  /* No --text-secondary: da 3,4:1 sobre la tarjeta blanca. */
  color: var(--text-primary);
  opacity: 0.66;
}

.nov-side-date:empty {
  display: none;
}

.nov-side-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  text-wrap: balance;
}

.nov-side-text {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
  opacity: 0.78;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nov-side-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violet);
}

[data-theme="dark"] .nov-side-link {
  color: #9D86FF;
}

.nov-side-link .material-symbols-outlined {
  font-size: 18px;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .nov-side-card:hover .nov-side-link .material-symbols-outlined {
    transform: translateX(3px);
  }
}

.nov-side-card:active {
  transform: scale(0.99);
}