/*
 * Professora Fabi — application styles.
 *
 * The Rails port shipped with functional but unstyled views. This sheet restores
 * the APEX visual identity: a white top bar + left sidebar shell over a soft grey
 * canvas, crimson accent (#c14e52 — the same red the Resultado service uses),
 * and the "Professora Fabi" wordmark. Views use plain semantic HTML, so element
 * selectors here style every page; the classes below add the shell and cards.
 */

:root {
  --crimson: #c14e52;
  --crimson-dark: #a83f45;
  --crimson-soft: #f6e7e8;
  --royal: #2b4a9e;
  --canvas: #f3f4f7;
  --surface: #ffffff;
  --ink: #2a2a31;
  --ink-soft: #55535e;
  --ink-muted: #8d8b96;
  --line: #e4e4ea;
  --line-soft: #eeeef2;
  --ok: #2f7d54;
  --ok-soft: #e7f2ec;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(35,32,45,.05), 0 1px 3px rgba(35,32,45,.04);
  --shadow: 0 1px 2px rgba(35,32,45,.04), 0 8px 24px rgba(35,32,45,.06);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sidebar-w: 248px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--crimson-dark); text-decoration: underline; }

/* ---------- Brand wordmark ---------- */
.brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .brand-pro {
  font-size: 12px; font-weight: 600; font-style: italic; color: var(--royal);
  letter-spacing: .01em; margin-left: 3px;
}
.brand .brand-fabi {
  font-size: 28px; font-weight: 800; color: var(--crimson); letter-spacing: -.01em;
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  min-height: 100vh;
}
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Opens the sidebar drawer below the breakpoint; there is no drawer above it. */
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-soft);
}
.menu-toggle:hover { border-color: var(--crimson-dark); color: var(--crimson-dark); }
.sidebar-backdrop { display: none; }
.usermenu { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-soft); }
.usermenu .who { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
.usermenu form { margin: 0; }
.usermenu .logout {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 500;
}
.usermenu .logout:hover { border-color: var(--crimson-dark); color: var(--crimson-dark); }

.sidebar {
  grid-area: sidebar;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 16px 14px; overflow-y: auto;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); padding: 18px 12px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 24px; color: var(--ink-soft);
  font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--crimson); color: #fff; box-shadow: var(--shadow-sm); }
.nav a.active:hover { background: var(--crimson-dark); }
.nav a .ico { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.9; }

.main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 28px 32px; width: 100%; }
.appfooter {
  padding: 16px 32px; color: var(--ink-muted); font-size: 13px;
  border-top: 1px solid var(--line); background: var(--surface);
}

/* ---------- Page header ---------- */
h1 { font-size: 25px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 20px; color: var(--ink); }
h2 { font-size: 18px; font-weight: 650; margin: 28px 0 12px; }
h3 { font-size: 15px; font-weight: 650; margin: 18px 0 8px; }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head .cta { margin: 0; }

/* ---------- Cards & surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.card > h2:first-child, .card > p:first-child { margin-top: 0; }
.card > p:last-child { margin-bottom: 0; }
.card p { color: var(--ink-soft); }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0 0 24px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.stat .stat-n { font-size: 30px; font-weight: 750; color: var(--crimson); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .stat-l { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn, button, input[type="submit"], a.btn-secondary {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 8px; padding: 9px 18px; border: 1px solid var(--line);
  transition: background .12s, border-color .12s, color .12s;
}
/* A link that acts as a secondary action ("Vincular existente") reads as a
   button, like a.cta does for the primary one. */
a.btn-secondary { display: inline-block; text-decoration: none; }
/* Primary: real form submits and explicit .btn/.btn-primary links */
.btn, .btn-primary, input[type="submit"] {
  background: var(--crimson); color: #fff; border-color: var(--crimson);
}
.btn:hover, .btn-primary:hover, input[type="submit"]:hover {
  background: var(--crimson-dark); border-color: var(--crimson-dark); color: #fff; text-decoration: none;
}
button.btn, button.btn:hover, button.btn:focus-visible { color: #fff; }
/* Secondary: button_to actions (e.g. Remover) render a bare <button> */
button { background: var(--surface); color: var(--ink-soft); }
button:hover { border-color: var(--crimson-dark); color: var(--crimson-dark); }
.btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--crimson-dark); color: var(--crimson-dark); text-decoration: none; }
/* A submit that is the secondary choice ("cadastrar assim mesmo") must not
   outrank the primary one beside it, which input[type=submit] would. */
input[type="submit"].btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
input[type="submit"].btn-secondary:hover { background: var(--surface); border-color: var(--crimson-dark); color: var(--crimson-dark); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--crimson-dark); outline-offset: 2px;
}

/* ---------- Forms ---------- */
form { margin: 0 0 16px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], input[type="date"], input[type="url"], select, textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
input[type="color"] {
  width: 64px; height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; cursor: pointer;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2355535e' stroke-width='1.8'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-soft);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--crimson); }
textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: 16px; }
.hint { font-size: 12.5px; color: var(--ink-muted); margin-top: 5px; }
.field-error, .error { color: var(--crimson); font-size: 13px; }
.required-marker { color: #b4232a; font-weight: 800; }
.error-list { margin-bottom: 20px; }
.error-list h3 { margin-bottom: 8px; color: var(--crimson); }
.error-list ul { color: var(--crimson); }
/* align-items: center keeps a bare text link (btn-secondary without btn) on
   the centre line of the padded button beside it, instead of stretching and
   sitting high. */
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

/* Search rows that sit inline (index pages) */
form.inline, .searchbar form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.report-toolbar .searchbar { margin: 0; border: none; padding: 0; flex: 0 1 320px; }
/* The institution filter rides inside the search form, which needs the room. */
.report-toolbar .searchbar:has(select) { flex: 0 1 620px; max-width: 620px; }
.toolbar-actions { display: flex; align-items: center; gap: 10px; }


/* ---------- Report (list pages) ---------- */
.report {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0; box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden;
}
.report > form:first-child,
.report > .searchbar,
.report > .report-toolbar {
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
.report > .report-toolbar:has(.searchbar) { justify-content: space-between; }
/* The card clips its corners (overflow: hidden), so a report with more columns
   than the screen holds scrolls inside .tablewrap, not against the card. */
.report > .tablewrap > table { margin: 0; }
.report-empty { padding: 32px 24px; text-align: center; color: var(--ink-muted); }
.report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.report-controls { display: flex; align-items: center; gap: 10px; }
.report-toolbar form { margin: 0; }

.status-badge {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
}
.status-pending { color: #854d0e; background: #fef3c7; }
.status-ativo { color: #14532d; background: #dcfce7; }
.status-excluido { color: #7f1d1d; background: #fee2e2; }

/* ---------- CTA (call-to-action button) ---------- */
.cta, a.cta {
  background: var(--crimson); color: #fff; border-color: var(--crimson);
  padding: 9px 18px; font-size: 14px; font-weight: 600; border-radius: 8px;
  text-decoration: none; transition: background .12s, border-color .12s, color .12s;
  display: inline-block;
}
.cta:hover, a.cta:hover {
  background: var(--crimson-dark); border-color: var(--crimson-dark); color: #fff; text-decoration: none;
}
/* A second action beside the primary one: same shape, quieter, so the main
   call to action on the page stays the obvious one. */
.cta-secondary, a.cta-secondary {
  background: var(--surface); color: var(--crimson-dark); border: 1px solid var(--crimson);
}
.cta-secondary:hover, a.cta-secondary:hover {
  background: var(--crimson-soft); border-color: var(--crimson-dark); color: var(--crimson-dark);
}

/* ---------- Tables ---------- */
/* Every report table sits in one of these: it is what scrolls sideways when the
   columns do not fit, on a phone or on a narrowed window. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap:focus-visible { outline: 2px solid var(--crimson-dark); outline-offset: -2px; }
table {
  width: 100%; border-collapse: collapse; background: transparent;
  border: none; border-radius: 0; overflow: hidden; font-size: 14px;
}
thead th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-muted); background: transparent; padding: 12px 16px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
}
thead th:last-child { border-right: none; }
thead th.actions { text-align: center; width: 1%; white-space: nowrap; }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: middle; border-right: 1px solid var(--line-soft); }
tbody td:last-child { border-right: none; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: transparent; }
td form { display: inline; }
td.actions { text-align: center; white-space: nowrap; }
td .btn, td button { padding: 6px 12px; font-size: 13px; }
td a + a, td a + form, td form + form { margin-left: 12px; }
a.icon-link, button.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; color: var(--ink-soft); transition: background .12s, color .12s; position: relative; font-size: 14px; background: none; border: none; cursor: pointer; }
a.icon-link:hover, button.icon-link:hover { background: #e8e8ed; color: var(--crimson-dark); }
a.icon-link i, button.icon-link i { font-size: 14px; }
/* Shown in place of an action that is unavailable, so the row still explains
   itself instead of offering a click that would be refused. */
span.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; position: relative; font-size: 14px; color: var(--ink-muted); opacity: .45; cursor: not-allowed; }
span.icon-link i { font-size: 14px; }
.global-tooltip {
  position: fixed; z-index: 1000; max-width: calc(100vw - 16px); padding: 4px 8px; border-radius: 4px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap;
  pointer-events: none; box-shadow: var(--shadow-sm);
}

/* ---------- Flash ---------- */
.flash {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px;
  font-size: 14px; margin-bottom: 20px; border: 1px solid transparent;
}
.flash.alert { background: var(--crimson-soft); color: var(--crimson-dark); border-color: #eccccd; }
.flash.notice { background: var(--ok-soft); color: var(--ok); border-color: #cfe6d9; }
.toast {
  position: fixed; top: 76px; right: 24px; z-index: 200; width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; box-shadow: var(--shadow);
  font-size: 14px; transition: opacity .2s, transform .2s;
}
.toast-notice { background: var(--ok-soft); color: var(--ok); border: 1px solid #cfe6d9; }
.toast-alert { background: var(--crimson-soft); color: var(--crimson-dark); border: 1px solid #eccccd; }
.toast-leaving { opacity: 0; transform: translateY(-8px); }

/* ---------- Modals ---------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.modal-dialog {
  position: relative; background: var(--surface); border-radius: 12px; width: 90%; max-width: 600px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(35,32,45,0.2);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 { margin: 0; font-size: 20px; font-weight: 650; }
.modal-close {
  background: none; border: none; font-size: 20px; color: var(--ink-soft);
  cursor: pointer; padding: 4px 8px; display: flex; align-items: center; justify-content: center;
  transition: color .12s;
}
.modal-close:hover { color: var(--crimson-dark); }
.modal-body { padding: 20px 24px; }
.modal-body > form { margin-bottom: 0; }
.modal-table-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.selection-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: inherit; font-size: inherit; }
.selection-list { display: grid; gap: 10px; }
/* Assessments a guardian has already answered, listed under their name. */
.selection-respostas { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.selection-respostas li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.selection-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
}
.selection-card h3, .selection-card p { margin: 0; }
.selection-card p { color: var(--ink-soft); font-size: 13px; }

.confirm-dialog {
  border: none; border-radius: 12px; padding: 0; width: 90%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(35,32,45,0.2);
}
.confirm-dialog[open] {
  position: fixed; inset: auto; top: 50%; left: 50%; margin: 0;
  transform: translate(-50%, -50%);
}
.confirm-dialog::backdrop { background: rgba(0,0,0,0.5); }
.confirm-dialog form { padding: 24px; margin: 0; }
.confirm-dialog p { margin: 0 0 20px; color: var(--ink); font-size: 15px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Breadcrumbs and result dialog ---------- */
.breadcrumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 13px; margin: 0 0 10px; }
.breadcrumbs a { color: var(--ink-soft); }
.result-dialog {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 760px); border: 0; border-radius: var(--radius-lg);
  padding: 0; box-shadow: 0 20px 60px rgba(35,32,45,.25);
}
.result-dialog::backdrop { background: rgba(22, 21, 27, .5); }
.result-dialog > .modal-close { position: absolute; right: 12px; top: 12px; z-index: 1; }
.result-content { padding: 28px; }
.result-content h2 { margin: 0 40px 8px 0; }
.result-score { color: var(--ink-soft); margin: 0 0 6px; }
.result-score strong { color: var(--crimson); font-size: 22px; margin-left: 6px; }
.result-duration { color: var(--ink-soft); font-size: 13px; margin: 0 0 20px; }
.result-duration strong { color: var(--ink); margin-left: 4px; }
.result-score:last-of-type { margin-bottom: 20px; }
.result-answers { margin: 0; padding-left: 24px; }
.result-answers li { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.result-question { font-weight: 650; color: var(--ink); margin: 0 0 8px; }
/* overflow-wrap: anywhere — a single unbroken word (a pasted
   "ArrochaArrochaArrocha...") otherwise pushes the whole dialog sideways. */
.result-content, .result-question, .result-answer { overflow-wrap: anywhere; }
.result-answer { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--canvas); color: var(--ink-soft); }
.result-answer-colored { color: #111; }
.result-estudantes { margin: 0; padding: 10px 12px 10px 30px; border-radius: 8px; background: var(--canvas); color: var(--ink-soft); }
.result-estudantes li { padding: 2px 0; }
.result-attachment { display: inline-block; margin-top: 10px; }
.result-attachment img { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: 8px; }
.result-attachment-file { display: inline-block; margin-top: 10px; }
.audio-player {
  display: grid; grid-template-columns: 38px auto minmax(100px, 1fr) auto minmax(90px, 120px);
  align-items: center; gap: 9px; max-width: 620px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #f8f8fa;
}
.audio-player audio { display: none; }
.audio-player-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: var(--crimson-dark); color: #fff;
}
.audio-player-toggle:hover { background: #8f3037; color: #fff; }
.audio-player-time { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.audio-player input[type="range"] { width: 100%; min-width: 0; accent-color: var(--crimson-dark); cursor: pointer; }
.audio-player-volume { display: flex; align-items: center; gap: 6px; margin: 0; }
.audio-player-volume i { color: var(--ink-soft); }
/* Spans the whole grid so it appears under the controls while the file is
   still downloading, and takes no room once it is ready. */
.audio-player-status { grid-column: 1 / -1; color: var(--ink-muted); font-size: 12px; }
.audio-player-status:empty { display: none; }
.audio-player.is-loading .audio-player-toggle { background: var(--line); color: var(--ink-muted); cursor: progress; }
.audio-player.is-loading .audio-player-status::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px;
  vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--crimson-dark);
  border-radius: 50%; animation: audio-player-spin .7s linear infinite;
}
@keyframes audio-player-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .audio-player.is-loading .audio-player-status::before { animation: none; }
}

/* ---------- Focused assessment flow ---------- */
.focus-mode { min-height: 100vh; background: #f7f5f4; }
.assessment-focus { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 64px; }
.assessment-focus-header { margin-bottom: 22px; padding: 24px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.assessment-focus-header h1, .assessment-focus-header p { margin: 0; }
.assessment-focus-header p { color: var(--ink-soft); }
.assessment-focus form { margin: 0; }
.assessment-focus fieldset { margin: 0 0 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
/* The enunciado is a block inside the box: a legend sits on the border line
   and a long one overflows the fieldset instead of wrapping inside it. */
.assessment-focus .question-enunciado { margin: 0 0 14px; color: var(--ink); font-weight: 700; line-height: 1.45; }
.assessment-focus .question-enunciado .required-marker { color: var(--crimson-dark); }

/* Alternatives are neutral buttons until one is picked, when the alternative's
   own "Cor ao selecionar" fills it — with a foreground chosen for contrast. */
.question-sem-alternativas {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--crimson); background: var(--crimson-soft); color: var(--crimson-dark);
  font-size: 13px;
}
.options { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-weight: 600; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.option:hover { border-color: var(--crimson-dark); }
/* Kept in the accessibility tree and focusable, just not drawn. */
.option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.option:has(input:focus-visible) { outline: 2px solid var(--crimson-dark); outline-offset: 2px; }
.option:has(input:checked) {
  background: var(--option-bg); color: var(--option-fg); border-color: var(--option-bg);
}
.option:has(input:checked) img { outline: 2px solid var(--option-fg); outline-offset: 2px; }
.assessment-confirmation { max-width: 680px; margin-inline: auto; }
.assessment-confirmation dl { display: grid; gap: 10px; }
.assessment-confirmation dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.assessment-confirmation dt { color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.assessment-confirmation dd { margin: 0; color: var(--ink); }
/* Voltar is a text link next to the primary button, so it reads as a link. */
.assessment-confirmation .form-actions a.btn-secondary { text-decoration: underline; }
.assessment-confirmation .form-actions a.btn-secondary:hover { text-decoration: underline; }

/* ---------- Date picker ---------- */
.date-picker { position: relative; display: flex; }
.date-picker input { padding-right: 42px; }
.date-picker-toggle { position: absolute; right: 2px; top: 2px; height: calc(100% - 4px); border: 0; background: transparent; padding: 0 12px; color: var(--ink-soft); }
/* Fixed, not absolute: inside a modal the dialog scrolls (overflow-y: auto),
   which clips an absolutely positioned popover. The controller places it
   against the input and flips it above when there is no room below. */
.date-picker-popover { position: fixed; z-index: 140; top: 0; left: 0; width: 330px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.date-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; text-transform: capitalize; }
.date-picker-head button { border: 0; padding: 2px 9px; font-size: 22px; line-height: 1; }
.date-picker-selectors { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
.date-picker-selectors label { margin: 0; }
.date-picker-selectors select { min-width: 0; padding: 6px 30px 6px 8px; font-size: 13px; background-position: right 8px center; }
.date-picker-week, .date-picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-picker-week { color: var(--ink-muted); font-size: 11px; margin-bottom: 4px; }
.date-picker-days button { border: 0; background: transparent; border-radius: 6px; padding: 6px 0; color: var(--ink); }
.date-picker-days button:hover, .date-picker-days button.selected { background: var(--crimson-dark); color: #fff; }

/* ---------- File uploader ---------- */
/* Grid, so the preview always takes its own row: as a flex item its
   max-width would cancel the line break and park it beside the button. */
.file-upload { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
/* The chosen image is shown back before sending: for some questions the
   drawing is the whole answer. */
.file-upload-preview {
  grid-column: 1 / -1; justify-self: start; max-width: min(260px, 100%); max-height: 200px;
  border: 1px solid var(--line); border-radius: 8px; object-fit: contain;
}
.file-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-upload-button {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0; padding: 9px 14px;
  border: 1px solid var(--crimson); border-radius: 8px; background: var(--crimson-soft); color: var(--crimson-dark);
  font-size: 14px; cursor: pointer; transition: background .12s, color .12s;
}
.file-upload-button:hover { background: var(--crimson-dark); color: #fff; }
.file-upload-input:focus + .file-upload-button { outline: none; box-shadow: 0 0 0 3px var(--crimson-soft); }
.file-upload-name { min-width: 0; overflow: hidden; color: var(--ink-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.invitation-link input { max-width: 100%; }

/* ---------- Video wrapper ---------- */
.video-wrapper {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.video-wrapper iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}

/* ---------- Empty state ---------- */
.empty { text-align: center; color: var(--ink-muted); padding: 40px 20px; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background-color: #f0eef0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg stroke='%23c14e52' stroke-opacity='0.14' stroke-width='2' fill='none'%3E%3Cpath d='M20 12v20'/%3E%3Cpath d='M20 12c6-2 10 0 10 0'/%3E%3Cpath d='M62 54v20'/%3E%3Cpath d='M62 54c6-2 10 0 10 0'/%3E%3C/g%3E%3Cg fill='%23c14e52' fill-opacity='0.11'%3E%3Ccircle cx='16' cy='33' r='4'/%3E%3Ccircle cx='58' cy='75' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.login-card {
  width: 100%; max-width: 440px; background: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(35,32,45,.14); padding: 40px 36px;
}
.login-card .brand { align-items: center; width: 100%; margin-bottom: 26px; }
.login-card h1 { text-align: left; font-size: 24px; margin: 0 0 6px; }
.login-card .sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 22px; }
.login-card .field { margin-bottom: 14px; }
.login-card input { max-width: none; }
.login-card input[type="submit"], .login-card .btn { width: 100%; padding: 12px; font-size: 15px; margin-top: 6px; }
.login-card .forgot { display: block; text-align: center; margin-top: 18px; font-size: 14px; }
.login-card .flash { margin-bottom: 18px; }

/* ---------- Registration (public, invitation link) ----------
   Same card-on-the-musical-background shell as login, but wide enough for the
   four steps of the form, which are laid out in a responsive field grid. */
.register-card {
  width: 100%; max-width: 760px; background: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(35,32,45,.14); padding: 40px 36px; margin: 24px 0;
}
.register-card .brand { align-items: center; width: 100%; margin-bottom: 26px; }
.register-card h1 { font-size: 24px; margin: 0 0 6px; }
.register-card .sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 24px; }
.register-card .toast { position: static; margin-bottom: 20px; }
.register-step { margin-bottom: 26px; }
.register-step h2 {
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--crimson-dark);
}
.register-step:last-of-type { margin-bottom: 0; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.field-grid .field-wide { grid-column: 1 / -1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field label { margin-bottom: 0; }
.register-card .form-actions { margin-top: 26px; }

/* ---------- Documentation page ---------- */
.doc { max-width: 100%; }

/* ---------- Responsive ----------
   Below the breakpoint the sidebar stops being a column of the grid and
   becomes a drawer over the page: laid out as a row it wrapped into a wall of
   links that pushed every page a screenful down. `sidebar_controller` opens it
   from the topbar's menu button and closes it on a tap, on Escape, and as soon
   as the window is wide enough to hold the column again. */
@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "topbar" "main"; }
  .menu-toggle { display: inline-flex; }
  /* min-width: 0 everywhere along the top row: as a grid item the topbar is
     otherwise as wide as its content demands, and that width becomes the
     width of the whole page, which then scrolls sideways. */
  .topbar { padding: 0 14px; gap: 10px; min-width: 0; }
  .topbar-start { flex: 0 1 auto; }
  .brand { min-width: 0; }
  .usermenu { gap: 10px; min-width: 0; }
  .usermenu .who { min-width: 0; overflow: hidden; white-space: nowrap; }
  .usermenu .logout { flex: 0 0 auto; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 30;
    width: min(280px, 84vw); border-right: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .app.sidebar-open .sidebar { transform: none; }
  /* Only while the drawer is open: a plain `.sidebar-backdrop { display: block }`
     outranks the `hidden` attribute and would dim every page. */
  .app.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0; z-index: 25; background: rgba(22, 21, 27, .45);
  }
  .content { padding: 20px; }
  .page-head, .report-head { align-items: flex-start; }
  .report > form:first-child, .report > .searchbar, .report > .report-toolbar { padding: 14px 16px; }
  .toolbar-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media (max-width: 620px) {
  /* Search, filter and the button each take a row: side by side on a phone
     none of them is wide enough to read or to tap. */
  .report-toolbar .searchbar, .report-toolbar .searchbar:has(select) { flex: 1 1 100%; max-width: none; }
  .searchbar { max-width: none; flex-wrap: wrap; }
  .searchbar input[type="search"], .searchbar select { flex: 1 1 100%; }
  .audio-player { grid-template-columns: 38px auto 1fr auto; }
  .audio-player-volume { grid-column: 3 / -1; }
  .assessment-focus { width: min(100% - 20px, 860px); padding-top: 18px; }
}

/* ---------- Possible duplicate guardian (siblings share one) ---------- */
.responsavel-duplicado {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 12px;
}
.responsavel-duplicado-dados { display: flex; flex-direction: column; gap: 2px; }
.responsavel-duplicado form { margin: 0; }