@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:       #f5f5f7;
  --surface:  #ffffff;
  --surface2: #f2f2f7;
  --surface3: #e5e5ea;
  --border:   #d1d1d6;
  --text:     #1c1c1e;
  --text2:    #48484a;
  --text3:    #8e8e93;
  --accent:   #4f46e5;
  --accent-l: rgba(79,70,229,0.12);
  --danger:   #ef4444;
  --danger-l: rgba(239,68,68,0.12);
  --success:  #10b981;
  --success-l:rgba(16,185,129,0.12);
  --warning:  #f59e0b;
  --warning-l:rgba(245,158,11,0.12);
  --nav-h:    60px;
  --bot-h:    76px;
  --r:        14px;
  --r-sm:     10px;
  --shadow:   0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 16px rgba(0,0,0,0.10);
  --max-w:    1100px;
  --col-w:    680px;
}

[data-theme="dark"] {
  --bg:       #000;
  --surface:  #1c1c1e;
  --surface2: #2c2c2e;
  --surface3: #3a3a3c;
  --border:   #38383a;
  --text:     #fff;
  --text2:    rgba(235,235,245,0.8);
  --text3:    #8e8e93;
  --shadow:   0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:0 4px 16px rgba(0,0,0,0.45);
}

/* Colores por asignatura */
:root {
  --c-lengua:   #3b82f6;
  --c-mates:    #ef4444;
  --c-geo:      #f97316;
  --c-ingles:   #8b5cf6;
  --c-fisica:   #eab308;
  --c-bio:      #22c55e;
  --c-ef:       #84cc16;
  --c-musica:   #ec4899;
  --c-religion: #a78bfa;
  --c-aleman:   #06b6d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overscroll-behavior: none;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}

/* Utilidades */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.section-label {
  font-size: .7rem; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 20px 0 10px;
}
.section-label:first-child { margin-top: 0; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px; color: var(--text3);
  text-align: center; gap: 10px;
}
.empty-state svg { width: 36px; height: 36px; stroke: var(--text3); opacity: .35; }
.empty-state p { font-size: .85rem; }

.toast {
  position: fixed; bottom: calc(var(--bot-h) + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--text); color: var(--bg);
  padding: 9px 20px; border-radius: 20px;
  font-size: .8rem; font-weight: 500; white-space: nowrap;
  opacity: 0; transition: all .25s; z-index: 600;
  pointer-events: none; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }