/* Fuentes en local (sin Google Fonts: funciona sin conexión) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../vendor/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../vendor/fonts/space-grotesk-latin.woff2") format("woff2"); }

/* StudyHub UNIR — tema oscuro con acentos neón por asignatura */
:root {
  --bg: #0B0F19;
  --surface: #131A2A;
  --surface-2: #1A2338;
  --line: #26304A;
  --ink: #E6EAF2;
  --muted: #8B95AD;
  --cyan: #00E5FF;
  --pink: #FF2E93;
  --lime: #A3FF12;
  --amber: #FFB800;
  --violet: #9D4EDD;
  --orange: #FF5F1F;
  --c: var(--cyan); /* color de la asignatura activa */
  color-scheme: dark;
}

[x-cloak] { display: none !important; }
html, body { background: var(--bg); color: var(--ink); }
body {
  background-image:
    radial-gradient(60rem 30rem at 110% -10%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%),
    radial-gradient(50rem 25rem at -10% 110%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, .font-display { font-family: "Space Grotesk", Inter, system-ui, sans-serif; letter-spacing: -0.01em; }

:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 6px; }

/* ---------- superficies ---------- */
.card {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}
.card-pad { padding: 1.25rem; }
@media (min-width: 640px) { .card-pad { padding: 1.5rem; } }

.subject-card {
  position: relative;
  border-top: 3px solid var(--c);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.subject-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.subject-dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.text-subject { color: var(--c); }
.bg-subject-soft { background: color-mix(in srgb, var(--c) 14%, transparent); }
.border-subject { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

.hero-subject {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
}

.stat-tile { border-left: 3px solid var(--c); }
.stat-value { font-family: "Space Grotesk", Inter, sans-serif; font-size: 2rem; font-weight: 700; color: var(--c); line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }

.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--violet) 55%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- botones y campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: .75rem; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, var(--violet)));
  color: #06101c; border-color: transparent;
  box-shadow: 0 8px 24px -10px var(--c);
}
.btn-primary:hover { box-shadow: 0 10px 30px -8px var(--c); }
.btn-danger { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, var(--line)); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--pink) 14%, transparent); border-color: var(--pink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-sm { padding: .35rem .6rem; font-size: .8rem; border-radius: .6rem; }

.input, .select, .textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: .75rem; padding: .65rem .85rem; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #5d6782; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- chips de estado ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  color: var(--chip, var(--muted));
  background: color-mix(in srgb, var(--chip, var(--muted)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip, var(--muted)) 35%, transparent);
}
.chip-cyan { --chip: var(--cyan); } .chip-pink { --chip: var(--pink); } .chip-lime { --chip: var(--lime); }
.chip-amber { --chip: var(--amber); } .chip-violet { --chip: var(--violet); } .chip-orange { --chip: var(--orange); }
.pulse-dot { width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- navegación ---------- */
.nav-link {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .75rem;
  color: var(--muted); font-weight: 500; font-size: .92rem; transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.active { color: var(--ink); background: color-mix(in srgb, var(--nav-c, var(--cyan)) 14%, transparent); box-shadow: inset 3px 0 0 var(--nav-c, var(--cyan)); }
.nav-link.active svg { color: var(--nav-c, var(--cyan)); }
.nav-link.disabled { opacity: .45; pointer-events: none; }
.phase-badge { margin-left: auto; font-size: .65rem; font-weight: 700; padding: .05rem .4rem; border-radius: .4rem; border: 1px solid var(--line); color: var(--muted); }

.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .7rem; color: var(--muted); padding: .5rem 0; flex: 1; }
.bottom-nav a.active { color: var(--cyan); }

/* ---------- pestañas de asignatura ---------- */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .9rem; font-size: .88rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--c); border-bottom-color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.tab .phase-badge { margin-left: .25rem; }
/* En pantallas anchas no se ocultan pestañas: si no caben en una fila, pasan a la siguiente */
@media (min-width: 768px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 0 .1rem; }
  .tab { padding: .7rem .75rem; }
}

/* ---------- zona de subida ---------- */
.dropzone {
  border: 2px dashed color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: 1rem;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  transition: background .15s, border-color .15s;
}
.dropzone.dragging { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: var(--c); }

/* ---------- texto extraído y búsqueda ---------- */
.extracted {
  white-space: pre-wrap; word-break: break-word; font-size: .95rem; line-height: 1.7;
  max-height: 70vh; overflow-y: auto; padding-right: .5rem;
}
mark { background: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--amber); border-radius: .25rem; padding: 0 .15rem; }

.row-link { transition: background .15s; border-radius: .75rem; }
.row-link:hover { background: var(--surface-2); }

.swatch { width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--sw); cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 14px -4px var(--sw); transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
input:checked + .swatch { border-color: #fff; transform: scale(1.1); }
input:focus-visible + .swatch { outline: 2px solid #fff; outline-offset: 2px; }

.fade-in { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- filtros por asignatura ---------- */
.chip-toggle {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line));
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--ink); transition: opacity .15s, background .15s;
}
.chip-toggle.off { opacity: .4; background: transparent; }
.chip-toggle.off .subject-dot { box-shadow: none; }

/* ---------- FullCalendar en tema oscuro ---------- */
.fc-dark {
  --fc-border-color: var(--line);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-neutral-text-color: var(--muted);
  --fc-list-event-hover-bg-color: var(--surface-2);
  --fc-today-bg-color: color-mix(in srgb, var(--cyan) 7%, transparent);
  --fc-now-indicator-color: var(--pink);
  --fc-highlight-color: color-mix(in srgb, var(--amber) 18%, transparent);
  --fc-event-border-color: transparent;
}
.fc-dark .fc { font-size: .85rem; }
.fc-dark .fc-toolbar-title { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: capitalize; }
.fc-dark .fc-button-primary {
  background: var(--surface-2); border-color: var(--line); color: var(--ink); font-weight: 600; text-transform: capitalize;
  box-shadow: none !important; border-radius: .6rem !important; margin: 0 .1rem !important;
}
.fc-dark .fc-button-primary:hover { background: var(--line); border-color: var(--line); }
.fc-dark .fc-button-primary:not(:disabled).fc-button-active,
.fc-dark .fc-button-primary:not(:disabled):active { background: var(--amber); border-color: var(--amber); color: #06101c; }
.fc-dark .fc-button-primary:disabled { opacity: .45; background: var(--surface-2); border-color: var(--line); }
.fc-dark .fc-col-header-cell-cushion, .fc-dark .fc-daygrid-day-number, .fc-dark .fc-list-day-text, .fc-dark .fc-list-day-side-text { color: var(--ink); text-transform: capitalize; }
.fc-dark .fc-timegrid-slot-label-cushion, .fc-dark .fc-timegrid-axis-cushion { color: var(--muted); }
.fc-dark .fc-day-today .fc-col-header-cell-cushion, .fc-dark .fc-day-today .fc-daygrid-day-number { color: var(--cyan); font-weight: 700; }
.fc-dark .fc-list-day-cushion { background: var(--surface-2) !important; }
.fc-dark .fc-event { border-radius: .45rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev, var(--cyan)) 60%, transparent), 0 8px 18px -10px var(--ev, var(--cyan)); }
.fc-dark .fc-event .fc-event-main { padding: 1px 4px; }
.fc-dark .fc-list-event-title, .fc-dark .fc-list-event-time { color: var(--ink); }
.fc-dark .fc-list-event-dot { border-color: var(--ev, var(--cyan)); }
.fc-dark .ev-src-plan { background: color-mix(in srgb, var(--ev) 30%, var(--surface)) !important; border: 1.5px dashed var(--ev) !important; }
.fc-dark .ev-src-plan .fc-event-main, .fc-dark .ev-src-plan .fc-event-main * { color: var(--ink) !important; }
.fc-dark .ev-clase_directo .fc-event-title::before, .fc-dark .ev-clase_directo .fc-list-event-title a::before { content: "● "; color: #ff1f4b; }
/* Clase en directo ya vista (marcada desde el calendario o en Notas) */
.fc-dark .ev-clase_directo.ev-vista .fc-event-title::before, .fc-dark .ev-clase_directo.ev-vista .fc-list-event-title a::before { content: "✓ "; color: var(--lime); }
.fc-dark .ev-examen .fc-event-title::before, .fc-dark .ev-examen .fc-list-event-title a::before { content: "★ "; }
.fc-dark .fc-daygrid-event-dot { border-color: var(--ev); }
.fc-dark .fc-daygrid-dot-event .fc-event-title, .fc-dark .fc-daygrid-dot-event .fc-event-time { color: var(--ink); }
.fc-dark .fc-popover { background: var(--surface); border-color: var(--line); }
.fc-dark .fc-popover-header { background: var(--surface-2); color: var(--ink); }
.fc-dark .fc-scrollgrid { border-radius: .75rem; overflow: hidden; }
@media (max-width: 640px) { .fc-dark .fc-toolbar-title { font-size: 1rem; } .fc-dark .fc-header-toolbar { gap: .5rem; } }

/* ---------- barras de progreso ---------- */
.progress { height: .6rem; border-radius: 999px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, var(--violet)), var(--c));
  box-shadow: 0 0 12px var(--c); transition: width .4s ease; }

/* ---------- pomodoro ---------- */
.pomo-ring { --p: 0; width: 11rem; height: 11rem; border-radius: 999px; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bg) 0);
  box-shadow: 0 0 40px -12px var(--c); }
.pomo-ring > div { width: 9.6rem; height: 9.6rem; border-radius: 999px; background: var(--surface); display: grid; place-items: center; }
.pomo-time { font-family: "Space Grotesk", Inter, sans-serif; font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- aviso flotante de clase ---------- */
.live-toast { border-left: 4px solid var(--c); box-shadow: 0 20px 50px -20px var(--c); }

/* ---------- flashcard que gira ---------- */
.flip { perspective: 1400px; cursor: pointer; }
.flip-inner { display: grid; transition: transform .55s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  min-height: 16rem; padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 30px 60px -30px var(--c);
}
.flip-back { transform: rotateY(180deg); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface)); }
kbd { font-family: ui-monospace, monospace; font-size: .75em; padding: .05rem .35rem; border-radius: .35rem; border: 1px solid var(--line); background: var(--bg); }

/* ---------- opciones de test ---------- */
.option {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left; padding: .9rem 1rem; border-radius: .9rem;
  border: 1px solid var(--line); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.option .letter { flex: none; width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; font-weight: 700; background: var(--bg); color: var(--muted); }
.option.selected { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); }
.option.selected .letter { background: var(--c); color: #06101c; }
.option.correct { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, var(--surface-2)); }
.option.correct .letter { background: var(--lime); color: #06101c; }
.option.wrong { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, var(--surface-2)); }
.option.wrong .letter { background: var(--pink); color: #06101c; }
.option:disabled { cursor: default; }
.excerpt { border-left: 3px solid var(--c); padding: .5rem .85rem; background: var(--bg); border-radius: 0 .6rem .6rem 0; font-style: italic; }

/* ---------- texto en Markdown (resúmenes, guiones) ---------- */
.prose-dark { line-height: 1.75; font-size: 1rem; }
.prose-dark h1, .prose-dark h2, .prose-dark h3 { color: var(--c); margin: 1.6em 0 .6em; line-height: 1.3; }
.prose-dark h1 { font-size: 1.6rem; } .prose-dark h2 { font-size: 1.3rem; } .prose-dark h3 { font-size: 1.1rem; color: var(--ink); }
.prose-dark > :first-child { margin-top: 0; }
.prose-dark p, .prose-dark ul, .prose-dark ol, .prose-dark table { margin: .8em 0; }
.prose-dark ul { list-style: disc; padding-left: 1.4em; } .prose-dark ol { list-style: decimal; padding-left: 1.4em; }
.prose-dark li { margin: .25em 0; } .prose-dark li::marker { color: var(--c); }
.prose-dark strong { color: var(--ink); background: color-mix(in srgb, var(--c) 16%, transparent); padding: 0 .2em; border-radius: .25em; }
.prose-dark code { background: var(--bg); padding: .1em .35em; border-radius: .35em; font-size: .9em; }
.prose-dark table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.prose-dark th, .prose-dark td { border: 1px solid var(--line); padding: .45em .65em; text-align: left; }
.prose-dark th { background: var(--surface-2); }
.prose-dark hr { border-color: var(--line); margin: 1.5em 0; }
.prose-dark blockquote { border-left: 3px solid var(--c); padding-left: 1em; color: var(--muted); }

/* ---------- comparación de versiones ---------- */
.diff { font-size: .9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.diff .nuevo { background: color-mix(in srgb, var(--lime) 14%, transparent); border-left: 3px solid var(--lime); }
.diff .quitado { background: color-mix(in srgb, var(--pink) 12%, transparent); border-left: 3px solid var(--pink); text-decoration: line-through; color: var(--muted); }
.diff .salto { color: var(--muted); font-style: italic; text-align: center; }
.diff > div { padding: .1rem .6rem; border-left: 3px solid transparent; }

/* ---------- mapa mental ---------- */
.markmap-box { height: 70vh; min-height: 24rem; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%), var(--bg); border-radius: 1rem; }
.markmap-box svg { width: 100%; height: 100%; --markmap-text-color: #E6EAF2; --markmap-font: 500 15px/20px Inter, sans-serif; }
.markmap-box .markmap-foreign { color: #E6EAF2; overflow: visible; }
/* El texto ocupa justo el ancho que necesita: markmap redondea la medida hacia abajo (143 px para un texto de
   143,4 px) y la última palabra saltaba a una segunda línea que no se veía («Niveles de» sin «producto»). */
.markmap-box .markmap-foreign > div { width: max-content; max-width: 262px; }

/* ---------- reproductor ---------- */
.player { border-top: 3px solid var(--c); }
.speed-btn.active { background: var(--c); color: #06101c; border-color: var(--c); }
.track-row.playing { background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.speaker { font-weight: 700; color: var(--sp, var(--c)); }

/* Los hijos de una rejilla no pueden ensanchar la columna (evita desbordes en el móvil) */
.grid > * { min-width: 0; }

/* Reloj flotante del Pomodoro y avisos de clase: una sola columna (fila en pantallas anchas) */
.float-stack { position: fixed; z-index: 40; left: 1rem; right: 1rem; bottom: 6rem; display: flex; flex-direction: column; gap: .75rem; pointer-events: none; }
.float-stack > * { pointer-events: auto; }
@media (min-width: 640px) { .float-pomo { width: 20rem; } .float-reminders { width: 24rem; margin-left: auto; } }
@media (min-width: 768px) { .float-stack { flex-direction: row; align-items: flex-end; } }
@media (min-width: 1024px) { .float-stack { left: 18rem; bottom: 1.5rem; } }

/* Clases de Tailwind que usan las plantillas y no están en tailwind.css (compilado antes de añadirlas).
   Si se vuelve a compilar Tailwind, este bloque sobra. */
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-center { align-self: center; }
.max-w-4xl { max-width: 56rem; }
.max-w-xs { max-width: 20rem; }
.min-h-\[1rem\] { min-height: 1rem; }
.min-w-\[9rem\] { min-width: 9rem; }
.pl-5 { padding-left: 1.25rem; }
.list-disc { list-style-type: disc; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.group:hover .group-hover\:text-subject { color: var(--c); }
.hover\:opacity-100:hover { opacity: 1; }
@media (min-width: 640px) { .sm\:col-span-4 { grid-column: span 4 / span 4; } }

/* Botones desactivados: que se note (sin clave, mientras se envía…) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: saturate(.6); }