/* ==========================================================================
   Marqua — design system (moderno, minimal, claro + oscuro).
   Sin dependencias externas: tipografía del sistema, un solo acento.
   ========================================================================== */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f2f4f7;
  --fg:        #1a1d21;
  --muted:     #6b7280;
  --line:      #e5e7eb;
  --line-2:    #d8dce2;
  --accent:    #4f46e5;
  --accent-fg: #ffffff;
  --accent-weak:#eef0fe;
  --focus:     #a5b4fc;

  --ok:      #15803d;  --ok-bg:   #dcfce7;
  --warn:    #b45309;  --warn-bg: #fef3c7;
  --danger:  #b91c1c;  --danger-bg:#fee2e2;
  --info:    #1d4ed8;  --info-bg: #dbeafe;
  --pend:    #4b5563;  --pend-bg: #eef1f5;

  --radius:   10px;
  --radius-sm: 7px;
  --shadow:   0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 25px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.06);
}

/* Tema oscuro. Se aplica en dos casos: (a) el SO lo prefiere y el usuario no
   forzó el claro; (b) el usuario lo forzó con el botón (data-theme="dark",
   aplicado por el script inline del <head> antes del primer paint).
   Las dos listas de variables deben mantenerse idénticas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f1115;
    --surface:   #171a1f;
    --surface-2: #1e232b;
    --fg:        #e6e8eb;
    --muted:     #9aa0a8;
    --line:      #262b33;
    --line-2:    #333a44;
    --accent:    #7c86ff;
    --accent-fg: #0f1115;
    --accent-weak:#1c2030;
    --focus:     #5b63d8;

    --ok:      #4ade80;  --ok-bg:  #10281a;
    --warn:    #fbbf24;  --warn-bg:#2a1f07;
    --danger:  #f87171;  --danger-bg:#2a1414;
    --info:    #93b4fd;  --info-bg:#111d33;
    --pend:    #aab1bb;  --pend-bg:#20252d;
  }
}
:root[data-theme="dark"] {
  --bg:        #0f1115;
  --surface:   #171a1f;
  --surface-2: #1e232b;
  --fg:        #e6e8eb;
  --muted:     #9aa0a8;
  --line:      #262b33;
  --line-2:    #333a44;
  --accent:    #7c86ff;
  --accent-fg: #0f1115;
  --accent-weak:#1c2030;
  --focus:     #5b63d8;

  --ok:      #4ade80;  --ok-bg:  #10281a;
  --warn:    #fbbf24;  --warn-bg:#2a1f07;
  --danger:  #f87171;  --danger-bg:#2a1414;
  --info:    #93b4fd;  --info-bg:#111d33;
  --pend:    #aab1bb;  --pend-bg:#20252d;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

/* ---- Header ---------------------------------------------------------------- */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: .75rem 1.25rem;
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(180%) blur(6px);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--fg); text-decoration: none; font-weight: 650; letter-spacing: -.01em;
}
.brand-mark {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 7px;
  background: var(--accent); color: var(--accent-fg);
  font-size: .8rem;
}
/* Descriptor junto a la marca: atenuado, y fuera de la vista en pantallas
   estrechas para que en movil quede solo "Marqua". */
.brand-sub { color: var(--muted); font-weight: 450; }
@media (max-width: 560px) { .brand-sub { display: none; } }

main { max-width: 940px; margin: 1.75rem auto 4rem; padding: 0 1.25rem; }

/* ---- Typography ------------------------------------------------------------ */
h1 { font-size: 1.55rem; letter-spacing: -.02em; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head .muted { margin: 0; }
a { color: var(--accent); }

.step {
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; flex: none;
  background: var(--accent-weak); color: var(--accent);
  border-radius: 50%; font-size: .78rem; font-weight: 700;
}

/* ---- Cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 1rem 0;
  box-shadow: var(--shadow);
}
.card.course.just-added { animation: pop-in .28s ease both; }

/* ---- Rows & forms ---------------------------------------------------------- */
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
form.inline { display: inline; }

/* Formulario apilado (preparar evaluación: enunciado/solucionario). */
form.stack { display: flex; flex-direction: column; gap: .7rem; }
form.stack > label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
form.stack .row label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
form.stack textarea { min-height: 120px; font-weight: 400; }
.prep-actions { margin-top: .7rem; gap: .8rem; align-items: flex-end; }

/* Rúbricas */
.rubric-item { border-top: 1px solid var(--line); padding: .7rem 0; }
.rubric-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.rubric-crits { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.critique { margin-top: .5rem; padding: .6rem .8rem; background: var(--surface); border-radius: var(--radius-sm); }
.critique .ok-note { color: #22a06b; margin: 0; }
.critique .warn-note { margin: 0 0 .3rem; font-weight: 600; }

input, select, textarea {
  font: inherit; color: var(--fg);
  padding: .5rem .65rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
input::placeholder { color: var(--muted); }
input, select { min-width: 0; }
.create-course input[name="name"], .create-eval input { flex: 1 1 10rem; }

textarea {
  width: 100%; min-height: 340px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5;
  resize: vertical;
}

/* ---- Buttons --------------------------------------------------------------- */
button {
  font: inherit; font-weight: 550;
  padding: .5rem .9rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-fg);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: filter .15s, background .15s, box-shadow .15s, opacity .15s;
}
button:hover { filter: brightness(1.07); }
button:active { filter: brightness(.95); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
button.sec {
  background: var(--surface-2); color: var(--fg);
  border-color: var(--line-2);
}
button:disabled, button[aria-busy="true"] { opacity: .7; cursor: default; filter: none; }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.danger:hover { background: var(--danger-bg); filter: none; }
.rubric-delete { margin-top: .8rem; display: block; }

button[aria-busy="true"]::before {
  content: ""; width: .85em; height: .85em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}

.btn-link {
  color: var(--accent); text-decoration: none; font-weight: 550;
  border-radius: var(--radius-sm); padding: .1rem .1rem;
}
.btn-link:hover { text-decoration: underline; }
/* Descarga aún no disponible: se muestra el porqué, sin enlace que falle. */
.btn-link.disabled { color: var(--muted); cursor: not-allowed; font-weight: 500; }

/* ---- Banner flash (avisos de POST clásicos, tras redirect) ------------------ */
.flash-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow);
  padding: .7rem .9rem; margin: 0 0 1rem;
  animation: toast-in .25s cubic-bezier(.2,.8,.2,1) both;
}
.flash-banner.flash-ok    { border-left-color: var(--ok); }
.flash-banner.flash-error { border-left-color: var(--danger); }
.flash-close {
  background: transparent; color: var(--muted); border: 0;
  font-size: 1.1rem; line-height: 1; padding: .1rem .4rem;
}
.flash-close:hover { color: var(--fg); filter: none; }

/* ---- Botón de tema (header) ------------------------------------------------- */
.theme-btn {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-2); font-size: .82rem; padding: .35rem .7rem;
}
.theme-btn:hover { color: var(--fg); filter: none; }

/* ---- Tables ---------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; margin: .4rem 0; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--line); }
th {
  font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---- Chips ----------------------------------------------------------------- */
.chip {
  display: inline-block; padding: .12rem .5rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: .78rem; color: var(--muted); font-weight: 500;
}
.chip.chip-alerta { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* ---- Badges (estado de etapa) ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .17rem .55rem .17rem .5rem;
  border-radius: 999px; font-size: .76rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; font-size: .9em; line-height: 1; }
.badge.empty { background: transparent; color: var(--muted); font-weight: 500; }
.badge.empty::before { content: none; }

.badge[data-status="approved"]     { background: var(--ok-bg);    color: var(--ok);    }
.badge[data-status="approved"]::before     { content: "✓"; }
.badge[data-status="needs_review"] { background: var(--warn-bg);  color: var(--warn);  }
.badge[data-status="needs_review"]::before { content: "✎"; }
.badge[data-status="failed"]       { background: var(--danger-bg);color: var(--danger);}
.badge[data-status="failed"]::before       { content: "✕"; }
.badge[data-status="pending"]      { background: var(--pend-bg);  color: var(--pend);  }
.badge[data-status="pending"]::before      { content: "○"; }
.badge[data-status="queued"]       { background: var(--info-bg);  color: var(--info);  }
.badge[data-status="queued"]::before       { content: "◔"; }
.badge[data-status="running"]      { background: var(--info-bg);  color: var(--info);  }
.badge[data-status="running"]::before {
  content: ""; width: .72em; height: .72em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
/* Pulso suave mientras se procesa. */
.badge[data-status="running"], .badge[data-status="queued"] { animation: pulse 1.4s ease-in-out infinite; }

.badge.rel { font-weight: 550; }
.badge.rel[data-band="full"]    { background: var(--ok-bg);   color: var(--ok);   }
.badge.rel[data-band="full"]::before    { content: "✓"; }
.badge.rel[data-band="partial"] { background: var(--warn-bg); color: var(--warn); }
.badge.rel[data-band="partial"]::before { content: "⚠"; }
.unverified-note { color: var(--warn); font-size: .9rem; margin: .3rem 0 0; }

.stage-link { text-decoration: none; }
.stage-cell { white-space: nowrap; }
.stage-cell .badge + .badge { margin-left: .35rem; }

/* Badge recién actualizado: destello para que se note el cambio en vivo. */
.badge.flash { animation: flash .9s ease; }

/* ---- Barra de progreso ----------------------------------------------------- */
.progress-wrap { margin-top: 1rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.progress-label { font-weight: 600; font-size: .9rem; }
.progress-track {
  height: 8px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #22d3ee));
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.live-hint { margin: .9rem 0 0; }
.progress-detail { margin: .5rem 0 0; font-size: .85rem; min-height: 1.1em; }

/* ---- Depuración (colapsable) ---------------------------------------------- */
details.debug { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
details.debug > summary {
  cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 550;
  list-style: none; user-select: none;
}
details.debug > summary::-webkit-details-marker { display: none; }
details.debug > summary::before { content: "▸ "; }
details.debug[open] > summary::before { content: "▾ "; }
details.debug .stage-actions { margin-top: .7rem; }

/* ---- Empty state ----------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 1.75rem; text-align: center; margin: 1rem 0;
}
.empty-state .muted { margin: 0; }
.onboarding-steps {
  display: inline-block; text-align: left; margin: .3rem auto 0;
  padding-left: 1.3rem; color: var(--muted);
}
.onboarding-steps li { margin: .25rem 0; }

/* ---- Muted / helpers ------------------------------------------------------- */
.muted { color: var(--muted); font-size: .9rem; }
.status-line { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.roster-title { margin-top: 1.75rem; }
.review-actions { margin-top: .85rem; }

/* ---- Toggle modo desarrollador (header) ------------------------------------ */
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dev-toggle { margin: 0; }
.dev-btn {
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line-2); font-size: .82rem; padding: .35rem .7rem;
}
.dev-btn.on { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }

.header-actions { display: inline-flex; align-items: center; gap: 1rem; }

/* ---- Página de resultados --------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.threshold-form { margin-top: .9rem; align-items: flex-end; }
.threshold-form label { display: flex; flex-direction: column; gap: .3rem; }
.frac-pill {
  display: inline-block; min-width: 3.2rem; text-align: center;
  padding: .12rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.frac-pill[data-band="high"] { background: var(--ok-bg);     color: var(--ok); }
.frac-pill[data-band="mid"]  { background: var(--warn-bg);   color: var(--warn); }
.frac-pill[data-band="low"]  { background: var(--danger-bg); color: var(--danger); }

/* ---- Menú "⋯" (renombrar/eliminar) ------------------------------------------ */
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.card-head h1, .card-head h2 { margin-bottom: 0; }
details.menu { position: relative; }
details.menu > summary {
	list-style: none; cursor: pointer; user-select: none;
	padding: .1rem .55rem; border-radius: var(--radius-sm);
	color: var(--muted); font-weight: 700; font-size: 1.1rem; line-height: 1.2;
	border: 1px solid transparent;
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary, details.menu > summary:hover { background: var(--surface-2); border-color: var(--line-2); }
.menu-body {
	position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20;
	min-width: 16rem; padding: .8rem;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow-lg);
	display: flex; flex-direction: column; gap: .8rem;
}
.menu-body form.stack { gap: .45rem; }

/* ---- Selección múltiple ----------------------------------------------------- */
.mc-key { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .3rem; }
.mc-key h3 { font-size: .95rem; margin: 0 0 .6rem; }
.mc-key textarea { min-height: 120px; }
.answers-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .answers-split { grid-template-columns: 1fr; } }
.answers-pages { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.answers-pages img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.answers-pages.wide { max-height: 60vh; }
.pages-panel > summary { cursor: pointer; font-weight: 600; color: var(--muted); }

/* ---- Dashboard de costos --------------------------------------------------- */
.stats-row { gap: 1.5rem; }
.stat { display: flex; flex-direction: column; gap: .1rem; min-width: 6rem; }
.stat-n { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.stat-l { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Revisión: pestañas Vista/Editar --------------------------------------- */
.review-artifact { padding-top: .5rem; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.tab {
  background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: .5rem .8rem; font-weight: 600;
}
.tab:hover { color: var(--fg); filter: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane[hidden] { display: none; } /* gana sobre .edit-split{display:grid} */
.edit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.edit-split .edit-form { margin: 0; }
@media (max-width: 720px) { .edit-split { grid-template-columns: 1fr; } }

/* Contenido markdown renderizado */
.markdown-body { line-height: 1.6; overflow-wrap: anywhere; }
.markdown-body.preview { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: .8rem; background: var(--surface-2); overflow: auto; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1rem 0 .5rem; line-height: 1.25; }
.markdown-body h2 { font-size: 1.1rem; display: block; }
.markdown-body h3 { font-size: 1rem; }
.markdown-body p { margin: .5rem 0; }
.markdown-body ul, .markdown-body ol { margin: .5rem 0 .5rem 1.2rem; }
.markdown-body table { width: auto; border: 1px solid var(--line); }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: .35rem .6rem; }
.markdown-body pre { background: var(--surface-2); padding: .7rem; border-radius: var(--radius-sm); overflow: auto; }
.markdown-body code { font-family: ui-monospace, monospace; font-size: .92em; }
.markdown-body img { max-width: 100%; }

/* ---- Panel de desarrollador ------------------------------------------------ */
.dev-panel {
  margin-top: 1rem; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-weak); padding: .8rem 1rem;
}
.dev-panel > summary { cursor: pointer; font-weight: 650; color: var(--accent); }
.dev-round { border-top: 1px solid var(--line); padding: .6rem 0; }
.dev-round:first-of-type { border-top: 0; }
.dev-round-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.dev-problems { margin: .4rem 0 0 1.1rem; font-size: .88rem; }
.dev-prompts-actions { margin-top: .8rem; }
.dev-prompts { margin-top: .8rem; }
.dev-prompts h4 { margin: .7rem 0 .2rem; text-transform: capitalize; font-size: .9rem; }
.dev-prompts pre {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem; white-space: pre-wrap; font-size: .82rem; margin: 0;
}

/* ---- Toasts ---------------------------------------------------------------- */
.toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: .55rem;
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: .55rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: .7rem .85rem; font-size: .9rem;
  animation: toast-in .25s cubic-bezier(.2,.8,.2,1) both;
}
.toast.leaving { animation: toast-out .2s ease forwards; }
.toast::before { font-size: 1rem; line-height: 1.3; flex: none; }
.toast.success { border-left-color: var(--ok); }
.toast.success::before { content: "✓"; color: var(--ok); }
.toast.error   { border-left-color: var(--danger); }
.toast.error::before   { content: "✕"; color: var(--danger); }
.toast.info    { border-left-color: var(--accent); }
.toast.info::before    { content: "ℹ"; color: var(--accent); }

/* ---- Animations ------------------------------------------------------------ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes flash {
  0% { box-shadow: 0 0 0 0 var(--focus); }
  30% { box-shadow: 0 0 0 4px var(--focus); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }

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

/* ---- Páginas públicas (login/activar/solicitar) ------------------------------ */
.auth-main { max-width: 26rem; margin: 4rem auto; padding: 0 1.25rem; }
.auth-brand { justify-content: center; display: flex; margin-bottom: 1.2rem; }
/* Enlace de idioma: cada idioma con su nombre; el actual, sin enlace. */
.idiomas { display: inline-flex; gap: .4rem; font-size: .9rem; color: var(--muted); }
.idiomas [aria-current] { color: inherit; font-weight: 600; }
.auth-main > .idiomas { display: flex; justify-content: center; margin: -0.6rem 0 1rem; }
.auth-card h1 { font-size: 1.25rem; margin-bottom: .8rem; }
.auth-card form { margin: .8rem 0; }
/* Botón «Entrar con Google»: fondo claro fijo (lineamientos de marca de Google). */
.google-btn {
	width: 100%; justify-content: center; margin: .8rem 0;
	background: #fff; color: #1f1f1f; border-color: var(--line-2);
	font-size: 1rem; padding: .7rem 1rem;
}
.google-btn:hover { filter: none; background: #f3f4f6; }
.invite-card { border-color: var(--accent); }
.invite-link {
	display: block; padding: .6rem .8rem; background: var(--surface-2);
	border: 1px solid var(--line-2); border-radius: var(--radius-sm);
	word-break: break-all; user-select: all; font-size: .85rem;
}

/* ---- Acta imprimible -------------------------------------------------------- */
.acta-body { background: var(--surface); }
.acta { max-width: 720px; margin: 2rem auto; padding: 0 1.25rem; }
.acta-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.acta-head h1 { margin-bottom: .2rem; }
.acta-table { margin-top: 1rem; }
.acta-table th:first-child, .acta-table td:first-child { width: 3rem; }
.acta-table th:last-child, .acta-table td:last-child { width: 6rem; }
.acta-foot { margin-top: 1.5rem; }
@media print {
	.no-print { display: none !important; }
	.acta-body { background: #fff; color: #000; }
	.acta { margin: 0; max-width: none; }
	.acta-table th, .acta-table td { border-bottom: 1px solid #999; color: #000; }
}

/* ---- Small screens --------------------------------------------------------- */
@media (max-width: 640px) {
  main { margin-top: 1rem; }
  .row { gap: .5rem; }
  h1 { font-size: 1.35rem; }
  th:nth-child(1), td:nth-child(1) { position: sticky; left: 0; }
  table { display: block; overflow-x: auto; }
}

/* ==== Modo "Calificar automáticamente" ==================================== */

/* Botón protagonista del flujo por defecto. */
.cta {
  font-size: 1.05rem;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  box-shadow: var(--shadow-lg);
}
.cta:hover:not(:disabled) { filter: brightness(1.08); }
.cta:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.autograde-form { margin: .4rem 0 .8rem; }
.autograde-form > .muted { max-width: 46rem; margin-top: .5rem; }
.continue-row { align-items: center; margin: .6rem 0; }

/* Checklist de la preparación. */
.check-steps { list-style: none; padding: .2rem 0 .4rem; margin: .4rem 0; }
.check-step {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .28rem 0; font-size: .95rem;
}
.check-step::before {
  content: "○"; color: var(--muted); width: 1.1rem; text-align: center; flex: none;
}
.check-step[data-state="running"]::before {
  content: "◌"; color: var(--info);
  animation: pulse 1.4s ease-in-out infinite; display: inline-block;
}
.check-step[data-state="running"] .check-label { color: var(--info); font-weight: 600; }
.check-step[data-state="done"]::before { content: "✓"; color: var(--ok); }
.check-step[data-state="failed"]::before { content: "✕"; color: var(--danger); }
.check-step[data-state="pending"] .check-label { color: var(--muted); }
.check-detail { font-size: .85rem; }

/* Panel «Lo que Marqua decidió». */
details.decisions { margin: .6rem 0; }
details.decisions > summary {
  cursor: pointer; font-weight: 600; list-style: none;
}
details.decisions > summary::-webkit-details-marker { display: none; }
details.decisions > summary::before { content: "▸ "; }
details.decisions[open] > summary::before { content: "▾ "; }
.decisions-body { margin-top: .6rem; display: grid; gap: .55rem; }
.decision {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem .7rem; background: var(--surface-2);
}
.decision-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.decision-more { margin-top: .35rem; }
.decision-more > summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.decision-more .markdown-body {
  margin-top: .5rem; padding: .6rem .8rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-height: 24rem; overflow: auto;
}

/* Chips de procedencia (✨ propuesto por Marqua / ✎ editado por ti). */
.chip.src[data-src="ai"], .chip.src[data-src="ai_reconstruido"] {
  background: var(--info-bg); color: var(--info); border-color: transparent;
}
.chip.src[data-src="human"] { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

/* Estudiantes detectados (fuentes zip/pdf). */
.segments { display: grid; gap: .6rem; margin-top: .5rem; }
.segment {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem; background: var(--surface);
}
.segment-thumb {
  width: 74px; height: auto; border: 1px solid var(--line-2);
  border-radius: 4px; display: block;
}
.segment-info { flex: 1; min-width: 0; }
.segment-info .row { align-items: center; }
.seg-move { margin-top: .2rem; }

/* Ajustes avanzados y "Más opciones" plegados. */
details.advanced-settings > summary, details.more-options > summary {
  cursor: pointer; list-style: none; font-weight: 600;
}
details.advanced-settings > summary::-webkit-details-marker,
details.more-options > summary::-webkit-details-marker { display: none; }
details.advanced-settings > summary::before, details.more-options > summary::before { content: "▸ "; }
details.advanced-settings[open] > summary::before, details.more-options[open] > summary::before { content: "▾ "; }
details.advanced-settings { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
details.advanced-settings > form { margin-top: .8rem; }
details.more-options { margin-top: .3rem; }
details.more-options > summary { font-weight: 400; font-size: .9rem; }
details.more-options .row { margin-top: .4rem; }

/* Título del paso 3 con el botón de aprobación masiva al lado. */
.roster-title { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.roster-title form { margin: 0; }

/* Navegación anterior/siguiente en la revisión. */
.review-nav { margin-left: auto; display: inline-flex; gap: .7rem; }

/* Nota de éxito del paso 1. */
.ok-note { color: var(--ok); margin: .3rem 0 0; }

/* Controles de corrida (abortar / continuar donde quedó). */
.run-controls { align-items: center; margin: .4rem 0; }
.run-controls form { margin: 0; }

/* ==== Feedback in situ (junto al control que dispara la acción) =========== */
/* Diseño: línea de estado compacta, sin fondo, icono por estado; el flex-wrap
   del contenedor la coloca al lado del botón o debajo si no cabe. */
.action-status {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: .85rem; font-weight: 550; line-height: 1.4;
  max-width: 34rem; min-width: 0; overflow-wrap: anywhere;
  opacity: 1; transition: opacity .35s ease;
  animation: status-in .18s ease both;
}
.action-status[hidden] { display: none; }
.action-status::before { flex: none; line-height: inherit; }
.action-status[data-type="success"] { color: var(--ok); }
.action-status[data-type="success"]::before { content: "✓"; }
.action-status[data-type="error"] { color: var(--danger); }
.action-status[data-type="error"]::before { content: "✕"; }
.action-status[data-type="info"] { color: var(--info); }
.action-status[data-type="info"]::before { content: "ℹ"; }
.action-status[data-type="progress"] { color: var(--muted); font-weight: 500; }
.action-status[data-type="progress"]::before {
  content: ""; width: .8em; height: .8em; align-self: center;
  border: 2px solid var(--info); border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
.action-status.leaving { opacity: 0; }
/* La subida de entregas: el progreso en línea propia bajo el botón. */
form.upload > .action-status { flex-basis: 100%; }
@keyframes status-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Sparklines del panel de metricas: SVG en linea, sin ninguna libreria.
   `currentColor` hereda el tema claro/oscuro que ya existe. */
.spark { width: 7rem; height: 1.2rem; color: var(--accent); vertical-align: middle; }