/* Transporte AMF, protótipo visual. Identidade baseada no padrão das páginas informativas da AMF. */
:root {
  --navy: #172f4a;
  --navy-900: #0e2033;
  --azure: #3e93d0;
  --azure-ink: #1f6ea8;
  --azure-100: #e9f2fb;
  --green: #3fa557;
  --green-ink: #1f7a43;
  --green-100: #e8f5ec;
  --amber: #b9782a;
  --amber-100: #fbf1e3;
  --red-ink: #b4472f;
  --red-100: #fbebe6;
  --gold: #a87a1c;
  --gold-grad: linear-gradient(135deg, #d1a12f, #a87a1c);
  --ink: #2a2e35;
  --muted: #5b6470;
  --paper: #ffffff;
  --mist: #f5f8fc;
  --line: #dbe4ee;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1080px;
  --bar: 60px;
  --shadow: 0 1px 2px rgba(23, 47, 74, 0.04), 0 8px 24px rgba(23, 47, 74, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--sans); line-height: 1.18; margin: 0; text-wrap: balance; color: var(--navy); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--azure-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Faixa de protótipo */
.proto {
  background: var(--amber-100);
  border-bottom: 1px solid #ecd9b8;
  color: #7a4f14;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: 7px 16px;
}

/* Barra superior */
.bar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(23, 47, 74, 0.04);
}
.bar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--gold-grad);
  display: grid; place-items: center;
}
.brand-mark svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.2; }
.brand-name small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }
.bar-user { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 13px; }
.bar-user .who { text-align: right; line-height: 1.25; }
.bar-user .who strong { display: block; color: var(--navy); font-weight: 600; }
.bar-user .who span { color: var(--muted); font-size: 12px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn:focus-visible, .tab:focus-visible, .choice:focus-visible { outline: 3px solid rgba(62, 147, 208, 0.45); outline-offset: 2px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #0e2033; transform: translateY(-1px); }
.btn-gold { background: var(--gold-grad); color: #fff; }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(168, 122, 28, 0.3); }
.btn-ghost { background: var(--paper); color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: #cbaf74; }
.btn-danger { background: var(--paper); color: var(--red-ink); border-color: #efc7bd; }
.btn-danger:hover { background: var(--red-100); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy-900), var(--navy));
  color: #fff;
  padding: 40px 0 62px;
}
.hero .kicker { color: #e3c37a; }
.hero h1 { color: #fff; font-size: clamp(22px, 4.2vw, 34px); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); max-width: 24ch; margin-top: 8px; }
.hero h1::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e3c37a, #c9963f); margin-top: 12px; }
.kicker { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }

/* Cartões */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
}
.card.feat { border-left: 3px solid var(--gold); }

/* Seção */
.sec-head { margin-bottom: 22px; }
.sec-head h2 { color: var(--gold); font-size: clamp(24px, 3.4vw, 33px); margin-top: 6px; }
.sec-head .lead { color: var(--muted); margin-top: 8px; max-width: 62ch; }

/* Formulário */
.form-wrap { margin-top: -34px; padding-bottom: 56px; position: relative; }
.form-card { padding: 28px 28px 26px; border-top: 3px solid var(--gold); }
.form-card h2 { font-size: 22px; }
.step-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.step-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #e3c37a, transparent); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  text-align: left; cursor: pointer; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 16px 16px 14px;
  display: grid; gap: 4px; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.choice:hover { border-color: #cbaf74; }
.choice strong { font-family: var(--sans); font-size: 16px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.choice span.d { color: var(--muted); font-size: 14px; line-height: 1.45; }
.choice .ic { width: 28px; height: 28px; flex: none; }
.choice .ic svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice[aria-checked="true"] { border-color: var(--gold); background: #fffaf0; box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.14); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input {
  width: 100%; padding: 11px 13px; background: var(--paper);
  border: 1px solid #c9d6e3; border-radius: 9px; font-size: 15px;
}
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.2); }
.input::placeholder { color: #9aa5b1; }
.form-card .input::placeholder { letter-spacing: 0.06em; }
.input.err { border-color: #d98873; background: #fffafa; }
.err-msg { color: var(--red-ink); font-size: 12.5px; min-height: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--gold); flex: none; }
.notice {
  border-left: 4px solid var(--amber); background: var(--amber-100);
  border-radius: 0 10px 10px 0; padding: 12px 16px; font-size: 14.5px; color: #6b4412;
}
.notice strong { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.notice.info { position: relative; border-left: 0; border-radius: 12px; padding: 12px 16px 12px 26px; background: var(--azure-100); color: var(--navy); }
.notice.info::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #d1a12f, #a87a1c); }
.form-card .sec-head h2 { color: var(--gold); margin-top: 0; }
.form-actions { margin-top: 24px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.form-actions .small { color: var(--muted); font-size: 13px; flex: 1 1 240px; }

/* Sucesso */
.success { text-align: center; padding: 38px 24px; }
.success .seal {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--green-100); display: grid; place-items: center;
}
.success .seal svg { width: 32px; height: 32px; stroke: var(--green-ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.success h2 { font-size: 26px; }
.success p { color: var(--muted); max-width: 52ch; margin: 10px auto 0; }
.protocolo {
  display: inline-block; margin-top: 18px; padding: 10px 20px; border-radius: 10px;
  background: var(--mist); border: 1px dashed #cbaf74; font-family: var(--sans);
  font-weight: 700; letter-spacing: 0.06em; color: var(--navy); font-variant-numeric: tabular-nums;
}

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.login-main { display: grid; place-items: center; padding: 32px 18px 48px; }
.login-box { width: 100%; max-width: 420px; }
.login-box h1 { font-size: 26px; }
.login-box .sub { color: var(--muted); margin: 8px 0 22px; }
.demo-box { margin-top: 22px; padding: 16px; border: 1px dashed #cbaf74; border-radius: 12px; background: #fffaf0; }
.demo-box h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.demo-box p { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.demo-btns { display: grid; gap: 8px; }
.demo-btns .btn { justify-content: space-between; }
.demo-btns .btn small { font-weight: 500; color: var(--muted); }

/* Painel */
.panel-head { padding: 30px 0 8px; }
.panel-head h1 { font-size: clamp(26px, 3.6vw, 34px); }
.panel-head p { color: var(--muted); margin-top: 6px; max-width: 64ch; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 8px; }
.stat { padding: 16px 18px; }
.stat .n {
  font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat .l { color: var(--muted); font-size: 14px; margin-top: 6px; }

.tabs { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 10px; margin: 22px 0 16px; }
.tabs.c3 { --cols: 3; }
.tab {
  cursor: pointer; background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--navy);
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 0.15s;
}
.tab:hover { border-color: #cbaf74; }
.tab[aria-selected="true"] { background: var(--gold-grad); color: #fff; border-color: transparent; }
.tab .count { background: var(--azure-100); color: var(--azure-ink); border-radius: 999px; font-size: 12px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .count { background: rgba(255, 255, 255, 0.25); color: #fff; }

.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted);
}
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.list { display: grid; gap: 14px; padding-bottom: 56px; }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty strong { display: block; font-family: var(--sans); color: var(--navy); font-size: 18px; margin-bottom: 4px; }

/* Cartão de requerimento */
.req { padding: 20px 22px; border-left: 4px solid var(--line); }
.req.t-ok { border-left-color: var(--green); }
.req.t-warn { border-left-color: var(--amber); }
.req.t-danger { border-left-color: #d9694c; }
.req-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.req-top h3 { font-size: 19px; }
.req-top .meta { color: var(--muted); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 12px;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.chip.c-contratar { background: var(--azure-100); color: var(--azure-ink); }
.chip.c-cancelar { background: #f1ecf7; color: #5e3f8a; }
.chip.c-ok { background: var(--green-100); color: var(--green-ink); }
.chip.c-warn { background: var(--amber-100); color: #8a5a17; }
.chip.c-danger { background: var(--red-100); color: var(--red-ink); }
.chip.c-neutral { background: var(--mist); color: var(--muted); border: 1px solid var(--line); }
.alert { margin-top: 14px; border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.alert strong { font-family: var(--sans); display: block; font-size: 14px; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert.t-ok { background: var(--green-100); color: #1d5e37; }
.alert.t-warn { background: var(--amber-100); color: #6b4412; }
.alert.t-danger { background: var(--red-100); color: #86331f; }
.dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; margin: 16px 0 0; }
.dl div { min-width: 0; }
.dl .wide { grid-column: 1 / -1; }
.dl dt { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dl dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dest { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.dest .to { font-size: 14.5px; color: var(--muted); }
.dest .to strong { color: var(--navy); font-family: var(--sans); }
.dest .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.done-note { font-size: 13.5px; color: var(--muted); }

/* Linhas da empresa */
.rows { display: grid; gap: 10px; padding-bottom: 56px; }
.row-item {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.row-item h3 { font-size: 16px; }
.row-item .sub { color: var(--muted); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.row-item .col { font-size: 14.5px; min-width: 0; }
.row-item .col small { display: block; color: var(--muted); font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.row-item .end { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Diálogo */
dialog.modal {
  border: none; border-radius: 16px; padding: 0; width: min(480px, calc(100% - 32px));
  box-shadow: 0 24px 60px rgba(14, 32, 51, 0.35);
}
dialog.modal::backdrop { background: rgba(14, 32, 51, 0.55); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modalIn 0.28s ease; }
.modal-in { padding: 24px; display: grid; gap: 14px; }
.modal-in h3 { font-size: 20px; }
.modal-in p.d { color: var(--muted); font-size: 14.5px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Aviso rápido */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-family: var(--sans); font-size: 14px; box-shadow: 0 10px 30px rgba(14, 32, 51, 0.35);
  transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 50; max-width: calc(100% - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Campo que abre a gaveta de embarque */
.picker {
  text-align: left; cursor: pointer; color: var(--muted); line-height: 1.4; min-height: 46px;
  display: block; overflow-wrap: anywhere;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
}
.picker.filled { color: var(--ink); }

/* Gaveta de embarque, abre na parte de baixo da tela */
dialog.sheet {
  border: none; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 88vh;
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(14, 32, 51, 0.3); overflow: hidden;
}
dialog.sheet::backdrop { background: rgba(14, 32, 51, 0.55); backdrop-filter: blur(2px); }
dialog.sheet[open] { animation: sheetIn 0.28s ease; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-in { display: flex; flex-direction: column; max-height: 88vh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 20px; }
.sheet-head h3 { font-size: 18px; }
.sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; flex: none; }
.sheet-x svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; }
.sheet-aviso { margin: 0 20px 6px; padding: 10px 12px; font-size: 13.5px; background: var(--amber-100); color: #6b4412; border-radius: 10px; }
.sheet-body { overflow-y: auto; padding: 0 12px 20px; overscroll-behavior: contain; }
.sheet-group h4 {
  position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 12px 8px 8px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.sheet-group h4 span { color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.opt {
  width: 100%; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left;
  min-height: 52px; padding: 10px 10px; background: var(--paper); border: 0; border-bottom: 1px solid #edf2f7; cursor: pointer;
}
.opt:hover, .opt:focus-visible { background: var(--mist); outline: none; }
.opt .t { font-family: var(--sans); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; font-size: 15px; }
.opt .t.n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--azure-100); color: var(--azure-ink);
  display: grid; place-items: center; font-size: 13px; justify-self: start; margin-left: 6px;
}
.opt .l { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.opt[aria-pressed="true"] { background: #fffaf0; box-shadow: inset 3px 0 0 var(--gold); }

/* Parceria AMF e empresa de transporte */
.parceria { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; margin-top: 22px; }
.parceria .logo-slot {
  height: 48px; min-width: 120px; padding: 0 16px; display: grid; place-items: center;
  border: 1px dashed #cbaf74; border-radius: 10px; background: #fffaf0;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--gold); text-align: center;
}
.parceria img { height: 48px; width: auto; display: block; }
.parceria .sep { width: 1px; height: 36px; background: var(--line); }

footer.foot { background: var(--navy-900); color: #cfe0ef; padding: 26px 0; text-align: center; font-size: 13.5px; }
footer.foot p { max-width: 60ch; margin: 0 auto; }

@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr 1fr; }
  .row-item { grid-template-columns: 1fr 1fr; }
  .row-item .end { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .fields, .choices { grid-template-columns: 1fr; }
  .form-card { padding: 22px 18px; }
  .hero { padding: 30px 0 52px; }
  .form-wrap { margin-top: -34px; padding-bottom: 32px; }
  .form-card { padding: 18px 14px; }
  .choice { padding: 13px 12px 12px; }
  .choice span.d { font-size: 13px; line-height: 1.4; }
  .form-card .sec-head { margin-bottom: 12px; }
  .form-card .sec-head h2 { font-size: 20px; }
  .step-label { margin: 16px 0 8px; }
  .fields { gap: 12px; }
  .notice { padding: 10px 14px; font-size: 13.5px; }
  .brand-name small { display: none; }
  .bar-user .who { display: none; }
  .tabs { grid-template-columns: 1fr; }
  .req { padding: 18px 16px; }
  .dest .actions { width: 100%; }
  .dest .actions .btn { flex: 1; }
}
@media (max-width: 400px) {
  .row-item { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Página de confirmações (computador primeiro) */
.wrap.wide { max-width: 1240px; }
.tools { align-items: center; }
.tool-fields { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 420px; }
.tool-fields #busca { flex: 1 1 260px; max-width: 380px; }
.tool-fields #f-empresa { flex: 0 1 240px; }

.tbl { display: grid; gap: 8px; padding-bottom: 56px; }
.grp { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 18px 0 2px; display: flex; align-items: center; gap: 10px; }
.grp span { background: var(--azure-100); color: var(--azure-ink); border-radius: 999px; padding: 1px 9px; font-size: 12px; letter-spacing: 0; }
.tr {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.7fr) 110px;
  gap: 14px; align-items: center; padding: 12px 16px;
}
.tr.hist { grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1.6fr); }
.tr.head { padding: 4px 20px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.row-wrap { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.row-wrap.t-ok { border-left-color: var(--green); }
.row-wrap.t-warn { border-left-color: var(--amber); }
.row-wrap.t-danger { border-left-color: #d9694c; }
.row-wrap.open { box-shadow: 0 1px 2px rgba(23, 47, 74, 0.05), 0 12px 30px rgba(23, 47, 74, 0.1); }
.c-main { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 1px; min-width: 0; }
div.c-main { cursor: default; }
.c-main strong { font-family: var(--sans); font-size: 15px; color: var(--navy); overflow-wrap: anywhere; }
.meta { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.c-city, .c-dest { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.c-act { text-align: right; }
.chip { white-space: normal; }
.detail { border-top: 1px dashed var(--line); padding: 4px 20px 18px; }
.detail .alert { margin-top: 12px; }
.dl.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .tr.head { display: none; }
  .tr .c-city, .tr .c-dest { display: none; }
  .tr .c-chk { grid-column: 1; }
  .tr.hist { grid-template-columns: 1fr; }
  .tr.hist .c-city, .tr.hist .c-dest { display: block; }
  .detail { padding: 4px 16px 16px; }
  .dl.d4 { grid-template-columns: 1fr 1fr; }
}

/* Mais vida nas áreas internas */
body { background: var(--mist) linear-gradient(180deg, #e9f0f8 0, #f5f8fc 420px) no-repeat; }
.page-hero {
  position: relative; overflow: hidden; color: #fff; padding: 30px 0 76px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy));
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 94% -20%, rgba(227, 195, 122, 0.2), transparent 42%), radial-gradient(circle at 8% 120%, rgba(62, 147, 208, 0.25), transparent 42%);
}
.page-hero .wrap { position: relative; }
.page-hero .panel-head { padding: 0; }
.page-hero h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.page-hero h1::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e3c37a, #c9963f); margin-top: 12px; }
.page-hero .kicker { color: #e3c37a; }
.page-hero .panel-head p { color: #d4e3f1; }
.stats { margin-top: -44px; position: relative; }

.stat { display: flex; align-items: center; gap: 16px; animation: rise 0.5s ease both; }
.stat:nth-child(2) { animation-delay: 0.07s; }
.stat:nth-child(3) { animation-delay: 0.14s; }
.stat .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--azure-100); }
.stat .ico svg { width: 24px; height: 24px; fill: none; stroke: var(--azure-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat .ico.t-gold { background: #f6efdb; }
.stat .ico.t-gold svg { stroke: var(--gold); }
.stat .ico.t-amber { background: var(--amber-100); }
.stat .ico.t-amber svg { stroke: var(--amber); }
.stat .ico.t-green { background: var(--green-100); }
.stat .ico.t-green svg { stroke: var(--green-ink); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.c-main .who { display: grid; gap: 1px; min-width: 0; text-align: left; }

/* Marcador de cor da empresa */
.dot-e { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--c, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--muted)) 22%, transparent); }
.e-lubro { --c: #3e93d0; }
.e-pavanatto { --c: #c9963f; }
.e-amigo { --c: #3fa557; }
.e-lujan { --c: #7a5fb0; }
.e-rizzatti { --c: #d9694c; }

/* Linhas com resposta ao mouse */
.row-wrap { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.row-wrap:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(23, 47, 74, 0.05), 0 10px 26px rgba(23, 47, 74, 0.1); }
.row-item { transition: transform 0.15s, box-shadow 0.15s; }
.row-item:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(23, 47, 74, 0.05), 0 10px 26px rgba(23, 47, 74, 0.1); }
.tab { box-shadow: 0 1px 2px rgba(23, 47, 74, 0.04); }
.tab[aria-selected="true"] { box-shadow: 0 6px 16px rgba(168, 122, 28, 0.28); }


@media (max-width: 600px) {
  .stat { gap: 12px; }
  .page-hero { padding: 22px 0 70px; }
}

/* Dias da semana (caixas de seleção) */
.dias-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.dias-field legend { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 8px; }
.dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dia { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: 14.5px; transition: border-color 0.15s, background 0.15s; }
.dia:hover { border-color: #cbaf74; }
.dia input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; margin: 0; }
.dia:has(input:checked) { border-color: var(--gold); background: #fffaf0; }
.dia:has(input:focus-visible) { outline: 3px solid rgba(168, 122, 28, 0.35); outline-offset: 2px; }
@media (max-width: 400px) { .dias { grid-template-columns: 1fr; } }

/* Dias de uso na página da empresa */
.dias-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dias-chips .chip { font-weight: 500; }
.row-item.rich { display: block; }
.row-item.rich .r-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.row-item.rich .r-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.row-item.rich .r-dl dd .meta { margin-top: 2px; }
@media (max-width: 860px) { .row-item.rich .r-dl { grid-template-columns: 1fr 1fr; } }

/* Dias em uma linha por dia, com os turnos ao lado */
.dias { grid-template-columns: 1fr; gap: 6px; }
.dia-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px 7px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); }
.dia-nome { font-size: 14.5px; color: var(--ink); }
.turnos { display: flex; gap: 6px; }
.turno { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: 13.5px; font-family: var(--sans); font-weight: 500; color: var(--navy); transition: border-color 0.15s, background 0.15s; }
.turno:hover { border-color: #cbaf74; }
.turno input { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
.turno:has(input:checked) { border-color: var(--gold); background: #fffaf0; }
.turno.solo { padding: 6px 9px; }
.turno:has(input:focus-visible) { outline: 3px solid rgba(168, 122, 28, 0.35); outline-offset: 2px; }

/* Detalhe do pedido em blocos, com a marca do que vai para a empresa */
.legenda { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.mark { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.gbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.gbox { background: #fbfcfe; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; }
.gbox h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.gbox .dl { grid-template-columns: 1fr 1fr; margin-top: 8px; gap: 10px 14px; }
.gbox .dl dd { font-size: 14.5px; }
.dl .envia dt::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-left: 6px; vertical-align: middle; }
.dias-titulo { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.dias-titulo + .dias-chips { margin-top: 6px; }
@media (max-width: 1100px) { .gbox-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .gbox-grid { grid-template-columns: 1fr; } }
.req-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); }

/* Turnos alinhados em duas colunas fixas, manhã à esquerda e noite à direita */
.turnos { display: grid; grid-template-columns: repeat(2, 86px); gap: 6px; }
.turno { justify-content: center; padding: 6px 8px; font-size: 13px; }
.turno.t-manha { grid-column: 1; }
.turno.t-noite { grid-column: 2; }
.dia-nome { font-size: 14px; white-space: nowrap; }

/* Texto corrido justificado em todas as páginas, sem palavra sozinha na última linha */
.notice, .check span, .panel-head p, .alert > div, .modal-in p.d, .sheet-aviso, .done-note, .success p, .empty, footer.foot p {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
}
.success p, .empty, footer.foot p { text-align-last: center; }
.check span { font-size: 13.5px; line-height: 1.5; }
.dias.um-turno .turnos { grid-template-columns: 86px; }
.dias.um-turno .turno.t-manha, .dias.um-turno .turno.t-noite { grid-column: 1; }

/* Faixa do formulário com mais presença */
.hero {
  position: relative; overflow: hidden; padding: 46px 0 88px;
  background:
    radial-gradient(circle at 92% -10%, rgba(227, 195, 122, 0.22), transparent 45%),
    radial-gradient(circle at 4% 120%, rgba(62, 147, 208, 0.3), transparent 48%),
    linear-gradient(135deg, #0e2033, #172f4a);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-mark { width: 50px; height: 50px; border-radius: 15px; background: var(--gold-grad); display: grid; place-items: center; margin-bottom: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }
.hero-mark svg { width: 27px; height: 27px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero .kicker { font-size: 13px; letter-spacing: 0.18em; }
.hero h1 { font-size: clamp(27px, 6.6vw, 40px); margin-top: 10px; max-width: 19ch; }
.form-wrap { margin-top: -50px; }
.form-card .notice.info { font-size: 13px; line-height: 1.5; padding: 10px 14px 10px 26px; background: #f5f8fc; color: var(--muted); }
.form-card .notice.info strong { color: var(--navy); }
.form-card .sec-head h2 { font-size: 19px; }
@media (max-width: 600px) {
  .hero { padding: 32px 0 82px; }
  .hero-mark { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
  .form-wrap { margin-top: -48px; }
}

/* Degradê com o azul oficial da AMF (#172F4A) e tons dele, sem dourado nem azul claro de apoio */
.hero {
  padding-top: 40px;
  background:
    radial-gradient(circle at 6% 118%, rgba(47, 93, 138, 0.6), transparent 52%),
    radial-gradient(circle at 96% -12%, rgba(47, 93, 138, 0.4), transparent 46%),
    linear-gradient(135deg, #0e2033, #172f4a);
}
.page-hero::before {
  background:
    radial-gradient(circle at 94% -20%, rgba(47, 93, 138, 0.45), transparent 46%),
    radial-gradient(circle at 6% 120%, rgba(47, 93, 138, 0.5), transparent 46%);
}
@media (max-width: 600px) { .hero { padding-top: 30px; } }

/* Rodapé com a marca da AMF e o contato por WhatsApp, como no Guia Acadêmico */
footer.foot { padding: 30px 0 28px; }
footer.foot .f-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
footer.foot .f-brand img { height: 44px; width: auto; padding: 1px; }
footer.foot .f-brand b { color: #fff; font-family: var(--sans); font-size: 15px; }
.wa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: #1f7a43; text-decoration: none; }
.wa:hover { text-decoration: underline; }
.wa-ico { width: 16px; height: 16px; flex: none; color: #25d366; }
footer.foot .wa { margin-top: 10px; color: #25d366; font-size: 13px; }
footer.foot .wa .wa-ico { width: 15px; height: 15px; }

/* Rodapé com o mesmo azul e degradê da faixa do topo */
footer.foot {
  background:
    radial-gradient(circle at 6% 118%, rgba(47, 93, 138, 0.6), transparent 52%),
    radial-gradient(circle at 96% -12%, rgba(47, 93, 138, 0.4), transparent 46%),
    linear-gradient(135deg, #0e2033, #172f4a);
}

/* Detalhe do pedido, com o bloco do que vai para a empresa em destaque */
.gbox-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.gbox-envia { background: #fffaf0; border-color: #e3c37a; box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.06); }
.gbox-envia h4 { color: var(--gold); }
.gbox.sem-envio { background: #fbfcfe; border-color: var(--line); box-shadow: none; }
.gbox.sem-envio h4 { color: var(--muted); }
.legenda { display: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.dest .to.semdest { color: var(--muted); }
.page-hero { padding-top: 40px; }
@media (max-width: 1100px) { .gbox-grid { grid-template-columns: 1fr 1fr; } .gbox-envia { grid-column: 1 / -1; } }
@media (max-width: 760px) { .gbox-grid { grid-template-columns: 1fr; } }
.gbox-vinculo { background: #f5f9fd; border-color: #b9d3ea; }
.gbox-vinculo h4 { color: var(--azure-ink); }

/* Detalhe do pedido, títulos em azul oficial e dias compactos */
.gbox .dl dt { color: var(--navy); }
.dias-grupos { display: grid; gap: 6px; margin-top: 2px; }
.turno-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.turno-nome { min-width: 50px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--navy); }
.dchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid #e3c37a; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; }
.dchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.meta.dif { color: #8a5a17; font-size: 12px; margin-top: 3px; }
.input.edit { padding: 7px 9px; font-size: 14px; border-radius: 8px; }
.editado-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* Topo da página do setor, cartões pequenos no cabeçalho e uma barra só com abas, busca e empresa */
.page-hero { padding-bottom: 62px; }
.hero-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }
.hero-flex .panel-head { flex: 1 1 360px; }
.stats-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-mini { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18); animation: rise 0.5s ease both; }
.stat-mini .n { font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1; color: #e3c37a; font-variant-numeric: tabular-nums; }
.stat-mini.t-amber .n { color: #f6c98d; }
.stat-mini .l { font-size: 13px; color: #d4e3f1; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 10px 12px; margin-top: -30px; position: relative; z-index: 2; }
.tabs-seg { display: flex; gap: 4px; padding: 4px; background: var(--mist); border-radius: 999px; flex-wrap: wrap; }
.tabs-seg .tab { border: 0; background: transparent; box-shadow: none; padding: 8px 16px; font-size: 14px; }
.tabs-seg .tab:hover { background: #fff; }
.tabs-seg .tab[aria-selected="true"] { background: var(--gold-grad); color: #fff; box-shadow: 0 4px 12px rgba(168, 122, 28, 0.28); }
.barra-campos { display: flex; gap: 10px; flex: 1 1 380px; justify-content: flex-end; }
.barra-campos #busca { flex: 1 1 240px; max-width: 340px; }
.barra-campos #f-empresa { flex: 0 1 220px; }
.barra .input { padding: 9px 12px; font-size: 14px; }
.tbl { margin-top: 18px; }
@media (max-width: 760px) {
  .tabs-seg { width: 100%; }
  .tabs-seg .tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; }
  .barra-campos { flex-basis: 100%; }
}

/* Cartões pequenos do topo, azul oficial com borda dourada, número e texto centralizados */
.stats-mini { gap: 12px; align-items: stretch; }
.stat-mini {
  animation: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  width: 158px; min-height: 80px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(160deg, #21486f 0%, #172f4a 100%);
  border: 1.5px solid #c9963f;
  box-shadow: 0 8px 20px rgba(5, 14, 24, 0.35), inset 0 0 0 1px rgba(227, 195, 122, 0.22);
}
.stat-mini .n { font-size: 30px; line-height: 1; color: #f0cf84; }
.stat-mini.t-amber .n { color: #f0cf84; }
.stat-mini .l { font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.25; color: #e1ecf6; letter-spacing: 0.01em; }
@media (max-width: 480px) { .stat-mini { width: calc(50% - 6px); } .stats-mini { width: 100%; } }
.stat-mini { width: 196px; min-height: 84px; }
.stat-mini .l { white-space: nowrap; }
@media (max-width: 480px) { .stat-mini { width: calc(50% - 6px); } .stat-mini .l { white-space: normal; min-height: 2.5em; display: flex; align-items: center; } }
@media (max-width: 760px) {
  .tabs-seg { flex-wrap: nowrap; gap: 2px; }
  .tabs-seg .tab { padding: 8px 4px; font-size: 12.5px; gap: 5px; white-space: nowrap; }
  .tabs-seg .tab .count { padding: 0 6px; }
  .barra-campos { flex-direction: column; }
  .barra-campos #busca, .barra-campos #f-empresa { max-width: none; flex: 1 1 auto; width: 100%; }
}

/* Sem movimento ao passar o mouse nas linhas, só uma sombra mais marcada */
.row-wrap, .row-item { transition: box-shadow 0.15s, border-color 0.15s; }
.row-wrap:hover, .row-item:hover { transform: none; }
.row-wrap.open:hover { box-shadow: 0 1px 2px rgba(23, 47, 74, 0.05), 0 12px 30px rgba(23, 47, 74, 0.1); }

/* Borda dos cartões de número mais fina */
.stat-mini { border-width: 1px; box-shadow: 0 8px 20px rgba(5, 14, 24, 0.35), inset 0 0 0 1px rgba(227, 195, 122, 0.12); }

/* Símbolo do alerta centralizado na altura da caixa */
.alert { align-items: center; padding: 14px 16px; }
.alert svg { margin-top: 0; width: 22px; height: 22px; }
.alert > div { flex: 1; min-width: 0; }

/* Cartões de número com borda dourada fina e discreta, sem o fio interno */
.stat-mini { border: 1px solid rgba(201, 150, 63, 0.55); box-shadow: 0 8px 20px rgba(5, 14, 24, 0.35); }
.stat-mini { height: 70px; min-height: 70px; padding: 8px 12px; gap: 3px; }

/* Títulos das colunas fixos no topo ao rolar, em azul oficial e mais fortes, alinhados com a informação */
.tr.head {
  position: sticky; top: 0; z-index: 6; align-items: center;
  padding: 13px 20px 11px; background: #f3f7fb; border-bottom: 1px solid #d3deea;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--navy);
}
.tr.head > span { display: block; line-height: 1; }

/* Colunas de Cidade, Empresa e Checagem centralizadas, com os títulos no meio da informação */
@media (min-width: 961px) {
  .tr.head > span + span { text-align: center; }
  .tr .c-city, .tr .c-dest, .tr .c-chk { text-align: center; }
  .tr .c-chk .chip { max-width: 100%; }
}

/* Coluna do aluno também centralizada, como as outras */
@media (min-width: 961px) {
  .tr.head > span { text-align: center; }
  .tr .c-main { justify-content: center; text-align: center; }
  .tr .c-main .who { justify-items: center; text-align: center; }
}

/* Nomes de volta à esquerda, e o título Aluno posto sobre a faixa onde os nomes costumam ficar */
@media (min-width: 961px) {
  .tr .c-main { justify-content: flex-start; text-align: left; }
  .tr .c-main .who { justify-items: start; text-align: left; }
  .tr.head > span:first-child { text-align: left; padding-left: 62px; }
}

/* Título do grupo e contagem na mesma altura visual */
.grp { align-items: center; line-height: 1; gap: 10px; }
.grp span { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 24px; padding: 0 8px; line-height: 1; box-sizing: border-box; }

/* Tela da empresa no mesmo padrão da tela do setor */
.barra-fim { flex: 0 0 auto; }
.rows { margin-top: 18px; gap: 8px; }
.row-item.rich { border-left: 4px solid var(--line); padding: 14px 20px; }
.row-item.rich.pend { border-left-color: #c9963f; }
.row-item.rich.ok { border-left-color: var(--green); }
.row-item.rich .r-dl { grid-template-columns: 1fr 1fr 1.4fr 1.7fr; gap: 10px 18px; }
.row-item.rich .r-dl dt { color: var(--navy); }
.row-item.rich .r-dl dd { font-size: 14.5px; }
@media (max-width: 860px) { .row-item.rich .r-dl { grid-template-columns: 1fr 1fr; } }

/* Faixa dos títulos com a largura inteira da tela e a linha de ponta a ponta, sem corte nas laterais */
body { overflow-x: clip; }
.tr.head { background: transparent; border-bottom: 0; isolation: isolate; }
.tr.head::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: #f3f7fb; border-bottom: 1px solid #cfdbe8; box-shadow: 0 8px 12px -10px rgba(23, 47, 74, 0.35);
}

/* Faixa dos títulos, só aparece quando a lista rola para baixo do topo da tela */
.cab-fixo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: #f3f7fb; border-bottom: 1px solid #cfdbe8;
  box-shadow: 0 8px 12px -10px rgba(23, 47, 74, 0.35);
  transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.18s ease, opacity 0.18s ease;
}
.cab-fixo.on { transform: none; opacity: 1; }
.cab-fixo .tr.head { position: static; background: transparent; padding: 13px 20px 11px; border-bottom: 0; }
.cab-fixo .tr.head::before { display: none; }
@media (max-width: 960px) { .cab-fixo { display: none; } }
@media (prefers-reduced-motion: reduce) { .cab-fixo { transition: none; } }

/* Títulos sempre visíveis, e a faixa de fundo com a linha só aparece quando a barra prende no topo */
.cab-fixo { display: none !important; }
.tr.head::before { opacity: 0; transition: opacity 0.15s ease; }
.tr.head.preso::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tr.head::before { transition: none; } }

/* Botões de copiar e exportar na tela da empresa */
.barra-fim { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row-item.rich .end { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.copia-oculta { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* Três opções de pedido */
.choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .choices { grid-template-columns: 1fr; } }

/* Quarta aba, isento de pagamento e chip de alteração */
.chip.c-alterar { background: #fdf3dc; color: #8a5a17; }
.isento { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.isento input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; margin: 0; }
.isento span { display: grid; gap: 1px; }
.isento strong { font-family: var(--sans); font-size: 14px; color: var(--navy); }
.isento small { font-size: 12.5px; color: var(--muted); }
.isento:has(input:checked) { border-color: #e3c37a; background: #fffaf0; }
.tabs-seg .tab { padding: 8px 14px; }

/* Tela da empresa, simples e didática para o motorista, letras e botões grandes */
.moto .tabs-seg { flex-wrap: wrap; }
.tabs-moto .tab { font-size: 16px; padding: 11px 18px; }
.moto .barra-campos #busca { max-width: 260px; flex: 1 1 200px; }
.moto-dica { margin: 18px 4px 0; font-size: 16px; color: var(--navy); font-weight: 500; text-align: left; }
.moto .grp { font-size: 14px; margin-top: 16px; }
.grp-leve { color: var(--muted); }
.tudo-certo { padding: 18px 20px; background: #fff; border: 1px dashed #b9d8c3; border-radius: 12px; color: #1d5e37; font-size: 16px; }
.moto-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid #c9963f; border-radius: 14px; box-shadow: var(--shadow); padding: 18px 22px; }
.moto-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.moto-top h3 { font-size: 22px; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.moto-top .chip { margin-top: 8px; font-size: 13px; padding: 5px 12px; }
.btn-ciente { font-size: 18px; padding: 14px 34px; border-radius: 12px; min-width: 150px; }
.moto-info { display: grid; gap: 14px; margin-top: 16px; }
.bloco { font-size: 18px; line-height: 1.4; color: var(--ink); }
.rot { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.moto .dchip { font-size: 15px; padding: 4px 13px; }
.moto .turno-nome { font-size: 14px; min-width: 56px; }
.compara { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.compara .seta { font-size: 26px; color: var(--gold); line-height: 1; }
.dias-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.dchip.saiu { text-decoration: line-through; color: #a14a35; border-color: #efc7bd; background: #fff7f5; }
.dchip.entrou { background: #fffaf0; border-color: var(--gold); font-weight: 700; }
.nenhum { color: var(--muted); font-size: 15px; }
.mais { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.mais summary { cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--azure-ink); }
.mais .dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.chip.c-isento { background: #fdf3dc; color: #8a5a17; border: 1px solid #e3c37a; font-size: 12px; padding: 3px 10px; }
.chip.c-novo { background: var(--green-100); color: var(--green-ink); }
.chip.c-saiu { background: var(--red-100); color: var(--red-ink); }
.visto { display: flex; align-items: center; gap: 12px; padding: 11px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.visto .data { margin-left: auto; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Lista completa, parecida com uma lista de presença */
.lista-compl { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.lc { display: grid; grid-template-columns: minmax(180px, 2.2fr) minmax(200px, 2.4fr) repeat(6, 54px); gap: 8px; align-items: center; padding: 11px 18px; border-top: 1px solid #edf2f7; font-size: 15.5px; }
.lc.head { border-top: 0; background: #f3f7fb; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); position: sticky; top: 0; z-index: 3; }
.lc.head span:nth-child(n+3) { text-align: center; }
.lc .nome { font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc .pt { color: var(--ink); font-size: 14.5px; }
.cel { height: 30px; border-radius: 8px; background: #f6f8fb; display: grid; place-items: center; font-family: var(--sans); font-weight: 700; font-size: 13px; }
.cel.on { background: linear-gradient(135deg, #d1a12f, #a87a1c); color: #fff; }
.lc:nth-child(even):not(.head) { background: #fbfcfe; }
.legenda-dias { margin: 10px 4px 40px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .lc { grid-template-columns: 1fr repeat(6, 38px); }
  .lc .pt { grid-column: 1 / -1; order: 3; font-size: 13.5px; color: var(--muted); }
  .lc.head span:nth-child(2) { display: none; }
  .mais .dl { grid-template-columns: 1fr 1fr; }
  .btn-ciente { width: 100%; }
}
@media (min-width: 901px) {
  .moto .barra { flex-wrap: nowrap; }
  .moto .barra-fim { flex-wrap: nowrap; align-items: center; flex: 1 1 auto; }
  .moto .barra-campos #busca { flex: 0 1 200px; max-width: 200px; }
  .moto .barra-fim .btn { white-space: nowrap; }
}

/* Aba Ativos, edição da situação de cada aluno */
.ativo-aviso { margin: 14px 0 0; padding: 10px 14px; background: var(--azure-100); border-radius: 10px; color: var(--navy); font-size: 14px; }
.ativo-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 12px; margin-top: 12px; }
.ativo-edit .dias { margin-top: 4px; }
.ativo-edit .dias .dia-row { padding: 5px 8px 5px 12px; }
.ativo-edit .isento { margin-top: 8px; }
@media (max-width: 1100px) { .ativo-grid { grid-template-columns: 1fr 1fr; } .ativo-grid .gbox-envia { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ativo-grid { grid-template-columns: 1fr; } }
.chip.c-isento { background: #fdf3dc; color: #8a5a17; border: 1px solid #e3c37a; font-size: 12px; padding: 3px 10px; }

/* Lista completa com linha que abre, e destaques da tela do motorista */
.lc-abre { cursor: pointer; transition: background 0.15s; }
.lc-abre:hover, .lc-abre:focus-visible { background: #f3f7fb; outline: none; }
.lc-abre.aberta { background: #fffaf0; }
.lc-det { padding: 4px 18px 16px; background: #fffaf0; border-top: 1px dashed #e3c37a; }
.lc-det .dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.lc-det .dl dt { color: var(--navy); }
.destaque-isento { display: inline-block; padding: 3px 12px; border: 1px solid #e3c37a; border-radius: 999px; background: #fdf3dc; color: #8a5a17; font-size: 16px; }
.seta-peq { color: var(--gold); font-weight: 700; margin: 0 4px; }
.moto .chip.c-isento { font-size: 13px; padding: 4px 12px; font-weight: 700; }
@media (max-width: 900px) { .lc-det .dl { grid-template-columns: 1fr 1fr; } }

/* Quatro opções compactas, só com o título */
.choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 54px; }
.choice strong { display: block; font-size: 15.5px; line-height: 1.25; }
.choice .ic { width: 26px; height: 26px; }
@media (max-width: 600px) { .choices { grid-template-columns: 1fr; gap: 8px; } .choice { padding: 11px 14px; min-height: 48px; } }

/* Modo comprovante, só mostra CPF, RA, nascimento e o arquivo */
.so-comp { display: none; }
.modo-comprovante .so-comp { display: grid; }
.modo-comprovante .so-pedido { display: none !important; }
.anexo { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #cbaf74; border-radius: 12px; background: #fffaf0; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.anexo:hover, .anexo:focus-within { border-color: var(--gold); background: #fff6e2; }
.anexo.tem { border-style: solid; border-color: var(--gold); }
.anexo.err { border-color: #d98873; background: #fffafa; }
.anexo-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--gold-grad); display: grid; place-items: center; flex: none; }
.anexo-ic svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anexo-txt { display: grid; gap: 2px; min-width: 0; }
.anexo-txt strong { font-family: var(--sans); font-size: 15px; color: var(--navy); overflow-wrap: anywhere; }
.anexo-txt small { font-size: 12.5px; color: var(--muted); }
#input-arquivo-oculto { display: none; }

/* Janela de visualização do comprovante */
dialog.modal-prev { width: min(760px, calc(100% - 24px)); max-height: 92vh; }
.prev-in { display: grid; gap: 12px; padding: 18px 20px 16px; max-height: 92vh; grid-template-rows: auto 1fr auto; }
.prev-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.prev-top h3 { font-size: 19px; }
.prev-top .d { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.prev-corpo { min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #f5f8fc; display: grid; place-items: center; }
.prev-corpo img { max-width: 100%; max-height: 66vh; display: block; }
.prev-corpo iframe { width: 100%; height: 66vh; border: 0; }
.prev-rodape { display: flex; justify-content: flex-end; }

/* Aba Comprovantes do setor */
.comp-nota { margin: 18px 4px 0; padding: 12px 16px; background: var(--azure-100); border-radius: 12px; color: var(--navy); font-size: 14.5px; }
.comp-assoc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 20px 16px; }
.comp-assoc select { flex: 1 1 280px; max-width: 420px; }
.tabs-seg .tab { padding: 8px 12px; font-size: 13.5px; }

/* Comprovantes dentro do perfil do aluno, na tela da empresa */
.chip.c-comp { background: var(--azure-100); color: var(--azure-ink); font-size: 12px; padding: 3px 10px; }
.moto .chip.c-novo { font-size: 12px; padding: 3px 10px; font-weight: 700; }
.sub-tabs { display: flex; gap: 6px; margin: 12px 0 4px; }
.sub-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--navy); }
.sub-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sub-tab .count { background: var(--azure-100); color: var(--azure-ink); border-radius: 999px; font-size: 12px; padding: 0 7px; margin-left: 4px; }
.sem-comp { margin: 12px 0 4px; color: var(--muted); font-size: 15px; }
.comp-mes { margin-top: 14px; }
.comp-mes h4 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comp-mes h4 span { background: #fff; border: 1px solid #e3c37a; border-radius: 999px; font-size: 12px; padding: 0 8px; letter-spacing: 0; color: #8a5a17; }
.comp-item { display: flex; align-items: center; gap: 14px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.comp-item.novo { border-color: #e3c37a; background: #fffdf7; }
.comp-item .mini { width: 46px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #f5f8fc; display: grid; place-items: center; flex: none; }
.comp-item .mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pdf-ic { font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--red-ink); }
.comp-txt { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15.5px; color: var(--navy); }

/* Ajustes de espaço, seis abas do setor na mesma linha e quatro cartões da empresa ao lado do título */
.tabs-seg { gap: 2px; }
.tabs-seg .tab { padding: 8px 11px; font-size: 13px; gap: 6px; }
.tabs-seg .tab .count { padding: 0 6px; font-size: 11.5px; }
.barra-campos #busca { flex: 1 1 150px; max-width: 210px; }
.barra-campos #f-empresa { flex: 0 1 170px; }
.moto .stat-mini { width: 166px; }
.moto .hero-flex .panel-head { flex: 1 1 320px; }
.moto .tabs-seg .tab { font-size: 16px; padding: 11px 16px; }
.chip.c-comp svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: 3px; vertical-align: -1px; }
.lc .nome { flex-wrap: nowrap; }
.lc .nome .chip { flex: none; }

/* Tela do motorista no celular, tudo em uma coluna, lista completa em cartões com os dias em linha */
@media (max-width: 760px) {
  .moto .hero-flex { gap: 16px; }
  .moto .stats-mini { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .moto .stat-mini { width: auto; height: 64px; min-height: 64px; }
  .moto .stat-mini .n { font-size: 24px; }
  .moto .barra { flex-direction: column; align-items: stretch; padding: 10px; margin-top: -26px; }
  .moto .tabs-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 18px; gap: 4px; }
  .moto .tabs-seg .tab { justify-content: center; font-size: 15px; padding: 10px 6px; white-space: nowrap; }
  .moto .barra-fim { width: 100%; flex: none; flex-wrap: wrap; gap: 8px; }
  .moto .barra-fim #busca { flex: 1 1 100%; max-width: none; width: 100%; height: 46px; }
  .moto .barra-fim .btn { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 44px; }
  .moto-dica { font-size: 15px; margin-top: 14px; }
  .moto-card { padding: 16px 16px; border-radius: 12px; }
  .moto-top h3 { font-size: 20px; }
  .btn-ciente { width: 100%; min-width: 0; font-size: 17px; padding: 14px; }
  .bloco { font-size: 16.5px; }
  .compara { gap: 10px; }
  .compara .seta { transform: rotate(90deg); width: 100%; text-align: left; margin-left: 4px; }
  .visto { flex-wrap: wrap; gap: 8px 10px; padding: 11px 14px; }
  .visto .data { margin-left: 0; }
  .mais .dl, .lc-det .dl { grid-template-columns: 1fr; }
  .moto .lc.head { display: none; }
  .moto .lc { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 14px 14px 12px; }
  .moto .lc .nome { grid-column: 1 / -1; flex-wrap: wrap; font-size: 17px; }
  .moto .lc .pt { grid-column: 1 / -1; order: 0; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
  .moto .cel { height: 46px; position: relative; padding-top: 15px; }
  .moto .cel::before { content: attr(data-dia); position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .moto .cel.on::before { color: rgba(255, 255, 255, 0.9); }
  .moto .lista-compl { border-radius: 12px; }
  .lc-det { padding: 4px 14px 14px; }
  .sub-tabs { width: 100%; }
  .sub-tab { flex: 1; text-align: center; }
  .comp-item { gap: 10px; flex-wrap: wrap; }
  .comp-item .btn { width: 100%; }
  .legenda-dias { margin-bottom: 30px; }
}
@media (max-width: 760px) {
  .moto .page-hero .kicker { font-size: 11px; letter-spacing: 0.1em; }
}

/* Isenção, selo pequeno ao lado do botão de confirmar */
.isento-mini { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.isento-mini:hover { border-color: #cbaf74; }
.isento-mini input { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; flex: none; }
.isento-mini:has(input:checked) { border-color: var(--gold); background: #fffaf0; color: #8a5a17; }
.isento-mini:has(input:focus-visible) { outline: 3px solid rgba(168, 122, 28, 0.35); outline-offset: 2px; }
.dest .actions { align-items: center; }
.isento-mini { height: 39px; box-sizing: border-box; }

/* Aluno aberto vira um cartão à parte, com a linha dourada mais para a esquerda e o conteúdo recuado */
.lista-compl { overflow: visible; padding: 0 0 4px; }
.lista-compl .lc.head { border-radius: 14px 14px 0 0; }
.lc-grupo { position: relative; }
.lc-grupo:nth-child(even) .lc { background: #fbfcfe; }
.lc-grupo.aberta { margin: 10px 8px; border: 1px solid #e3c37a; border-left: 5px solid var(--gold); border-radius: 14px; background: #fffaf0; box-shadow: 0 8px 22px rgba(23, 47, 74, 0.12); overflow: hidden; }
.lc-grupo.aberta .lc { background: #fffaf0; border-top: 0; padding-left: 14px; }
.lc-grupo.aberta .lc .nome { font-size: 17px; }
.lc-grupo.aberta .lc-det { margin: 0 14px 14px 30px; padding: 4px 0 0 18px; border-top: 0; border-left: 2px solid #e3c37a; background: transparent; }
.lc-grupo .lc:not(.head) { border-top: 1px solid #edf2f7; }
.legenda-dias { display: flex; gap: 22px; align-items: center; margin: 12px 6px 36px; font-size: 14px; color: var(--navy); font-weight: 600; }
.leg { display: inline-flex; align-items: center; gap: 8px; }
.cel.mini { width: 30px; height: 26px; font-size: 12px; padding: 0; }
@media (max-width: 760px) {
  .lc-grupo.aberta { margin: 8px 0; }
  .lc-grupo.aberta .lc-det { margin: 0 12px 12px 16px; padding-left: 12px; }
  .moto .cel.mini { padding-top: 0; height: 26px; }
  .moto .cel.mini::before { content: none; }
}
.lc-grupo.aberta { margin: 10px 0 10px 8px; border-right: 0; border-radius: 14px 0 0 14px; }
.lc-grupo.aberta .lc { padding-left: 13px; }
.lc-grupo.aberta .lc .nome { font-size: inherit; }
.lc-grupo.aberta .lc .nome > :first-child { font-weight: 700; }
@media (max-width: 760px) { .lc-grupo.aberta { margin: 8px 0; border-right: 1px solid #e3c37a; border-radius: 14px; } }

/* Legenda dos turnos ao lado da frase da lista, sempre visível */
.dica-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 18px 4px 10px; }
.dica-linha .moto-dica { margin: 0; }
.filtros-bloco .legenda-dias { margin: 0; }

/* Aluno aberto, faixa azul forte com o nome em cima e o conteúdo branco embaixo, bem separados */
.lc-grupo.aberta { margin: 16px 0; border: 0; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 2px var(--navy), 0 12px 26px rgba(23, 47, 74, 0.22); }
.lc-grupo.aberta .lc { background: var(--navy); border-top: 0; padding-left: 18px; color: #fff; }
.lc-grupo.aberta .lc:hover, .lc-grupo.aberta .lc:focus-visible { background: #1d3b5c; }
.lc-grupo.aberta .lc .nome { color: #fff; font-size: inherit; }
.lc-grupo.aberta .lc .pt { color: #d4e3f1; }
.lc-grupo.aberta .lc .cel:not(.on) { background: rgba(255, 255, 255, 0.14); }
.lc-grupo.aberta .lc-det { margin: 0; padding: 16px 20px 20px; border: 0; background: #fff; }
.lc-grupo.aberta .lc-det .sub-tabs { margin-top: 0; }
@media (max-width: 760px) {
  .lc-grupo.aberta { margin: 14px 0; }
  .lc-grupo.aberta .lc { padding-left: 14px; }
  .lc-grupo.aberta .lc-det { padding: 14px 14px 16px; }
  .dica-linha { align-items: flex-start; }
}
.sub-tab { white-space: nowrap; }
@media (max-width: 760px) { .sub-tab { padding: 8px 10px; font-size: 13.5px; } }

/* Pagamentos, conferência em chips, idade do pedido e colunas ordenáveis */
.pag-resumo { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 20px 4px 4px; }
.pag-resumo strong { font-family: var(--sans); font-size: 18px; color: var(--navy); margin-right: 6px; }
.pag-resumo .chip { font-size: 13px; padding: 4px 12px; }
.tudo-certo.vazio { border-color: var(--line); color: var(--muted); background: #fff; }
.grp-alerta { color: #b4472f; }
.col-pag { display: grid; gap: 2px; justify-items: center; }
.tr.head.estatico { position: static; margin-top: 4px; }
.tr.head.estatico::before { display: none; }
.confere { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.confere-t { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-right: 2px; }
.conf { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 5px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #e8f5ec; color: #1f7a43; }
.conf i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 11px; line-height: 1; }
.conf em { font-style: normal; font-weight: 500; opacity: 0.95; }
.conf.dif { background: #fbf1e3; color: #8a5a17; }
.conf.info { background: var(--azure-100); color: var(--azure-ink); }
.idade { font-weight: 600; color: var(--muted); }
.idade.media { color: #8a5a17; }
.idade.alta { color: #b4472f; }
.tr.head .ord { cursor: pointer; user-select: none; transition: color 0.15s; }
.tr.head .ord:hover { color: var(--gold); }
.tr.head .ord.on { color: var(--gold); }
.tr.head .ord.on::after { content: " ▲"; font-size: 9px; }
.tr.head .ord.on.desc::after { content: " ▼"; }
.barra-campos #f-alerta { flex: 0 1 150px; }
.barra-campos #busca { flex: 1 1 120px; max-width: 190px; }
.barra-campos { gap: 8px; }
.barra-campos .input { font-size: 13px; padding: 9px 8px; }
.barra-campos #busca { flex: 1 1 120px; max-width: 150px; padding-left: 10px; }
.barra-campos #f-alerta { flex: 0 0 104px; }
.barra-campos #f-empresa { flex: 0 1 158px; }

/* Barra de desfazer, 10 segundos com um fio que vai diminuindo */
.desfazer { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 12px 14px 14px 20px; border-radius: 12px; background: var(--navy-900); color: #fff; font-family: var(--sans); font-size: 14px; box-shadow: 0 14px 34px rgba(14, 32, 51, 0.4); overflow: hidden; transition: opacity 0.2s, transform 0.2s; max-width: calc(100% - 24px); }
.desfazer.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.d-btn { border: 1px solid #e3c37a; background: transparent; color: #f0cf84; font: inherit; font-weight: 700; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.d-btn:hover { background: rgba(227, 195, 122, 0.16); }
.d-btn:focus-visible { outline: 3px solid rgba(227, 195, 122, 0.5); outline-offset: 2px; }
.d-fio { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #e3c37a, #c9963f); transform-origin: left; }
.desfazer.on .d-fio { animation: fio 10s linear forwards; }
@keyframes fio { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .desfazer.on .d-fio { animation: none; } }

/* Tela do motorista, duas abas, contato, quem vai hoje e pagamento na linha do aluno */
.moto .hero-flex { align-items: flex-start; }
.fone { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 12px; }
.fone-n { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; margin-right: 4px; }
.fone .btn { height: 42px; padding: 0 16px; font-size: 15px; }
.btn-wa { background: #1f7a43; color: #fff; }
.btn-wa:hover { background: #17612f; transform: translateY(-1px); }
.btn-wa svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.fone svg { width: 17px; height: 17px; }
.moto-info .fone { margin-top: 2px; }
.frase-mud { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--navy); }
.chip.c-comp-novo { background: var(--azure-100); color: var(--azure-ink); font-size: 13px; padding: 5px 12px; }
.moto-card.ev-pagou { border-left-color: #3e93d0; }
.moto-card.ev-saiu { border-left-color: #d9694c; }
.moto-card.ev-entrou { border-left-color: var(--green); }
.moto-card .comp-item { padding: 10px 12px; }
.moto-card .comp-txt { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 17px; }
.moto-card .comp-txt small { font-size: 13px; color: var(--muted); font-weight: 500; }
.moto-card .comp-item .btn { min-height: 46px; font-size: 15px; }
.visto .chip { font-size: 12px; padding: 3px 10px; }

.hoje-barra { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.hoje-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 20px; border: 2px solid var(--navy); border-radius: 14px; background: #fff; color: var(--navy); cursor: pointer; font-family: var(--sans); }
.hoje-btn:hover { border-color: var(--gold); }
.hoje-btn:focus-visible { outline: 3px solid rgba(168, 122, 28, 0.4); outline-offset: 2px; }
.hoje-t { font-weight: 700; font-size: 17px; }
.hoje-s { font-size: 14px; color: var(--muted); }
.hoje-s::first-letter { text-transform: uppercase; }
.hoje-n { min-width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 16px; }
.hoje-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.hoje-btn.on .hoje-s { color: #d4e3f1; }
.hoje-btn.on .hoje-n { background: var(--gold-grad); }
.hoje-nota { font-size: 14.5px; color: var(--muted); }
.lc.head span.hoje { color: var(--gold); }
.lc.head span.hoje::after { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--gold-grad); margin: 5px auto 0; width: 22px; }
.cel.hoje { box-shadow: 0 0 0 2px #e3c37a; }
.lc .nome.duas { flex-direction: column; align-items: flex-start; gap: 3px; }
.lc .nome.duas .n1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pag { font-family: var(--sans); font-size: 13px; font-weight: 600; }
.pag.ok { color: #1f7a43; }
.pag.falta { color: #b4472f; }
.lc-grupo.aberta .pag.ok { color: #9be0b5; }
.lc-grupo.aberta .pag.falta { color: #f4a58a; }
@media (max-width: 760px) {
  .fone .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .fone-n { flex: 1 1 100%; }
  .hoje-btn { width: 100%; justify-content: space-between; }
  .moto-card .comp-item .btn { width: 100%; }
}
@media (max-width: 760px) {
  .compara .seta { transform: none; width: 100%; font-size: 0; line-height: 1; margin: 0 0 0 6px; text-align: left; }
  .compara .seta::before { content: "↓"; font-size: 24px; color: var(--gold); }
}

/* Quem vai hoje, lista compacta por turno, sem a grade de dias */
.lc.lc-hoje { grid-template-columns: minmax(220px, 1.5fr) minmax(240px, 2fr); padding-top: 9px; padding-bottom: 9px; }
.lc.head.lc-hoje { padding-top: 13px; padding-bottom: 11px; }
.turno-titulo { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px 8px; border-top: 1px solid var(--line); background: #f3f7fb; font-family: var(--sans); }
.turno-titulo strong { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); }
.turno-titulo span { font-size: 13px; color: var(--muted); }
.turno-titulo.manha strong { color: #8a5a17; }
.lista-hoje .lc .pt { color: var(--ink); font-size: 15px; }
.lista-hoje .lc .nome .n1 { font-size: 16px; }
@media (max-width: 760px) {
  .moto .lc.lc-hoje { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; }
  .moto .lc.lc-hoje .nome, .moto .lc.lc-hoje .pt { grid-column: 1 / -1; }
  .moto .lc.lc-hoje .pt { margin-bottom: 0; }
  .moto .lc.head.lc-hoje { display: none; }
  .turno-titulo { padding: 10px 14px 8px; }
}

/* Alunos ativos agrupados por empresa */
.grp-emp { color: var(--navy); font-size: 14px; margin-top: 22px; }
.grp-emp .dot-e { margin-right: 0; }

/* Seletor com o visual do sistema, no lugar do seletor do navegador */
.sel-wrap { position: relative; width: 100%; min-width: 0; }
.sel-wrap.hide { display: none; }
.sel-nativo { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; padding: 11px 13px; background: var(--paper); border: 1px solid #c9d6e3; border-radius: 9px; font-size: 15px; color: var(--ink); min-height: 46px; transition: border-color 0.15s, box-shadow 0.15s; }
.sel-btn:hover { border-color: #cbaf74; }
.sel-btn:focus-visible, .sel-wrap.aberto .sel-btn { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.2); }
.sel-btn.vazio .sel-txt { color: #8a94a1; }
.sel-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sel-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sel-btn svg { width: 18px; height: 18px; flex: none; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.sel-wrap.aberto .sel-btn svg { transform: rotate(180deg); stroke: var(--gold); }
.sel-wrap.pequeno .sel-btn { min-height: 38px; padding: 7px 10px; font-size: 14px; border-radius: 8px; }
.sel-lista { position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 6px); max-height: 288px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #dbe4ee; border-radius: 12px; box-shadow: 0 14px 34px rgba(23, 47, 74, 0.2); min-width: 190px; animation: selIn 0.14s ease; overscroll-behavior: contain; }
.sel-wrap.acima .sel-lista { top: auto; bottom: calc(100% + 6px); }
@keyframes selIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sel-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.sel-item:hover, .sel-item.foco { background: var(--mist); }
.sel-item.on { background: #fffaf0; color: #8a5a17; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.sel-item.vazio { color: var(--muted); }
.sel-grupo { padding: 10px 12px 4px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.barra-campos .sel-wrap { flex: 0 1 190px; }
.barra-campos .sel-wrap:has(#f-alerta) { flex: 0 0 130px; }
.barra-campos .sel-btn { min-height: 40px; padding: 8px 10px; font-size: 13.5px; }
.comp-assoc .sel-wrap { flex: 1 1 280px; max-width: 420px; }
@media (prefers-reduced-motion: reduce) { .sel-lista { animation: none; } }
@media (max-width: 760px) { .barra-campos .sel-wrap { flex: 1 1 100%; } }

/* No modo comprovante, o nome ocupa a linha inteira */
.modo-comprovante .fields > .field:has(#nome) { grid-column: 1 / -1; }

/* WhatsApp no visual do Guia Acadêmico, e contato nas listas */
.wa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 13px; color: #1f7a43; text-decoration: none; }
.wa:hover { text-decoration: underline; }
.wa-ico { width: 16px; height: 16px; flex: none; color: #25d366; }
.c-fone { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.c-fone .wa-ico { width: 18px; height: 18px; }
.sug { font-size: 12.5px; color: #8a5a17; background: #fdf3dc; border-radius: 999px; padding: 3px 10px; font-weight: 600; }

/* Cartão de novidade compacto */
.moto-card.compacto { padding: 12px 14px 10px; border-radius: 12px; margin-bottom: 8px; }
.compacto .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.compacto .mc-top h3 { font-size: 18px; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compacto .mc-top .chip { margin: 0; font-size: 12.5px; padding: 4px 11px; }
.compacto .mc-corpo { display: grid; gap: 5px; margin-top: 8px; }
.mc-linha { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; font-size: 15.5px; line-height: 1.35; }
.mc-rot { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.mc-val { min-width: 0; overflow-wrap: anywhere; }
.compacto .dias-grupos { gap: 4px; }
.compacto .dchip { font-size: 13px; padding: 2px 10px; }
.compacto .turno-nome { font-size: 12.5px; min-width: 48px; }
.compacto .frase-mud { font-size: 16px; }
.compacto .compara { gap: 8px 12px; }
.compacto .compara .rot { margin-bottom: 2px; font-size: 10.5px; }
.compacto .bloco { font-size: 15px; }
.compacto .mc-pe { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.compacto .mc-pe .wa { font-size: 14.5px; min-height: 36px; }
.compacto .mc-pe .wa-ico { width: 20px; height: 20px; }
.compacto .mais { margin: 0; border: 0; padding: 0; }
.compacto .mais[open] { flex: 1 0 100%; order: 3; padding-top: 4px; }
.compacto .mais summary { font-size: 13.5px; }
.compacto .comp-item { margin: 0; }
.compacto .comp-item .btn { min-height: 40px; padding: 0 18px; }

/* Filtro das novidades */
.filtro-ev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.filtro-t { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.fev { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--navy); }
.fev b { font-weight: 700; min-width: 22px; height: 22px; border-radius: 999px; background: var(--azure-100); color: var(--azure-ink); display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
.fev:hover { border-color: #cbaf74; }
.fev.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.fev.on b { background: var(--gold-grad); color: #fff; }
.fev.zero:not(.on) { opacity: 0.55; }
.fev:focus-visible { outline: 3px solid rgba(168, 122, 28, 0.4); outline-offset: 2px; }

/* Legenda Noite e Manhã, símbolo e texto na mesma linha de centro */
.legenda-dias { line-height: 1; }
.leg { display: inline-flex; align-items: center; gap: 8px; line-height: 1; height: 26px; }
.leg .cel.mini { display: inline-grid; place-items: center; margin: 0; flex: none; }

@media (max-width: 760px) {
  .moto-card.compacto { padding: 11px 12px 8px; }
  .compacto .mc-top h3 { font-size: 17px; }
  .mc-linha { grid-template-columns: 62px 1fr; font-size: 15px; }
  .filtro-ev { gap: 6px; }
  .filtro-t { flex: 1 0 100%; }
  .fev { min-height: 40px; padding: 0 12px; font-size: 14px; }
}

/* Ajustes finais, bolinha da empresa nos grupos, largura dos filtros e seta do antes e agora no celular */
.grp .dot-e { background: var(--c, var(--muted)); padding: 0; min-width: 0; width: 10px; height: 10px; border-radius: 50%; margin: 0 8px 0 0; display: inline-block; }
.barra-campos #busca { flex: 1 1 100px; max-width: 120px; }
.barra-campos .sel-wrap { flex: 1 1 170px; min-width: 150px; max-width: 190px; }
.barra-campos .sel-wrap:has(#f-alerta) { flex: 0 0 140px; min-width: 140px; }
@media (max-width: 760px) {
  .barra-campos .sel-wrap, .barra-campos .sel-wrap:has(#f-alerta) { flex: 1 1 100%; max-width: none; }
  .compacto .compara .seta { width: auto; font-size: 20px; margin: 0; align-self: center; }
  .compacto .compara .seta::before { content: none; }
}

/* Alerta e conferência numa caixa só, compacta */
.alert.alerta-c { margin-top: 10px; padding: 9px 14px; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.alert.alerta-c svg { width: 18px; height: 18px; margin-top: 2px; }
.alert.alerta-c .alerta-l { margin: 0; line-height: 1.4; }
.alert.alerta-c .alerta-l strong { display: inline; font-size: 13.5px; margin-right: 4px; }
.alert.alerta-c .confere { margin-top: 7px; gap: 5px 6px; }
.alert.alerta-c .confere-t { font-size: 10.5px; opacity: 0.8; }
.alert.alerta-c .conf { background: rgba(255, 255, 255, 0.75); }
.alert.alerta-c .conf.dif { background: #fff; color: #8a5a17; box-shadow: inset 0 0 0 1px #e3c37a; }
.alert.alerta-c .conf.info { background: rgba(255, 255, 255, 0.75); }
.alert.alerta-c + .gbox-grid { margin-top: 10px; }

/* Contato com o símbolo do WhatsApp alinhado ao número */
.c-fone { align-items: center; gap: 6px; flex-wrap: nowrap; line-height: 1; }
.c-fone .fone-n2 { line-height: 20px; }
.c-fone .wa { margin: 0; height: 20px; align-items: center; }
.c-fone .wa-ico { width: 18px; height: 18px; display: block; }

/* Detalhe colorido à esquerda com a cor da empresa */
.row-wrap.emp { border-left-color: var(--c, var(--line)); }

/* Histórico em colunas organizadas */
.tr.hist { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.5fr); }
.tr.hist .c-ped { text-align: center; }
.tr.hist .c-chk { text-align: center; }
.barra-campos #busca { flex: 1 1 90px; max-width: 100px; }
.barra-campos .sel-wrap { flex: 1 1 190px; min-width: 175px; max-width: 215px; }
.barra-campos .sel-wrap:has(#f-alerta) { flex: 0 0 128px; min-width: 128px; }

/* Antes e agora alinhados com as demais informações, seta evidente no meio */
.compara-v { display: grid; gap: 4px; }
.compara-v .mc-linha { align-items: center; }
.compara-v .dias-linha { gap: 6px; }
.compara-v .seta-l { min-height: 26px; }
.seta-v { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: var(--gold-grad); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 800; line-height: 1; box-shadow: 0 3px 8px rgba(168, 122, 28, 0.35); }

/* Seta do antes e agora, só a seta dourada, centralizada nas informações */
.compara-v { max-width: 460px; }
.compara-v .seta-l { display: block; min-height: 0; text-align: center; }
.compara-v .seta-l > span:last-child { display: none; }
.seta-v { display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--gold); font-size: 26px; font-weight: 800; line-height: 1; }

/* Resumo de pagamentos do motorista */
.pg-tabela { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 40px; }
.pg-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid #edf2f7; }
.pg-linha:nth-child(even):not(.pg-head) { background: #fbfcfe; }
.pg-head { border-top: 0; background: #f3f7fb; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); padding-top: 13px; padding-bottom: 11px; position: sticky; top: 0; z-index: 3; }
.pg-head span:nth-child(n+2) { text-align: center; }
.pg-head em { font-style: normal; font-weight: 600; color: var(--gold); letter-spacing: 0.04em; margin-left: 4px; }
.pg-nome strong { font-family: var(--sans); font-size: 16px; color: var(--navy); }
.pg-cel { display: flex; justify-content: center; }
.pg { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 999px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; border: 0; line-height: 1.15; text-align: left; }
.pg i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; font-weight: 800; flex: none; }
.pg small { display: block; font-size: 11.5px; font-weight: 500; opacity: 0.9; }
.pg.ok { background: var(--green-100); color: #1f7a43; cursor: pointer; }
.pg.ok:hover { background: #d8eedf; }
.pg.ok:focus-visible { outline: 3px solid rgba(63, 165, 87, 0.4); outline-offset: 2px; }
.pg.falta { background: var(--red-100); color: #b4472f; }
.pg-na { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .moto .tabs-seg { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .moto .tabs-seg .tab { font-size: 13.5px; padding: 9px 4px; line-height: 1.15; flex-wrap: wrap; text-align: center; gap: 4px; }
  .moto .tabs-seg .tab .count { padding: 0 6px; }
  .pg-head { display: none; }
  .pg-linha { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 14px; }
  .pg-nome { grid-column: 1 / -1; }
  .pg-cel { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: flex-start; }
  .pg-cel::before { content: attr(data-mes); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
}

/* A barra de filtros fica acima dos títulos fixos, para a lista aberta nunca ficar por baixo deles */
.barra { z-index: 40; }
.sel-wrap.aberto { z-index: 95; }

/* =====================================================================
   Identidade final. Neutro por padrão, cor só onde carrega significado.
   Azul marinho para texto e ação principal, dourado só como acento da marca,
   verde, âmbar e vermelho somente para o estado (confere, atenção, problema).
   ===================================================================== */
:root {
  --ink: #1c2633;
  --muted: #667180;
  --line: #e2e7ee;
  --mist: #f5f7fa;
  --surface: #fafbfc;
  --ok: #2c7a4b;
  --warn: #b26a0c;
  --bad: #b13a28;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgba(23, 47, 74, 0.04);
}
body { font-feature-settings: "tnum" 0; line-height: 1.55; }
.dl dd, .meta, .stat .n, .count { font-variant-numeric: tabular-nums; }

/* Rótulo pequeno e discreto, valor firme e legível */
.dl dt, .gbox .dl dt { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dl dd, .gbox .dl dd { margin-top: 3px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.dl .envia dt::after { display: none; }

/* Caixas do detalhe, só a que vai para a empresa ganha destaque */
.gbox, .gbox-vinculo, .gbox.sem-envio { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; padding: 16px 18px 18px; }
.gbox h4, .gbox-vinculo h4, .gbox.sem-envio h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; }
.gbox-envia { background: #fff; border: 1.5px solid var(--navy); box-shadow: none; }
.gbox-envia h4 { color: var(--navy); }
.gbox .dl { gap: 14px 18px; margin-top: 12px; }

/* Alerta e conferência, sem bloco colorido */
.alert, .alert.t-ok, .alert.t-warn, .alert.t-danger { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.alert.t-ok svg { color: var(--ok); }
.alert.t-warn svg { color: var(--warn); }
.alert.t-danger svg { color: var(--bad); }
.alert strong { color: var(--navy); font-weight: 600; }
.alert.alerta-c { padding: 12px 16px; font-size: 14px; }
.alert.alerta-c .alerta-l { color: var(--ink); line-height: 1.5; }
.alert.alerta-c .alerta-l strong { font-size: 14px; font-weight: 600; margin-right: 6px; }
.alert.alerta-c .confere { margin-top: 10px; gap: 4px 14px; }
.alert.alerta-c .confere-t { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); opacity: 1; }
.alert.alerta-c .conf, .conf { background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 13px; font-weight: 500; color: var(--muted); gap: 5px; }
.conf i { width: auto; height: auto; background: none; font-size: 13px; font-weight: 700; color: var(--ok); }
.conf em { font-weight: 500; color: inherit; }
.alert.alerta-c .conf.dif, .conf.dif { background: #fdf3e1; color: #7a4608; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 6px; box-shadow: none; }
.conf.dif i { color: var(--warn); }
.alert.alerta-c .conf.info, .conf.info { background: none; color: var(--muted); }
.conf.info i { color: var(--muted); }

/* Linhas das listas, quietas, sem barra colorida */
.row-wrap, .row-wrap.t-ok, .row-wrap.t-warn, .row-wrap.t-danger, .row-wrap.emp { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.row-wrap:hover { border-color: #c5cfdb; box-shadow: none; }
.row-wrap.open, .row-wrap.open:hover { border-color: #b8c4d2; box-shadow: 0 6px 20px rgba(23, 47, 74, 0.07); }
.c-main strong { font-weight: 600; color: var(--navy); }
.idade { font-weight: 500; }
.idade.media { color: var(--warn); }
.idade.alta { color: var(--bad); font-weight: 600; }

/* Etiquetas, cinza neutro, a cor vira só um ponto de estado */
.chip, .chip.c-contratar, .chip.c-cancelar, .chip.c-alterar, .chip.c-neutral, .chip.c-comp, .chip.c-novo, .chip.c-saiu, .chip.c-isento {
  background: #f0f3f7; color: #36414f; border: 0; font-weight: 500; font-size: 12.5px; padding: 4px 11px;
}
.chip.c-ok, .chip.c-warn, .chip.c-danger { background: #f0f3f7; color: #36414f; display: inline-flex; align-items: center; gap: 7px; }
.chip.c-ok::before, .chip.c-warn::before, .chip.c-danger::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip.c-ok::before { background: var(--ok); }
.chip.c-warn::before { background: #d99a2b; }
.chip.c-danger::before { background: var(--bad); }
.chip.c-isento { background: #fdf3e1; color: #7a4608; }

/* Abas, uma só cor de seleção */
.tabs-seg { background: transparent; padding: 0; gap: 2px; }
.tabs-seg .tab { color: var(--muted); font-weight: 500; }
.tabs-seg .tab:hover { background: var(--mist); color: var(--navy); }
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: none; font-weight: 600; }
.tab .count { background: #edf0f4; color: var(--muted); }
.tab[aria-selected="true"] .count { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tab, .tabs-seg .tab { box-shadow: none; }

/* Títulos de coluna e de grupo, sentença normal, sem gritar */
.tr.head, .tr.head > span { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.card, .barra { box-shadow: none; border-color: var(--line); }
.card.feat { border-left-width: 1px; }

/* Cartões de número do topo */
.stat-mini { border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; background: rgba(255, 255, 255, 0.07); }
.stat-mini .n { color: #fff; font-weight: 600; }
.stat-mini .l { color: #cfdcea; }

/* Campos */
.input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(23, 47, 74, 0.12); }

/* Botões, marinho para agir, contorno para o resto */
.btn-gold { background: var(--navy); }
.btn-gold:hover { box-shadow: none; background: var(--navy-900); }
.btn-ghost:hover { border-color: #b8c4d2; background: var(--surface); }
.btn-primary:hover { transform: none; }

/* Títulos de grupo e dias, sem dourado e sem borda */
.grp { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
.grp span { background: #edf0f4; color: var(--muted); }
.grp-alerta { color: var(--bad); }
.grp-alerta span { background: #fbebe7; color: var(--bad); }
.dchip { background: #f0f3f7; border: 0; color: var(--ink); font-weight: 500; padding: 3px 11px; }
.dchip i { background: var(--navy); width: 5px; height: 5px; opacity: 0.55; }
.dchip.entrou { background: #e4f2ea; color: #1f6a3f; font-weight: 600; border: 0; }
.dchip.entrou i { background: var(--ok); opacity: 1; }
.dchip.saiu { background: #fbeeea; color: #9c3a28; border: 0; }
.turno-nome { color: var(--muted); font-weight: 500; }

/* Seleção no formulário em marinho, não em dourado */
.dia:hover, .turno:hover { border-color: #b8c4d2; }
.dia input, .turno input { accent-color: var(--navy); }
.dia:has(input:checked), .turno:has(input:checked) { border-color: var(--navy); background: #eef3f9; }
.dia:has(input:focus-visible), .turno:has(input:focus-visible) { outline-color: rgba(23, 47, 74, 0.35); }

/* Formulário público */
.sec-head h2 { color: var(--navy); }
.step-label { color: var(--muted); font-weight: 600; letter-spacing: 0.08em; }
.step-label::after { background: var(--line); }
.choice:hover { border-color: #b8c4d2; }
.choice .ic svg { stroke: var(--navy); }
.choice[aria-checked="true"] { border-color: var(--navy); background: #eef3f9; box-shadow: 0 0 0 3px rgba(23, 47, 74, 0.1); }
.notice.info { background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; color: var(--ink); }
.notice.info::before { display: none; }
.notice strong { color: var(--navy); font-weight: 600; letter-spacing: 0.06em; }
.field label, label.lbl { font-weight: 500; }

/* Motorista, cartões neutros, a cor aparece só no tipo de novidade */
.moto-card { border-left: 1px solid var(--line); box-shadow: none; }
.moto-card.ev-pagou, .moto-card.ev-saiu, .moto-card.ev-entrou { border-left-width: 4px; }
.mc-rot { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.fev { border-width: 1px; font-weight: 500; }
.fev:hover { border-color: #b8c4d2; }
.fev b { background: #edf0f4; color: var(--muted); }
.fev.on { font-weight: 600; }
.fev.on b { background: rgba(255, 255, 255, 0.2); color: #fff; }
.fev:focus-visible { outline-color: rgba(23, 47, 74, 0.4); }
.filtro-t { font-weight: 500; letter-spacing: 0; text-transform: none; }
.lc-abre.aberta, .lc-grupo.aberta .lc { background: #fff; }
.lc-det { background: var(--surface); border-top: 1px solid var(--line); }
.lc-grupo.aberta .lc-det { border-left-color: var(--line); }
.mais summary { color: var(--navy); }

.form-card h2, .sec-head h2 { color: var(--navy); font-weight: 600; }
.comp-nota { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.sug { background: #f0f3f7; color: #36414f; font-weight: 500; }

@media (max-width: 760px) {
  .barra-campos { flex-direction: column; align-items: stretch; flex: 1 1 100%; }
  .barra-campos > *, .barra-campos #busca, .barra-campos #f-alerta, .barra-campos #f-empresa { flex: none !important; max-width: none !important; width: 100%; height: auto; }
}

/* Checagem sem cor, o texto já diz o que é. Cor fica na empresa e na urgência dos dias. */
.chip.c-ok::before, .chip.c-warn::before, .chip.c-danger::before { display: none; }
.chip.c-ok, .chip.c-warn, .chip.c-danger { gap: 0; }

/* Card expandido, cada bloco com a sua cor, título do dado em cor e valor em tinta escura */
.gbox { border-top-width: 4px; }
.gbox .dl dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.gbox .dl dd { color: var(--ink); font-weight: 500; }
.gbox h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 4px; }

.gbox-envia { background: #fffaf0; border: 1px solid #e3c37a; border-top: 4px solid var(--gold); }
.gbox-envia h4 { color: var(--gold); }
.gbox-envia .dl dt { color: #8a6516; }

.gbox:not(.gbox-envia):not(.gbox-vinculo) { background: #f5f8fc; border-color: #d3deea; border-top-color: var(--navy); }
.gbox:not(.gbox-envia):not(.gbox-vinculo) h4 { color: var(--navy); }
.gbox:not(.gbox-envia):not(.gbox-vinculo) .dl dt { color: #4a6a8c; }

.gbox-vinculo { background: #f1f8fe; border-color: #bfdaf0; border-top-color: var(--azure); }
.gbox-vinculo h4 { color: var(--azure-ink); }
.gbox-vinculo .dl dt { color: #2d78b0; }
.gbox.sem-envio { border-top-color: var(--line); }

/* Dias de uso e rótulos de turno com a cor da marca */
.turno-nome { color: var(--navy); font-weight: 600; }
.gbox-envia .dchip { background: #fbf0d6; color: #6e4d0c; }
.gbox-envia .dchip i { background: var(--gold); opacity: 1; }
.gbox-vinculo .dchip { background: #dcecf8; color: #1d5a8a; }
.gbox-vinculo .dchip i { background: var(--azure); opacity: 1; }

/* Aviso com contorno dourado e símbolo centralizado no card */
.alert, .alert.t-ok, .alert.t-warn, .alert.t-danger { border: 1.5px solid #c9963f; }
.alert.alerta-c { align-items: center; }
.alert.alerta-c svg { margin-top: 0; align-self: center; }

/* Títulos dos blocos azuis em dourado */
.gbox:not(.gbox-envia):not(.gbox-vinculo) h4, .gbox-vinculo h4 { color: var(--gold); }

/* Símbolo de atenção e motivo do aviso em vermelho */
.alert.t-warn svg, .alert.t-danger svg { color: #c0392b; }
.alert.t-warn strong, .alert.t-danger strong, .alert.alerta-c.t-warn .alerta-l strong, .alert.alerta-c.t-danger .alerta-l strong { color: #c0392b; }

/* =====================================================================
   Refinamento geral. Mesma regra em todas as telas.
   Aviso informativo é caixa neutra, cabeçalho de coluna é texto pequeno e cinza,
   seleção é marinho, dias de uso são dourado sólido, e dado nunca quebra no meio.
   ===================================================================== */
.ativo-aviso, .comp-nota, .notice.info { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
.notice.info { padding: 12px 16px; }

/* Cabeçalhos de coluna, iguais no setor e no motorista */
.lc.head, .pg-head, .turno-titulo { background: var(--surface); border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.turno-titulo strong { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy); }
.pg-head em { color: var(--gold); font-weight: 600; letter-spacing: 0; }

/* Dias de uso em dourado sólido, ausentes em cinza discreto */
.cel { background: #f1f3f6; }
.cel.on { background: #b98a2a; color: #fff; }

/* Aluno aberto na lista do motorista, branco com contorno marinho */
.lc-grupo.aberta { margin: 12px 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1.5px var(--navy), 0 8px 22px rgba(23, 47, 74, 0.08); }
.lc-grupo.aberta .lc, .lc-grupo.aberta .lc:hover, .lc-grupo.aberta .lc:focus-visible { background: #fff; color: var(--ink); }
.lc-grupo.aberta .lc .nome { color: var(--navy); }
.lc-grupo.aberta .lc .pt { color: var(--ink); }
.lc-grupo.aberta .lc .cel:not(.on) { background: #f1f3f6; }
.lc-grupo.aberta .lc-det { background: #fff; border-top: 1px solid var(--line); }

/* Seleção sempre em marinho */
.opt[aria-pressed="true"], .sel-item.on { background: #eef3f9; color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }

/* Etiquetas de comprovante e contadores neutros */
.chip.c-comp, .chip.c-comp-novo { background: #f0f3f7; color: #36414f; }
.sub-tab .count { background: #edf0f4; color: var(--muted); }

/* Envio de arquivo e área de demonstração, sem creme */
.anexo { background: var(--surface); border-color: #c5cfdb; }
.anexo:hover { border-color: var(--navy); }
.anexo-ic { background: var(--navy); }
.demo-box { background: var(--surface); border-color: #c5cfdb; }

/* Quadro sem envio à empresa, neutro */
.gbox.sem-envio { background: var(--surface); border-color: var(--line); border-top: 4px solid #c5cfdb; }
.gbox.sem-envio h4 { color: var(--muted); }
.gbox.sem-envio .dl dt { color: var(--muted); }

/* E-mail e nomes longos nunca quebram no meio da palavra, a coluna cresce */
.gbox .dl dd, .dl dd { overflow-wrap: break-word; word-break: normal; }
.gbox-envia .dl { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.gbox .dl dd.email, .gbox .dl dd { hyphens: none; }
.lc-grupo.aberta .pag.ok { color: #1f7a43; }
.lc-grupo.aberta .pag.falta { color: #b4472f; }

/* Título da coluna Aluno alinhado com o começo dos nomes */
@media (min-width: 961px) {
  .tr.head { padding-left: 17px; padding-right: 17px; }
  .tr.head > span:first-child { padding-left: 0; }
}
.meta.dif { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8a5a17; }

/* Formulário do aluno, a seleção é dourada para o aluno ver na hora o que escolheu */
.choice:hover, .dia:hover, .turno:hover { border-color: #cbaf74; }
.choice .ic svg { stroke: var(--gold); }
.choice[aria-checked="true"] { border-color: var(--gold); background: #fffaf0; box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.16); }
.choice[aria-checked="true"] strong { color: var(--navy); }
.dia input, .turno input { accent-color: var(--gold); }
.dia:has(input:checked), .turno:has(input:checked) { border-color: var(--gold); background: #fffaf0; }
.dia:has(input:focus-visible), .turno:has(input:focus-visible), .choice:focus-visible { outline-color: rgba(168, 122, 28, 0.45); }
.opt[aria-pressed="true"], .sel-item.on { background: #fffaf0; color: #8a5a17; box-shadow: inset 3px 0 0 var(--gold); }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 122, 28, 0.2); }
.form-card .btn-primary, .form-card .btn-gold { background: var(--gold-grad); color: #fff; }
.form-card .btn-primary:hover, .form-card .btn-gold:hover { box-shadow: 0 6px 16px rgba(168, 122, 28, 0.3); background: var(--gold-grad); }

/* =====================================================================
   Identidade AMF devolvida. Texto firme, dourado como assinatura,
   marinho como estrutura. Neutro só no fundo, nunca no que importa.
   ===================================================================== */
:root { --ink: #131d2a; --muted: #4e5a69; --line: #d6dfea; --mist: #eef2f8; --surface: #f7f9fc; }
body { color: var(--ink); background: var(--mist); }

/* Abas, a selecionada em dourado como a marca */
.tabs-seg .tab { color: var(--navy); font-weight: 600; }
.tabs-seg .tab:hover { background: #fff6e4; color: var(--navy); }
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"] { background: var(--gold-grad); color: #fff; box-shadow: 0 4px 12px rgba(168, 122, 28, 0.32); }
.tab .count { background: #fdf1d4; color: #7a5410; font-weight: 700; }
.tab[aria-selected="true"] .count { background: rgba(255, 255, 255, 0.28); color: #fff; }
.barra { border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(23, 47, 74, 0.1); }

/* Títulos das colunas e dos grupos em marinho e dourado, com peso */
.tr.head, .tr.head > span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.grp { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.grp span { background: #fdf1d4; color: #7a5410; font-weight: 700; }
.grp-alerta { color: var(--gold); }
.grp-alerta span { background: #fdf1d4; color: #7a5410; }

/* Linhas das listas, cartão claro com barra dourada e nome forte */
.row-wrap, .row-wrap.t-ok, .row-wrap.t-warn, .row-wrap.t-danger { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 47, 74, 0.06), 0 4px 14px rgba(23, 47, 74, 0.05); }
.row-wrap.emp { border-left-color: var(--c, var(--gold)); }
.row-wrap:hover { border-color: #b9c6d6; border-left-color: var(--gold); box-shadow: 0 1px 2px rgba(23, 47, 74, 0.08), 0 8px 22px rgba(23, 47, 74, 0.1); }
.row-wrap.open, .row-wrap.open:hover { border-color: var(--gold); box-shadow: 0 10px 30px rgba(23, 47, 74, 0.14); }
.c-main strong { font-size: 16px; font-weight: 700; color: var(--navy); }
.meta { color: var(--muted); font-size: 13px; }
.tr .c-city, .tr .c-dest { font-size: 15px; font-weight: 500; color: var(--ink); }
.idade { font-weight: 600; }

/* Checagem, etiqueta firme e neutra */
.chip, .chip.c-ok, .chip.c-warn, .chip.c-danger { background: #e9eef5; color: var(--navy); font-weight: 600; font-size: 13px; border: 1px solid #d2dce9; }
.chip.c-isento { background: #fdf1d4; color: #7a5410; border-color: #ecd08a; }

/* Botão da linha, contorno marinho que preenche ao passar o mouse */
.row-wrap .btn-ghost { border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; }
.row-wrap .btn-ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Texto dos quadros mais forte */
.dl dd, .gbox .dl dd { color: var(--ink); font-weight: 500; }
.gbox .dl dt { font-weight: 700; }
.alert .alerta-l, .alert.alerta-c .alerta-l { color: var(--ink); font-weight: 500; }
.conf, .alert.alerta-c .conf { color: #3c4856; font-weight: 600; }
.alert.alerta-c .confere-t { color: var(--navy); font-weight: 700; }

/* Topo do setor e do motorista, cartões de número com filete dourado */
.stat-mini { border: 1px solid rgba(201, 150, 63, 0.55); background: rgba(255, 255, 255, 0.08); }
.stat-mini .n { color: #f0cf84; font-weight: 700; }
.stat-mini .l { color: #e8f0f8; font-weight: 500; }

/* Filtros do motorista, o selecionado em marinho com número dourado */
.fev { color: var(--navy); font-weight: 600; border-width: 1.5px; }
.fev b { background: #fdf1d4; color: #7a5410; }
.fev.on b { background: var(--gold-grad); color: #fff; }
.mc-rot, .filtro-t { color: var(--navy); font-weight: 700; }

/* Três filtros lado a lado, quem vai hoje, manhã e noite */
.hoje-barra { gap: 10px; margin: 0 0 16px; }
.hoje-btn { min-height: 48px; padding: 0 10px 0 16px; border: 1.5px solid var(--navy); border-radius: 12px; }
.hoje-btn.turno { padding-left: 12px; }
.hoje-btn .cel.mini { flex: none; margin: 0; }
.hoje-btn:hover { border-color: var(--gold); }
.hoje-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.hoje-btn.on .hoje-n { background: var(--gold-grad); }
.hoje-t { font-size: 16px; }
@media (max-width: 760px) {
  .hoje-barra { display: grid; grid-template-columns: 1fr 1fr; }
  .hoje-btn { width: 100%; justify-content: space-between; }
  .hoje-btn:first-child:not(.turno) { grid-column: 1 / -1; }
}

/* Quem vai hoje, Manhã e Noite, três filtros pequenos lado a lado */
.legenda-dias { gap: 8px; }
.leg-f { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1; }
.leg-f:first-child { padding-left: 14px; }
.leg-f:hover:not(:disabled) { border-color: var(--gold); }
.leg-f:focus-visible { outline: 3px solid rgba(168, 122, 28, 0.4); outline-offset: 2px; }
.leg-f .cel.mini { width: 24px; height: 22px; font-size: 11px; border-radius: 6px; margin: 0; }
.leg-f.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.leg-f:disabled { opacity: 0.45; cursor: not-allowed; }

/* Filtros são coadjuvantes, pequenos e sutis. O ligado ganha só um tom dourado claro. */
.leg-f { height: 28px; padding: 0 12px 0 5px; gap: 6px; font-size: 13px; font-weight: 500; border-width: 1px; color: #3c4856; background: transparent; }
.leg-f:first-child { padding-left: 12px; }
.leg-f .cel.mini { width: 20px; height: 18px; font-size: 10px; border-radius: 5px; }
.leg-f:hover:not(:disabled) { background: #fff; border-color: #cfa24a; }
.leg-f.on { background: #fff6e0; border-color: #cfa24a; color: #6b4a0c; font-weight: 600; }
.legenda-dias { gap: 6px; }

.fev { min-height: 32px; padding: 0 12px; gap: 6px; font-size: 13.5px; font-weight: 500; border-width: 1px; background: transparent; color: #3c4856; }
.fev:hover { background: #fff; border-color: #cfa24a; }
.fev b { min-width: 20px; height: 18px; font-size: 11.5px; background: #edf0f4; color: var(--muted); }
.fev.on { background: #fff6e0; border-color: #cfa24a; color: #6b4a0c; font-weight: 600; }
.fev.on b { background: #f0d48a; color: #6b4a0c; }
.filtro-ev { gap: 6px; }
@media (max-width: 760px) { .fev { min-height: 34px; padding: 0 11px; font-size: 13.5px; } }


/* Turnos da lista de hoje, cada um com a sua identidade */
.turno-titulo { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); border-left: 4px solid var(--navy); background: #e8eef6; font-family: var(--sans); }
.turno-titulo.manha { border-left-color: var(--gold); background: #fff3d6; }
.turno-titulo strong { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.turno-titulo .cel.mini { width: 26px; height: 24px; font-size: 12px; margin: 0; }
.turno-titulo.noite .cel.mini { background: var(--navy); }
.turno-n { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--navy); background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 2px 11px; }
.turno-vazio { padding: 16px 22px; color: var(--muted); font-size: 14.5px; border-top: 1px solid #edf2f7; background: #fff; }

/* Filtros desligados continuam visíveis */
.leg-f { border-color: #c3cddb; background: #fff; color: var(--navy); }
.leg-f:not(.on):not(:disabled):hover { border-color: #cfa24a; }

/* Títulos dos turnos, finos e discretos, com um filete na cor do turno */
.turno-titulo { gap: 8px; padding: 8px 18px; border-top: 1px solid var(--line); border-left: 3px solid var(--navy); background: #f6f8fb; }
.turno-titulo.manha { border-left-color: var(--gold); background: #fffaf0; }
.turno-titulo strong { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; }
.turno-titulo .cel.mini { width: 20px; height: 18px; font-size: 10.5px; border-radius: 5px; }
.turno-n { margin-left: 4px; padding: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.turno-vazio { padding: 12px 22px; font-size: 13.5px; }

/* Pagamentos do motorista, indicadores pequenos e em uma linha */
.pg { gap: 6px; padding: 4px 11px 4px 5px; font-size: 13px; font-weight: 600; }
.pg i { width: 17px; height: 17px; font-size: 10.5px; }
.pg small { display: inline; margin-left: 4px; font-size: 12.5px; font-weight: 500; opacity: 0.85; }
.pg span { display: inline; }
.pg-linha { padding-top: 9px; padding-bottom: 9px; }
.pg-nome strong { font-size: 15px; font-weight: 700; }

/* =====================================================================
   Motorista na mesma linguagem da conferência do setor.
   Linhas em cartões soltos com filete dourado, cabeçalho de colunas em marinho,
   dados em quadros com título colorido e valor firme.
   ===================================================================== */

/* Listas deixam de ser uma caixa única, cada aluno é um cartão */
.lista-compl, .pg-tabela { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.lc.head, .pg-head { background: transparent; border: 0; box-shadow: none; padding: 4px 22px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.lc-grupo, .pg-linha:not(.pg-head) { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 47, 74, 0.06), 0 4px 14px rgba(23, 47, 74, 0.05); margin: 0 0 8px; overflow: hidden; }
.lc-grupo .lc { border-top: 0; padding: 13px 18px; background: transparent; }
.lc:nth-child(even):not(.head), .pg-linha:nth-child(even):not(.pg-head) { background: transparent; }
.lc-grupo:hover { border-color: #b9c6d6; border-left-color: var(--gold); }
.lc-abre:hover, .lc-abre:focus-visible { background: #fffaf0; }
.pg-linha:not(.pg-head) { padding: 12px 18px; }
.pg-nome strong, .lc .nome strong { font-size: 16px; font-weight: 700; color: var(--navy); }

/* Cartão aberto, contorno dourado e conteúdo em quadro marinho */
.lc-grupo.aberta { margin: 0 0 12px; border: 1px solid var(--gold); border-left: 4px solid var(--gold); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(23, 47, 74, 0.14); }
.lc-grupo.aberta .lc, .lc-grupo.aberta .lc:hover { background: #fff; }
.lc-grupo.aberta .lc-det, .lc-det { margin: 0; padding: 4px 18px 18px; background: #fff; border-top: 1px dashed var(--line); }
.lc-det .dl, .mais .dl { margin-top: 12px; padding: 14px 16px; background: #f5f8fc; border: 1px solid #d3deea; border-top: 4px solid var(--navy); border-radius: 10px; gap: 12px 18px; }
.lc-det .dl dt, .mais .dl dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a6a8c; }
.lc-det .dl dd, .mais .dl dd { margin-top: 3px; font-size: 15px; font-weight: 500; color: var(--ink); }
.sub-tab { border: 1.5px solid var(--line); font-weight: 600; color: var(--navy); }
.sub-tab[aria-selected="true"] { background: var(--gold-grad); border-color: transparent; color: #fff; }
.sub-tab[aria-selected="true"] .count { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* Novidades, cartão como as linhas do setor e dados em quadro dourado */
.moto-card.compacto { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 47, 74, 0.06), 0 4px 14px rgba(23, 47, 74, 0.05); padding: 14px 18px 12px; margin-bottom: 10px; }
.moto-card.ev-entrou { border-left-color: var(--green); }
.moto-card.ev-saiu { border-left-color: #d9694c; }
.moto-card.ev-pagou { border-left-color: var(--azure); }
.mc-top h3 { font-size: 17px; font-weight: 700; color: var(--navy); }
.mc-corpo { margin-top: 10px; padding: 12px 14px; background: #fffaf0; border: 1px solid #ecd9a8; border-top: 3px solid var(--gold); border-radius: 10px; }
.mc-corpo:empty { display: none; }
.mc-rot { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6516; }
.mc-val { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.mc-pe { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.frase-mud { font-weight: 600; color: var(--navy); }

/* Histórico das novidades anteriores, linhas finas */
.visto { border: 1px solid var(--line); border-left: 4px solid #d6c08a; border-radius: 10px; box-shadow: none; background: #fff; }
.visto strong { color: var(--navy); }

/* Títulos de grupo como no setor */
.grp-leve { color: var(--gold); }
.lc-grupo:nth-child(even) .lc { background: transparent; }
.mc-corpo .dchip { background: #fbf0d6; color: #6e4d0c; }
.mc-corpo .dchip i { background: var(--gold); opacity: 1; }
.mc-corpo .turno-nome { color: #6e4d0c; }
.pg-linha:not(.pg-head), .pg-linha:nth-child(even):not(.pg-head) { background: #fff; }

/* Divisor de turno, rótulo pequeno e um fio fino que se estende, sem faixa nem quina */
.turno-titulo, .turno-titulo.manha { display: flex; align-items: center; gap: 9px; margin: 20px 2px 10px; padding: 0; background: none; border: 0; border-radius: 0; }
.turno-titulo:first-of-type { margin-top: 6px; }
.turno-titulo::after { content: ""; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, #c9d3e0, rgba(201, 211, 224, 0)); }
.turno-titulo strong { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--navy); }
.turno-titulo.manha strong { color: #8a6516; }
.turno-titulo .cel.mini { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.turno-n { order: 3; margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.turno-titulo .turno-n { order: 0; }

/* =====================================================================
   Alinhamento final com o padrão real da AMF (Guia Acadêmico e Vagas).
   Roboto no corpo, Inter nos títulos, divisor com rótulo e fio, cartão com
   sombra em duas camadas, ação principal em dourado.
   ===================================================================== */
:root { --body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --line: #dbe4ee; --shadow: 0 1px 2px rgba(23, 47, 74, 0.04), 0 8px 24px rgba(23, 47, 74, 0.06); }
body { line-height: 1.62; }

/* Divisor de seção, o mesmo do formulário em toda a ferramenta */
.grp { display: flex; align-items: center; gap: 10px; margin: 26px 2px 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.grp::after { content: ""; flex: 1; height: 1px; margin-left: 4px; background: linear-gradient(90deg, #d3c08c, rgba(211, 192, 140, 0)); }
.grp span { order: 0; }
.grp-leve { color: var(--muted); }
.grp-leve::after { background: linear-gradient(90deg, #cfd8e4, rgba(207, 216, 228, 0)); }
.grp-emp { color: var(--navy); }

/* Cartões no padrão da AMF */
.row-wrap, .row-wrap.t-ok, .row-wrap.t-warn, .row-wrap.t-danger, .lc-grupo, .pg-linha:not(.pg-head), .moto-card.compacto, .barra, .card { box-shadow: var(--shadow); }
.row-wrap, .lc-grupo, .pg-linha:not(.pg-head), .moto-card.compacto { border-color: #dbe4ee; }
.row-wrap:hover { box-shadow: 0 1px 2px rgba(23, 47, 74, 0.05), 0 10px 28px rgba(23, 47, 74, 0.09); }

/* Ação principal em dourado, como os botões do Guia e do formulário */
.btn-primary { background: var(--gold-grad); color: #fff; }
.btn-primary:hover { background: var(--gold-grad); box-shadow: 0 6px 16px rgba(168, 122, 28, 0.3); }
.btn-primary:disabled { background: #c9ced6; box-shadow: none; }
.moto-card.compacto.ev-entrou { border-left-color: var(--green); }
.moto-card.compacto.ev-saiu { border-left-color: #d9694c; }
.moto-card.compacto.ev-mudou { border-left-color: var(--gold); }
.moto-card.compacto.ev-pagou { border-left-color: var(--azure); }
.row-wrap, .lc-grupo, .pg-linha:not(.pg-head) { border-left-color: var(--gold); }
.row-wrap.emp { border-left-color: var(--c, var(--gold)); }

/* Abas e filtros, sem brilho exagerado e sem quadrado piscando ao clicar ou tocar */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"], .tab, .fev, .leg-f, .sub-tab, .choice { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tab, .fev, .leg-f, .sub-tab { transition: none; user-select: none; -webkit-user-select: none; }
button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }
.tab:focus-visible, .fev:focus-visible, .leg-f:focus-visible, .sub-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 999px; }
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"] { box-shadow: 0 1px 4px rgba(168, 122, 28, 0.22); }
.tabs-seg .tab:hover { background: #fdf6e6; }
.tabs-seg .tab[aria-selected="true"]:hover { background: var(--gold-grad); }

/* =====================================================================
   Revisão geral de abas e filtros, no computador e no celular.
   Aba selecionada em dourado liso e baixo, sem brilho, contador sempre ao lado do nome,
   filtros centralizados e do mesmo tamanho.
   ===================================================================== */
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"] { background: #b98a2a; color: #fff; box-shadow: none; }
.tabs-seg .tab[aria-selected="true"]:hover { background: #b98a2a; }
.tabs-seg .tab { padding: 7px 14px; gap: 6px; flex-wrap: nowrap; white-space: nowrap; line-height: 1.2; }
.moto .tabs-seg .tab { padding: 9px 16px; }
.tab .count { flex: none; line-height: 1.5; }
.tab[aria-selected="true"] .count { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 760px) {
  .tabs-seg, .moto .tabs-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0; }
  .tabs-seg .tab, .moto .tabs-seg .tab { padding: 9px 4px; font-size: 13px; gap: 4px; flex-wrap: nowrap; white-space: nowrap; justify-content: center; text-align: center; }
  .tabs-seg .tab .count, .moto .tabs-seg .tab .count { padding: 0 6px; font-size: 11.5px; }
  .filtro-ev { justify-content: center; gap: 6px; }
  .filtro-t { display: none; }
  .fev { min-height: 34px; padding: 0 12px; }
}

@media (max-width: 760px) {
  /* Motorista, três abas bem distribuídas */
  .moto .tabs-seg { grid-template-columns: auto auto auto; justify-content: space-between; }
  .moto .tabs-seg .tab { padding: 8px 9px; font-size: 12.5px; }
  /* Setor, seis abas em uma faixa que rola de lado, sem cortar nem quebrar linha */
  .tabs-seg:has(.tab:nth-child(6)) { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 -4px; padding: 0 4px; scroll-snap-type: x proximity; }
  .tabs-seg:has(.tab:nth-child(6))::-webkit-scrollbar { display: none; }
  .tabs-seg:has(.tab:nth-child(6)) .tab { flex: none; scroll-snap-align: start; padding: 8px 12px; }
  /* Pagamentos, indicadores em uma linha só */
  .pg { white-space: nowrap; font-size: 12.5px; padding: 4px 9px 4px 5px; }
  .pg small { font-size: 12px; }
}

/* Texto de aviso nunca justificado, para não abrir buracos entre as palavras */
.alert, .alert p, .alerta-l, .meta, .chip, .notice, .sheet-aviso { text-align: left; hyphens: none; }
@media (max-width: 760px) {
  .gbox .dl, .gbox-envia .dl { grid-template-columns: 1fr; gap: 12px; }
  .tr .c-chk .chip { border-radius: 14px; }
  .tabs-seg:has(.tab:nth-child(6)) { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

/* Entrar, fundo marinho como o acesso das Mentorias, cartão branco no centro */
.login-page { background: linear-gradient(180deg, #0e2033, #1a3a5c); }
.login-main { background: transparent; }
.login-box .card { box-shadow: 0 20px 50px rgba(5, 14, 24, 0.45); border-color: transparent; }
.login-box .demo-box { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; }
.login-page .bar { box-shadow: none; }

/* Motorista no celular, três abas dividem a largura por igual e nunca cortam */
@media (max-width: 760px) {
  .moto .tabs-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .moto .tabs-seg .tab { padding: 8px 4px; font-size: 12.5px; gap: 4px; min-width: 0; }
  .moto .tabs-seg .tab .count { padding: 0 5px; }
  .hoje-nota, .moto-dica { text-align: left; }
}
.sub-tab[aria-selected="true"] { background: #b98a2a; box-shadow: none; }
.hoje-btn, .btn-gold, .btn-primary { box-shadow: none; }

/* Telas estreitas, nada passa da borda */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 760px) {
  .moto .tabs-seg .tab { font-size: 12px; padding: 8px 2px; gap: 3px; letter-spacing: -0.01em; }
  .moto .tabs-seg .tab .count { padding: 0 4px; font-size: 11px; }
  .pg-linha:not(.pg-head) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 8px; padding: 12px 14px; }
  .pg-cel { min-width: 0; }
  .pg { white-space: normal; flex-wrap: wrap; row-gap: 0; max-width: 100%; font-size: 12px; padding: 4px 8px 4px 5px; line-height: 1.25; }
  .pg small { display: block; margin: 0; font-size: 11.5px; }
  .pg span { display: block; }
}
@media (max-width: 360px) {
  .moto .tabs-seg .tab .count { display: none; }
}
.leg-f { white-space: nowrap; flex: none; }
@media (max-width: 400px) { .legenda-dias { gap: 5px; } .leg-f { padding-right: 10px; font-size: 12.5px; } }

/* Motorista no celular, nome da aba com o número centralizado embaixo, igual em todas */
@media (max-width: 760px) {
  .moto .tabs-seg .tab { flex-direction: column; gap: 2px; padding: 7px 2px 6px; line-height: 1.15; border-radius: 18px; }
  .moto .tabs-seg .tab .count { display: inline-block !important; padding: 0 7px; font-size: 11px; line-height: 1.5; }
}

/* Dias da semana em azul escuro sobre os quadros dourados */
.mc-corpo .dchip, .gbox-envia .dchip { background: var(--navy); color: #fff; font-weight: 600; }
.mc-corpo .dchip i, .gbox-envia .dchip i { background: #e3c37a; opacity: 1; }
.mc-corpo .dchip.entrou, .gbox-envia .dchip.entrou { background: var(--navy); color: #fff; }
.mc-corpo .turno-nome, .gbox-envia .turno-nome { color: var(--navy); }

/* Texto azul escuro sobre o dourado, o branco não tem contraste ali */
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"], .sub-tab[aria-selected="true"], .tabs-seg .tab[aria-selected="true"]:hover { color: var(--navy); }
.tab[aria-selected="true"] .count, .sub-tab[aria-selected="true"] .count { background: rgba(23, 47, 74, 0.16); color: var(--navy); }
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"], .sub-tab[aria-selected="true"] { background: #d4a73c; }
.tabs-seg .tab[aria-selected="true"]:hover { background: #d4a73c; }

/* O espaço reservado na lista nunca estica os blocos, tudo fica alinhado no topo */
#lista { display: block; align-content: start; }
#lista > * { align-self: start; }

/* Pagamentos, só texto colorido e centralizado, data embaixo, sem etiqueta */
.pg, .pg.ok, .pg.falta, .pg.ok:hover { background: none; padding: 2px 4px; border-radius: 6px; flex-direction: column; align-items: center; gap: 0; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.3; }
.pg i { display: none; }
.pg.ok { color: #1f7a43; }
.pg.falta { color: #b4472f; }
.pg small { display: block; margin: 0; font-size: 12.5px; font-weight: 500; opacity: 0.9; }
.pg.ok:hover { background: #eef7f1; }
.pg span { display: block; }
.pg-cel { justify-content: center; text-align: center; }
.pg-na { text-align: center; }
@media (max-width: 760px) {
  .pg-linha:not(.pg-head) { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); text-align: center; }
  .pg-nome { text-align: left; grid-column: 1 / -1; }
  .pg-cel { flex-direction: column; align-items: center; justify-content: flex-start; }
  .pg-cel::before { text-align: center; }
  .pg { white-space: normal; font-size: 13.5px; padding: 2px 0; }
}

/* Celular, meses de dois em dois, e o último sozinho fica centralizado */
@media (max-width: 760px) {
  .pg-linha:not(.pg-head) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .pg-linha:not(.pg-head) .pg-nome { grid-column: 1 / -1; }
  .pg-linha:not(.pg-head) .pg-cel { grid-column: span 2; }
  .pg-linha:not(.pg-head) .pg-cel:last-child:nth-child(even) { grid-column: 2 / span 2; }
}

/* Dourado vivo da identidade na aba selecionada, e o número sem etiqueta */
.tabs-seg .tab[aria-selected="true"], .tab[aria-selected="true"], .sub-tab[aria-selected="true"], .tabs-seg .tab[aria-selected="true"]:hover { background: #d1a12f; color: var(--navy); }
.tab .count, .sub-tab .count, .tab[aria-selected="true"] .count, .sub-tab[aria-selected="true"] .count { background: none; padding: 0; min-width: 0; font-weight: 700; color: var(--navy); }
.tab:not([aria-selected="true"]) .count { color: #8a6516; }
@media (max-width: 760px) { .moto .tabs-seg .tab .count { padding: 0 !important; } }

/* Títulos de etapa do formulário em dourado */
.step-label { color: var(--gold); }
.step-label::after { background: linear-gradient(90deg, #d3c08c, rgba(211, 192, 140, 0)); }

/* Filtros de Novidades e Pagamentos idênticos aos de Alunos ativos */
.fev { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 28px; padding: 0 12px; border: 1px solid #c3cddb; border-radius: 999px; background: #fff; color: var(--navy); font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; }
.fev:hover { background: #fff; border-color: #cfa24a; }
.fev b, .fev.on b { background: none; padding: 0; min-width: 0; height: auto; font-size: 12px; font-weight: 700; color: #8a6516; }
.fev.on { background: #fff6e0; border-color: #cfa24a; color: #6b4a0c; font-weight: 600; }
.fev.on b { color: #6b4a0c; }
.fev.zero:not(.on) { opacity: 1; color: #7a8696; }
.filtro-ev { gap: 6px; margin: 4px 0 10px; }
.filtro-t { display: none; }
@media (max-width: 760px) { .fev { min-height: 28px; height: 28px; padding: 0 11px; font-size: 12.5px; } }

.legenda-dias .filtro-ev { margin: 0; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 760px) { .legenda-dias .filtro-ev { justify-content: flex-start; } }
.filtros-bloco .legenda-dias { margin-left: auto; }
.filtros-bloco .legenda-dias .filtro-ev { justify-content: flex-end; }
.tab .count { margin-left: 0; }

@media (max-width: 760px) {
  .filtros-bloco .legenda-dias { margin-left: 0; width: 100%; }
  .filtros-bloco .legenda-dias .filtro-ev, .filtro-ev { justify-content: flex-start; gap: 6px; }
  .filtros-bloco .legenda-dias .filtro-ev .fev { flex: none; }
}

/* Celular, filtros em uma linha só, que rola de lado, igual nas três abas */
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias, .filtros-bloco .legenda-dias .filtro-ev { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-right: -18px; padding-right: 18px; }
  .filtros-bloco .legenda-dias::-webkit-scrollbar, .filtros-bloco .legenda-dias .filtro-ev::-webkit-scrollbar { display: none; }
  .filtros-bloco .legenda-dias .filtro-ev { margin: 0; padding: 0; width: auto; overflow: visible; }
  .filtros-bloco .legenda-dias > .leg-f, .filtros-bloco .legenda-dias .fev { flex: none; white-space: nowrap; }
}

/* Celular, filtros de Novidades e Pagamentos em duas colunas iguais, o último sozinho fica centralizado */
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias:has(.filtro-ev) { overflow: visible; margin-right: 0; padding-right: 0; width: 100%; }
  .filtros-bloco .legenda-dias .filtro-ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; overflow: visible; }
  .filtros-bloco .legenda-dias .filtro-ev .fev { width: 100%; justify-content: center; height: 32px; min-height: 32px; font-size: 13px; }
  .filtros-bloco .legenda-dias .filtro-ev .fev:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
}
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias .filtro-ev .fev:last-child:nth-child(odd) { grid-column: auto; width: 100%; justify-self: stretch; }
  .filtros-bloco .legenda-dias .filtro-ev .fev:last-child:nth-child(even) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
  .filtros-bloco .legenda-dias .filtro-ev .fev { padding: 0 6px; gap: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; }
}
@media (max-width: 760px) { .filtros-bloco .legenda-dias .filtro-ev .fev { font-size: 11.5px; padding: 0 4px; gap: 3px; letter-spacing: -0.01em; } }

/* Número sempre no centro da mesma linha do texto, em filtros e abas */
.fev, .leg-f { display: inline-flex; align-items: center; line-height: 1; }
.fev b, .fev.on b { display: inline-flex; align-items: center; line-height: 1; font-family: var(--sans); font-size: inherit; font-weight: 700; height: auto; margin: 0; padding: 0; transform: none; position: static; }
.tab { align-items: center; line-height: 1.2; }
.tab .count, .sub-tab .count { display: inline-flex; align-items: center; line-height: 1; font-family: var(--sans); font-size: inherit; font-weight: 700; height: auto; margin: 0; }
.tab .count { font-size: 12.5px; }
@media (max-width: 760px) { .moto .tabs-seg .tab .count { display: inline-flex !important; justify-content: center; } }

/* Regra única de contador, abas, filtros e subabas.
   O número tem o mesmo tamanho e a mesma fonte do texto e os dois ficam na mesma linha de base. */
.tab, .fev, .sub-tab, .leg-f { align-items: baseline; }
.tab .count, .sub-tab .count, .tab[aria-selected="true"] .count, .fev b, .fev.on b {
  display: inline; font-family: var(--sans); font-size: 1em; font-weight: 700; line-height: inherit; letter-spacing: 0;
  background: none; padding: 0; margin: 0; min-width: 0; height: auto; transform: none;
}
.tab, .sub-tab { gap: 6px; }
.leg-f { align-items: center; }
@media (max-width: 760px) {
  .moto .tabs-seg .tab { align-items: center; }
  .moto .tabs-seg .tab .count { display: block !important; font-size: 1em; }
}

/* Correção, filtros centralizados na altura e contador do mesmo tamanho em todas as abas */
.fev, .leg-f { align-items: center; }
.fev b, .fev.on b { line-height: 1; }
.tabs-seg .tab .count, .moto .tabs-seg .tab .count, .tabs-seg .tab:not([aria-selected="true"]) .count, .sub-tab .count { font-size: 1em; }

/* Filtros das três abas, um único padrão de fonte, altura e grade */
.fev, .leg-f { font-family: var(--sans); font-size: 13px; font-weight: 600; height: 30px; min-height: 30px; }
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias { display: block; overflow: visible; margin: 0; padding: 0; width: 100%; }
  .filtros-bloco .legenda-dias:not(:has(.filtro-ev)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filtros-bloco .legenda-dias .filtro-ev, .filtros-bloco .legenda-dias:not(:has(.filtro-ev)) { gap: 8px; }
  .filtros-bloco .legenda-dias .fev, .filtros-bloco .legenda-dias > .leg-f { width: 100%; height: 32px; min-height: 32px; justify-content: center; font-size: 12.5px; font-weight: 600; padding: 0 6px; gap: 5px; letter-spacing: 0; }
  .filtros-bloco .legenda-dias > .leg-f:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
}
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias .filtro-ev .fev, .filtros-bloco .legenda-dias > .leg-f { font-size: 12.5px; font-weight: 600; letter-spacing: 0; padding: 0 6px; gap: 5px; height: 32px; min-height: 32px; }
  .filtros-bloco .legenda-dias .filtro-ev .fev:last-child:nth-child(even) { width: calc(50% - 4px); }
}

/* Fontes mínimas, nada abaixo de 12px */
.kicker, .hero .kicker { font-size: 12px; }
.cel, .cel.mini, .moto .cel, .leg-f .cel.mini, .turno-titulo .cel.mini { font-size: 12px; }
.moto .cel::before { font-size: 10.5px; }
.sel-wrap .sel-txt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.sel-btn { height: auto; min-height: 44px; }

/* Botão principal igual em todo o sistema, dourado vivo com texto azul escuro, como as abas */
.btn-gold, .btn-primary, .form-card .btn-primary, .form-card .btn-gold { background: #d1a12f; color: var(--navy); font-weight: 700; box-shadow: none; }
.btn-gold:hover, .btn-primary:hover, .form-card .btn-primary:hover, .form-card .btn-gold:hover { background: #dbac3a; box-shadow: none; transform: none; }
.btn-gold:disabled, .btn-primary:disabled { background: #e3e6ea; color: #8a94a1; }

/* Toda linha de lista tem a mesma barra lateral de 4px, só muda a cor */
.row-wrap, .row-wrap.emp, .row-wrap.t-ok, .row-wrap.t-warn, .row-wrap.t-danger { border-left-width: 4px; border-left-style: solid; }

/* Campo de busca do setor sem cortar o texto */
.barra-campos #busca { flex: 1 1 150px; min-width: 130px; max-width: 200px; padding-left: 12px; padding-right: 12px; }
.barra-campos #f-alerta { flex: 0 0 120px; }
.barra-campos #f-empresa { flex: 0 1 170px; }

/* Barra do setor numa linha só em todas as abas */
@media (min-width: 961px) {
  .tabs-seg .tab { padding-left: 10px; padding-right: 10px; }
  .barra-campos { flex-wrap: nowrap; gap: 8px; flex: 0 1 auto; }
  .barra-campos #busca { flex: 0 1 140px; min-width: 110px; max-width: 140px; }
  .barra-campos #f-alerta { flex: 0 0 108px; }
  .barra-campos #f-empresa { flex: 0 1 160px; }
}
@media (min-width: 1100px) {
  .barra { flex-wrap: nowrap; }
  .tabs-seg { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
  .tabs-seg .tab { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .barra-campos { flex: 0 0 auto; }
  .barra-campos #busca { flex: 0 0 120px; min-width: 120px; max-width: 120px; }
  .barra-campos #f-empresa { flex: 0 0 150px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .barra { flex-wrap: wrap; }
  .barra-campos { flex: 1 1 100%; justify-content: flex-end; }
}

/* Foco por teclado igual em tudo, contorno dourado */
.btn:focus-visible, .choice:focus-visible, .input:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Texto curto de cabeçalho nunca justificado, evita buracos entre palavras */
.hero p, .hero .lead, .panel-head p, .moto-dica, .legenda-dias, .dica-linha p, .modal-in p, .comp-nota { text-align: left; }
.leg-f:first-child { padding-left: 6px; }
.leg-f:last-child:not(:has(.cel)) { padding-left: 12px; }
@media (max-width: 760px) { .filtros-bloco .legenda-dias > .leg-f:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; } }

/* Filtro sem ninguém fica apagado e não clicável */
.fev:disabled, .fev.zero { cursor: default; color: #9aa4b1; background: #f3f5f8; border-color: #e1e6ed; pointer-events: none; }
.fev:disabled b, .fev.zero b { color: #aab3bf; }

/* Rótulo centralizado na altura da informação, mesmo quando ela ocupa duas linhas ou mais */
.mc-linha { align-items: center; }
.mc-linha .mc-rot { align-self: center; }
.mc-corpo { display: grid; gap: 10px; }

/* Rodapé centralizado, texto balanceado e mais estreito, sem espaços abertos entre as palavras */
footer.foot p, .foot p { text-align: center; text-wrap: balance; max-width: 24ch; margin-left: auto; margin-right: auto; }
@media (min-width: 761px) { footer.foot p, .foot p { max-width: 40ch; } }
@media (max-width: 760px) { .check span, .check { text-align: left; hyphens: none; } }

/* Ponto de embarque, horário e bolinha, endereço inteiro e referência embaixo, sem cortar palavras */
.pt-b { display: block; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
.pt-h { font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-dot { margin: 0 7px; color: var(--gold); font-weight: 700; }
.pt-ref { color: var(--muted); font-size: 0.94em; margin-top: 1px; }

/* Botão pequeno para abrir o comprovante ao lado de Registrado */
.pg-cel { gap: 6px; align-items: center; }
.pg-cel:has(.pg-ver) { flex-direction: row; justify-content: center; }
.pg-ver { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c3cddb; background: #fff; color: var(--navy); display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.pg-ver svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-ver:hover { border-color: #cfa24a; background: #fff6e0; }
.pg.ok:hover { background: none; }
@media (max-width: 760px) { .pg-cel:has(.pg-ver) { flex-direction: column; } }
@media (min-width: 761px) {
  .pg-cel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .pg-cel > :first-child { grid-column: 2; }
  .pg-cel > .pg-ver { grid-column: 3; justify-self: start; margin-left: 4px; }
}

/* Olho sempre à direita do texto, também no celular, assim os meses novos ocupam só a altura do texto */
@media (max-width: 760px) {
  .pg-cel, .pg-cel:has(.pg-ver) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; flex-direction: row; }
  .pg-cel > :first-child { grid-column: 2; }
  .pg-cel > .pg-ver { grid-column: 3; justify-self: start; margin-left: 2px; }
  .pg-cel::before { grid-column: 1 / -1; }
}
.moto-dica:empty { display: none; }
.dica-linha:has(.moto-dica:empty) { margin-top: 12px; }
.dica-linha:has(.moto-dica:empty) .legenda-dias { margin-left: 0; }
@media (min-width: 761px) { .dica-linha:has(.moto-dica:empty) .legenda-dias { margin-left: 0; width: 100%; } .dica-linha:has(.moto-dica:empty) .filtro-ev { justify-content: flex-start; } }


/* Motorista, menu de downloads no topo, abas sozinhas, depois Filtros e Registros, cada um com a linha fina */
.menu-wrap { position: absolute; top: 14px; right: 18px; z-index: 30; }
.menu-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.menu-btn:hover { background: rgba(255, 255, 255, 0.18); }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-pop { position: absolute; top: 48px; right: 0; width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(23, 47, 74, 0.22); padding: 8px; }
.menu-t { margin: 4px 8px 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.menu-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 10px 10px; border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; }
.menu-item:hover { background: #fff6e0; }
.menu-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-flex { position: relative; }
.barra { margin-bottom: 4px; }
.grp-bloco { margin: 22px 2px 10px; }
.filtros-bloco { display: grid; gap: 10px; }
.filtros-bloco .input { width: 100%; }
.filtros-bloco .legenda-dias { margin: 0; }
.filtros-bloco .filtro-ev { margin: 0; }
@media (min-width: 761px) { .filtros-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .filtros-bloco .input { width: 260px; } }
.panel-head { padding-right: 54px; }
@media (max-width: 760px) { .menu-wrap { top: 12px; right: 18px; } .panel-head h1 { max-width: calc(100% - 4px); } }
.menu-wrap { z-index: 80; }
.pt-h { white-space: nowrap; }
.pt-l { display: inline-block; }
@media (max-width: 760px) { .menu-wrap { top: 8px; } }
@media (max-width: 760px) {
  .moto .panel-head h1 { font-size: 26px; padding-right: 48px; }
  .moto .mc-linha { grid-template-columns: 52px 1fr; font-size: 14.5px; gap: 6px; }
  .moto .mc-corpo { padding: 12px 12px; }
}

/* Filtros e Registros mais compactos, títulos menores e menos espaço em volta */
.grp-bloco { font-size: 11.5px; letter-spacing: 0.12em; margin: 14px 2px 6px; gap: 8px; }
.grp-bloco + .filtros-bloco { margin-top: 0; }
.filtros-bloco { gap: 6px; }
.filtros-bloco .input { height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.filtros-bloco .fev, .filtros-bloco .leg-f { height: 28px; min-height: 28px; font-size: 12.5px; }
.filtros-bloco .filtro-ev { gap: 6px; }
@media (max-width: 760px) {
  .filtros-bloco .legenda-dias .filtro-ev, .filtros-bloco .legenda-dias:not(:has(.filtro-ev)) { gap: 6px; }
  .filtros-bloco .legenda-dias .filtro-ev .fev, .filtros-bloco .legenda-dias > .leg-f { height: 28px; min-height: 28px; font-size: 12px; }
}
.barra { margin-bottom: 0; }

/* Alunos ativos, cartão fechado mais baixo, só nome, ponto de embarque e dias */
.lc-grupo .lc { padding: 10px 16px; gap: 6px 8px; }
.lc-grupo .lc .nome { line-height: 1.25; }
.lc-grupo .lc .pt { line-height: 1.3; }
.pt-ref { font-size: 0.9em; margin-top: 0; }
.moto .cel { height: 38px; }
@media (max-width: 760px) {
  .moto .lc:not(.head) { padding: 10px 14px; row-gap: 6px; }
  .moto .cel { height: 40px; padding-top: 14px; }
}

/* Linha dourada do título, mais fina, e no celular com 40px de folga de cada lado da tela */
.hero h1::after, .page-hero h1::after { height: 2px; }
@media (max-width: 760px) {
  .moto .hero h1::after, .moto .page-hero h1::after { width: calc(100vw - 80px); margin-left: 22px; margin-top: 12px; }
}
@media (max-width: 760px) { .hero-flex .panel-head { flex: 1 1 100%; min-width: 0; max-width: 100%; } .panel-head p { max-width: 100%; } }

/* Linha dourada do título, afinando suavemente para as pontas, mais grossa só no meio */
.moto .hero h1::after, .moto .page-hero h1::after {
  height: 3px; border-radius: 50%;
  background: linear-gradient(90deg, rgba(227, 195, 122, 0) 0%, #e3c37a 18%, #d1a12f 50%, #e3c37a 82%, rgba(227, 195, 122, 0) 100%);
}
@media (min-width: 761px) { .moto .hero h1::after, .moto .page-hero h1::after { width: 220px; } }

/* Linha dourada de borda a borda da tela, bem fina nas pontas e um pouco mais grossa no meio */
@media (max-width: 760px) {
  .moto .hero h1::after, .moto .page-hero h1::after {
    width: 100vw; max-width: 100vw; margin-left: -18px; height: 3px;
    background: linear-gradient(90deg, rgba(227, 195, 122, 0) 0%, rgba(227, 195, 122, 0.55) 12%, #d1a12f 50%, rgba(227, 195, 122, 0.55) 88%, rgba(227, 195, 122, 0) 100%);
  }
}
@media (min-width: 761px) { .moto .hero h1::after, .moto .page-hero h1::after { width: 640px; } }

/* Linha do título na mesma lógica dos divisores, 1px e dourada, esmaecendo nas duas pontas */
.moto .hero h1::after, .moto .page-hero h1::after {
  height: 1px; border-radius: 0; margin-top: 14px;
  background: linear-gradient(90deg, rgba(227, 195, 122, 0) 0%, #e3c37a 35%, #e3c37a 65%, rgba(227, 195, 122, 0) 100%);
}
@media (min-width: 761px) { .moto .hero h1::after, .moto .page-hero h1::after { width: 100%; max-width: 100%; } }

/* Linha dourada do título igual em todo o sistema, 1px, esmaecendo nas pontas, de borda a borda no celular */
.hero h1::after, .page-hero h1::after {
  height: 1px; border-radius: 0; margin-top: 14px; width: 100%; max-width: 100%;
  background: linear-gradient(90deg, rgba(227, 195, 122, 0) 0%, #e3c37a 35%, #e3c37a 65%, rgba(227, 195, 122, 0) 100%);
}
@media (max-width: 760px) { .hero h1::after, .page-hero h1::after { width: 100vw; max-width: 100vw; margin-left: -18px; } }


/* Setor, filtros em bloco próprio e menu no topo, como no motorista */
.filtros-setor { display: grid; gap: 8px; }
.filtros-setor .input { width: 100%; height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.filtros-setor .sel-wrap { width: 100%; }
@media (min-width: 761px) {
  .filtros-setor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .filtros-setor #busca { width: 300px; }
  .filtros-setor .sel-wrap, .filtros-setor select { width: auto; min-width: 170px; }
}
.hero-flex { position: relative; }
@media (max-width: 760px) { .hero-flex .stats-mini { width: 100%; } }

/* Menu discreto, só os três risquinhos no canto superior, sem caixa */
.menu-wrap { top: 8px; right: 12px; }
.menu-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.75); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.menu-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.menu-pop { top: 36px; }
.panel-head { padding-right: 0; }
@media (max-width: 760px) { .menu-wrap { top: 6px; right: 8px; } .moto .panel-head h1 { padding-right: 0; } }

/* Pagamentos, o texto e o olho formam uma unidade só, e a unidade fica centralizada na coluna do mês */
.pg-cel, .pg-cel:has(.pg-ver) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.pg-cel:has(.pg-ver) { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.pg-cel > :first-child, .pg-cel > .pg-ver { grid-column: auto; justify-self: auto; margin: 0; }
.pg-cel:has(.pg-ver)::before { display: none; }
@media (max-width: 760px) {
  .pg-cel { flex-direction: column; justify-content: flex-start; }
  .pg-cel::before { margin-bottom: 4px; }
  .pg-cel:has(.pg-ver) { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; justify-items: center; align-items: center; column-gap: 8px; }
  .pg-cel:has(.pg-ver)::before { display: block; grid-column: 1 / -1; }
  .pg-cel:has(.pg-ver) > :first-child { grid-column: 1; }
  .pg-cel:has(.pg-ver) > .pg-ver { grid-column: 2; }
}

/* Setor, o menu fica acima dos cartões de número, sem encostar */
@media (min-width: 761px) { .page-hero .hero-flex .stats-mini { margin-top: 26px; } }

/* Unidade única, texto e olho juntos, a unidade centralizada, rótulo do mês sempre na mesma altura */
.pg-cel, .pg-cel:has(.pg-ver), .pg-cel:has(.pg-un) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; grid-template-columns: none; }
.pg-un { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pg-un > .pg, .pg-un > .pg-ver { grid-column: auto; margin: 0; }
@media (max-width: 760px) {
  .pg-cel, .pg-cel:has(.pg-ver), .pg-cel:has(.pg-un) { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
  .pg-cel::before { display: block; margin-bottom: 6px; }
}
@media (max-width: 760px) { .pg-linha:not(.pg-head) { align-items: start; } .pg-cel { align-self: start; } }
@media (min-width: 761px) { .page-hero .hero-flex .stats-mini { margin-top: 40px; } }

/* Menu no canto superior da tela e painel sempre por cima das abas */
.page-hero { position: relative; z-index: 60; }
.menu-wrap { position: absolute; top: 4px; right: 6px; z-index: 300; }
.menu-pop { z-index: 300; right: 0; top: 34px; width: 224px; max-width: calc(100vw - 16px); }
.menu-btn { width: 30px; height: 30px; }
.menu-btn svg { width: 17px; height: 17px; }
@media (min-width: 761px) { .menu-wrap { top: 10px; right: 14px; } }

/* Painel do menu fixo na tela, nunca cortado pelo cabeçalho */
.menu-pop { position: fixed; top: 38px; right: 8px; left: auto; width: 224px; max-width: calc(100vw - 16px); z-index: 400; }
@media (min-width: 761px) { .menu-pop { top: 46px; right: 14px; } }

/* Título do formulário numa linha só */
body:not(.moto) .hero:not(.page-hero) h1 { font-size: clamp(21px, 6.3vw, 40px); max-width: none; white-space: nowrap; }

/* Menu ancorado no cabeçalho, no canto superior da tela, e sem hifenizar o texto do topo */
.page-hero .hero-flex { position: static; }
.page-hero { position: relative; }
.menu-wrap { top: 6px; right: 8px; }
@media (min-width: 761px) { .menu-wrap { top: 10px; right: 16px; } }
.hero p, .page-hero p, .panel-head p { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; }

/* O cabeçalho fica atrás das abas, só o menu fica por cima de tudo */
.page-hero { z-index: auto; }
/* Título do setor numa linha só no celular */
@media (max-width: 760px) { body:not(.moto) .page-hero h1 { font-size: clamp(21px, 6.3vw, 34px); white-space: nowrap; max-width: none; } }

/* Mesmo respiro entre um título de seção e o que vem embaixo dele, em todas as seções */
.grp, .grp-bloco { margin-bottom: 12px; }
.grp-bloco { margin-top: 18px; }
.filtros-bloco { margin-bottom: 4px; }

/* Um único respiro, acima e abaixo de cada título de seção, 22px */
.grp, .grp-bloco { margin-top: 22px; margin-bottom: 22px; }
.filtros-bloco { margin-bottom: 0; }
.filtros-bloco + .grp, .filtros-bloco + .grp-bloco { margin-top: 22px; }
.filtros-bloco, .filtros-bloco .filtro-ev, .filtros-bloco .legenda-dias { margin-bottom: 0 !important; padding-bottom: 0; }
.filtros-bloco .filtro-ev { margin-top: 0 !important; }
#lista { margin-top: 0 !important; }
#lista > .grp:first-child, #lista > .filtro-ev + .grp, #lista > .grp:first-of-type { margin-top: 22px !important; }

.filtros-setor + .tbl, .filtros-setor + #lista { margin-top: 18px; }

/* Conferência, a tabela começa com o mesmo respiro de 22px depois dos filtros */
.tbl#lista { margin-top: 22px !important; }

/* Conferência, sem a linha de títulos das colunas, cada linha já se explica sozinha */
.tbl#lista .tr.head { display: none; }
.tbl#lista { margin-top: 18px !important; }

/* Abas centralizadas dentro do cartão, no computador */
@media (min-width: 761px) { .barra .tabs-seg { justify-content: center; flex: 1 1 100%; } }

/* Motorista no computador, a página inteira centralizada, na largura original */
@media (min-width: 761px) {
  .moto .panel-head { text-align: center; padding-right: 0; flex: 1 1 100%; }
  .moto .panel-head h1, .moto .panel-head p { margin-left: auto; margin-right: auto; text-align: center; max-width: 100%; }
  .moto .hero h1::after, .moto .page-hero h1::after { margin-left: auto; margin-right: auto; width: 70%; }
  .moto .tabs-seg { justify-content: center; }
  .moto .filtros-bloco { justify-content: center; }
  .moto .filtros-bloco .input { width: 320px; }
  .moto .filtro-ev, .moto .legenda-dias { justify-content: center; }
  .moto .grp { justify-content: center; }
  .moto .grp::before { content: ""; flex: 1; height: 1px; margin-right: 4px; background: linear-gradient(270deg, #d3c08c, rgba(211, 192, 140, 0)); }
  .moto .grp-leve::before { background: linear-gradient(270deg, #cfd8e4, rgba(207, 216, 228, 0)); }
}

/* Títulos de seção voltam ao padrão, título à esquerda e o fio saindo dele */
@media (min-width: 761px) {
  .moto .grp { justify-content: flex-start; }
  .moto .grp::before, .moto .grp-leve::before { content: none; display: none; }
  /* O cartão das abas se ajusta às abas, sem a faixa branca vazia dos lados */
  .moto .barra { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
}

/* Motorista, as abas ficam soltas no fundo claro, sem cartão branco, e uma linha dourada fina separa o azul do claro */
.moto .page-hero { position: relative; }
.moto .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(209, 161, 47, 0) 0%, #d1a12f 20%, #d1a12f 80%, rgba(209, 161, 47, 0) 100%); pointer-events: none; }
.moto .barra { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 18px; position: static; width: auto; }
.moto .barra.card { background: transparent; box-shadow: none; }
@media (min-width: 761px) { .moto .barra { width: 100%; } .moto .tabs-seg { justify-content: center; } }


/* Motorista, abas de pasta no fundo do cabeçalho azul, a aba ativa se liga ao conteúdo claro */
:is(.moto, .pasta) .page-hero { padding-bottom: 0; }
:is(.moto, .pasta) .page-hero::after { display: none; }
:is(.moto, .pasta) .abas-pasta { margin-top: 22px; position: relative; }
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { display: flex; gap: 6px; padding: 0 2px; background: none; border: 0; box-shadow: none; flex-wrap: nowrap; justify-content: center; margin: 0; }
:is(.moto, .pasta) .abas-pasta .tab {
  flex: 1 1 0; max-width: 230px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px 11px; border: 0; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, 0.09);
  color: #c7d4e2; font: 600 14.5px var(--sans); box-shadow: none; position: relative; cursor: pointer;
  border-top: 2px solid transparent;
}
:is(.moto, .pasta) .abas-pasta .tab:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
:is(.moto, .pasta) .abas-pasta .tab .count { color: #e3c37a; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { background: var(--mist); color: var(--navy); border-top-color: var(--gold); padding-top: 14px; margin-bottom: -1px; z-index: 2; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] .count { color: var(--goldtxt); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; width: 14px; height: 14px; pointer-events: none; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -14px; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--mist) 14px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--mist) 14px); }
:is(.moto, .pasta) main.wrap { padding-top: 6px; }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta { margin-top: 16px; }
  :is(.moto, .pasta) .abas-pasta .tabs-seg { gap: 4px; padding: 0 4px; }
  :is(.moto, .pasta) .abas-pasta .tab { flex-direction: column; gap: 1px; font-size: 12.5px; padding: 9px 2px 8px; border-radius: 12px 12px 0 0; line-height: 1.15; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { padding-top: 11px; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { display: none; }
}

/* Abas de pasta mais fluidas, cantos bem arredondados, curva grande ligando ao conteúdo e troca suave */
:is(.moto, .pasta) .abas-pasta .tab { border-radius: 20px 20px 0 0; transition: background-color 0.22s ease, color 0.22s ease, padding 0.22s ease, border-color 0.22s ease; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-radius: 20px 20px 0 0; border-top-width: 2px; padding-top: 15px; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 22px; height: 22px; transition: opacity 0.22s ease; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -22px; background: radial-gradient(circle at 0 0, transparent 21.5px, var(--mist) 22px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -22px; background: radial-gradient(circle at 100% 0, transparent 21.5px, var(--mist) 22px); }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-radius: 16px 16px 0 0; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { display: block; width: 16px; height: 16px; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -16px; background: radial-gradient(circle at 0 0, transparent 15.5px, var(--mist) 16px); }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -16px; background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--mist) 16px); }
  :is(.moto, .pasta) .abas-pasta .tabs-seg { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { :is(.moto, .pasta) .abas-pasta .tab { transition: none; } }

/* Pasta mais baixa e sutil, a aba ativa tem a mesma altura das outras, só a cor muda */
:is(.moto, .pasta) .abas-pasta { margin-top: 16px; }
:is(.moto, .pasta) .abas-pasta .tab { padding: 9px 8px 8px; font-size: 14px; border-radius: 14px 14px 0 0; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { padding-top: 9px; border-radius: 14px 14px 0 0; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 14px; height: 14px; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -14px; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--mist) 14px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--mist) 14px); }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta { margin-top: 12px; }
  :is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { padding: 6px 2px 5px; border-radius: 12px 12px 0 0; font-size: 12.5px; line-height: 1.1; gap: 0; }
  :is(.moto, .pasta) .abas-pasta .tab .count { font-size: 11.5px; line-height: 1.1; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 12px; height: 12px; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--mist) 12px); }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--mist) 12px); }
  :is(.moto, .pasta) .abas-pasta .tabs-seg { padding: 0 14px; }
}

/* Curva de ligação maior e mais suave, e só do lado de fora nas abas das pontas, as duas na aba do meio */
:is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-radius: 18px 18px 0 0; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 24px; height: 24px; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -24px; background: radial-gradient(circle at 0 0, transparent 23px, var(--mist) 24.5px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -24px; background: radial-gradient(circle at 100% 0, transparent 23px, var(--mist) 24.5px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::after { display: none; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::before { display: none; }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-radius: 15px 15px 0 0; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 18px; height: 18px; }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -18px; background: radial-gradient(circle at 0 0, transparent 17px, var(--mist) 18.5px); }
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -18px; background: radial-gradient(circle at 100% 0, transparent 17px, var(--mist) 18.5px); }
  :is(.moto, .pasta) .abas-pasta .tabs-seg { padding: 0 20px; }
}

/* Curvas de ligação em todas as abas, no tom da própria aba, e as da aba ativa ficam por cima das vizinhas */
:is(.moto, .pasta) .abas-pasta .tab { --tc: #27405d; background: var(--tc); z-index: 1; transition: color 0.22s ease, border-color 0.22s ease, padding 0.22s ease; }
:is(.moto, .pasta) .abas-pasta .tab:hover { --tc: #314f70; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { --tc: var(--mist); z-index: 3; }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab::after,
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after {
  content: ""; display: block; position: absolute; bottom: 0; width: 24px; height: 24px; pointer-events: none;
}
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -24px; right: auto; background: radial-gradient(circle at 0 0, transparent 23px, var(--tc) 24.5px); }
:is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -24px; left: auto; background: radial-gradient(circle at 100% 0, transparent 23px, var(--tc) 24.5px); }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::after { display: none; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::before { display: block; }
:is(.moto, .pasta) .abas-pasta .tab:first-child:not([aria-selected="true"])::before, :is(.moto, .pasta) .abas-pasta .tab:last-child:not([aria-selected="true"])::after { display: none; }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab::after,
  :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: 18px; height: 18px; }
  :is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: -18px; background: radial-gradient(circle at 0 0, transparent 17px, var(--tc) 18.5px); }
  :is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: -18px; background: radial-gradient(circle at 100% 0, transparent 17px, var(--tc) 18.5px); }
}

/* Curvas dos dois lados em todas as abas, inclusive nas pontas da fileira */
:is(.moto, .pasta) .abas-pasta .tab:first-child::before, :is(.moto, .pasta) .abas-pasta .tab:last-child::after,
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::after,
:is(.moto, .pasta) .abas-pasta .tab:first-child:not([aria-selected="true"])::before, :is(.moto, .pasta) .abas-pasta .tab:last-child:not([aria-selected="true"])::after { display: block; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::before { display: block; }

/* Fileira de pastas contínua, sem vão entre as abas, assim as curvas se encontram sem emenda */
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { gap: 0; }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { background: radial-gradient(circle at 0 0, transparent 23.4px, var(--tc) 24px); }
:is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { background: radial-gradient(circle at 100% 0, transparent 23.4px, var(--tc) 24px); }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { background: radial-gradient(circle at 0 0, transparent 17.4px, var(--tc) 18px); }
  :is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { background: radial-gradient(circle at 100% 0, transparent 17.4px, var(--tc) 18px); }
}

/* Pasta da esquerda só tem curva na esquerda, pasta da direita só na direita, a do meio nas duas */
:is(.moto, .pasta) .abas-pasta .tab:first-child::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::after,
:is(.moto, .pasta) .abas-pasta .tab:last-child::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::before { display: none; }
:is(.moto, .pasta) .abas-pasta .tab:first-child::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:first-child::before,
:is(.moto, .pasta) .abas-pasta .tab:last-child::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]:last-child::after { display: block; }

/* Cada pasta tem a sua própria margem para as curvas, assim a curva de qualquer pasta fica visível, selecionada ou não */
:is(.moto, .pasta) .abas-pasta { --fl: 24px; }
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { gap: 0; padding: 0; }
:is(.moto, .pasta) .abas-pasta .tab { margin: 0 var(--fl); z-index: 1; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { z-index: 3; }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab::after,
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: var(--fl); height: var(--fl); }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: calc(var(--fl) * -1); background: radial-gradient(circle at 0 0, transparent calc(var(--fl) - 0.6px), var(--tc) var(--fl)); }
:is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: calc(var(--fl) * -1); background: radial-gradient(circle at 100% 0, transparent calc(var(--fl) - 0.6px), var(--tc) var(--fl)); }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta { --fl: 12px; padding-left: 4px; padding-right: 4px; }
  :is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-radius: 14px 14px 0 0; }
}

/* Pastas encostadas uma na outra, sem afastamento, as curvas ficam sobre a vizinha */
:is(.moto, .pasta) .abas-pasta { --fl: 24px; padding-left: 0; padding-right: 0; }
:is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { margin: 0; }
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { gap: 0; padding: 0 var(--fl); }
@media (max-width: 760px) { :is(.moto, .pasta) .abas-pasta { --fl: 18px; padding-left: 0; padding-right: 0; } :is(.moto, .pasta) .abas-pasta .tabs-seg { padding: 0 var(--fl); } }

/* Pastas separadas por 1px, e a curva da pasta do meio ganha uma borda azul quase imperceptível, só para dar contraste */
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { gap: 1px; }
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(circle at 0 0, transparent calc(var(--fl) - 1.6px), #1c3350 calc(var(--fl) - 1.6px), #1c3350 calc(var(--fl) - 0.6px), var(--tc) calc(var(--fl) - 0.6px));
}
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(circle at 100% 0, transparent calc(var(--fl) - 1.6px), #1c3350 calc(var(--fl) - 1.6px), #1c3350 calc(var(--fl) - 0.6px), var(--tc) calc(var(--fl) - 0.6px));
}
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"]) { z-index: 2; }

/* WhatsApp embaixo dos dados do aluno, como no cartão das novidades */
.det-pe { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* Texto dos itens do menu sempre em uma linha, o painel cresce para caber */
.menu-pop { width: max-content; min-width: 224px; max-width: calc(100vw - 16px); }
.menu-item { white-space: nowrap; }

/* Linha de 1px, dourado claro, no topo da aba aberta */
:is(.moto, .pasta) .abas-pasta .tab, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-top-width: 1px; }
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"] { border-top-color: #e3c37a; }

/* WhatsApp no cartão fechado, só o símbolo, ao lado do nome */
.lc .nome.duas { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.wa-solo { display: inline-flex; flex: none; }
.wa-solo .wa { width: 30px; height: 30px; justify-content: center; border-radius: 50%; }
.wa-solo .wa:hover { background: #e8f5ec; text-decoration: none; }
.wa-solo .wa-ico { width: 20px; height: 20px; }
.lc .nome.duas { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; }
.lc .nome.duas .n1 { min-width: 0; }

/* Ver mais dados, o texto fica sempre no mesmo lugar, à direita da linha do WhatsApp, e vira "Ver menos" ao abrir */
.compacto .mc-pe { display: block; position: relative; }
.compacto .mc-pe > .wa { position: absolute; left: 0; top: 6px; min-height: 0; z-index: 1; }
.compacto .mais { margin: 0; padding: 0; border: 0; }
.compacto .mais summary { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 36px; cursor: pointer; list-style: none; }
.compacto .mais summary::-webkit-details-marker { display: none; }
.compacto .mais summary::before { content: "▸"; font-size: 12px; order: 2; }
.compacto .mais[open] summary::before { content: "▾"; }
.compacto .mais summary .vn { display: none; }
.compacto .mais[open] summary .vm { display: none; }
.compacto .mais[open] summary .vn { display: inline; }
.compacto .mc-pe > .wa { top: 0; height: 36px; display: inline-flex; align-items: center; }
.compacto .mais summary { height: 36px; line-height: 1; }
.compacto .mais summary::before { line-height: 1; transform: translateY(-0.5px); }
.compacto .mc-pe > .wa { top: 6px; }
.compacto .mais[open] { padding-top: 0; flex: none; order: 0; }

/* Títulos de seção alinhados exatamente na borda esquerda dos cartões e dos filtros */
.grp, .grp-bloco, .grp-leve, .grp-emp { margin-left: 0; margin-right: 0; }


/* Título da empresa no motorista, a logo no tamanho do texto, só como um detalhe a mais */
.moto .titulo-logo { line-height: 1; }
.moto .titulo-logo img { display: block; height: 40px; width: auto; max-width: 70%; margin: 2px 0 0; }
@media (min-width: 761px) { .moto .titulo-logo img { height: 46px; margin-left: auto; margin-right: auto; } }
.moto .nome-pavanatto { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: #e6a672; text-shadow: none; letter-spacing: 0.01em; font-size: clamp(34px, 9vw, 44px); }
.moto .nome-pavanatto { font-size: clamp(40px, 11vw, 52px); line-height: 1.05; }
.moto .panel-head h1.nome-pavanatto { font-size: clamp(40px, 11vw, 52px); line-height: 1.05; }
/* O símbolo do WhatsApp acompanha o nome e as etiquetas, na mesma linha de quebra */
.lc .nome.duas .n1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lc .nome.duas .n1 .wa-solo { margin-left: 2px; }

/* Curva de ligação mais suave, uma queda longa e elíptica, que começa perto do topo da aba e termina na base */
:is(.moto, .pasta) .abas-pasta { --flx: 40px; --fly: 34px; --fl: 40px; }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab::after,
:is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { width: var(--flx); height: var(--fly); }
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { left: calc(var(--flx) * -1); background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 97%, var(--tc) 100%); }
:is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { right: calc(var(--flx) * -1); background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 97%, var(--tc) 100%); }
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 95%, #1c3350 95%, #1c3350 97.5%, var(--tc) 97.5%);
}
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 95%, #1c3350 95%, #1c3350 97.5%, var(--tc) 97.5%);
}
:is(.moto, .pasta) .abas-pasta .tabs-seg, :is(.moto, .pasta) .abas-pasta .tabs-moto { padding: 0 var(--flx); }
@media (max-width: 760px) {
  :is(.moto, .pasta) .abas-pasta { --flx: 26px; --fly: 28px; --fl: 26px; }
  :is(.moto, .pasta) .abas-pasta .tabs-seg { padding: 0 var(--flx); }
}

/* Sem o fio claro na borda da curva, a elipse é um pouco mais larga que a caixa, assim a borda do topo fica transparente */
:is(.moto, .pasta) .abas-pasta .tab::before, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::before { background: radial-gradient(ellipse calc(var(--flx) + 3px) var(--fly) at 0 0, transparent 98%, var(--tc) 100%); }
:is(.moto, .pasta) .abas-pasta .tab::after, :is(.moto, .pasta) .abas-pasta .tab[aria-selected="true"]::after { background: radial-gradient(ellipse calc(var(--flx) + 3px) var(--fly) at 100% 0, transparent 98%, var(--tc) 100%); }
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse calc(var(--flx) + 3px) var(--fly) at 0 0, transparent 95%, #1c3350 95%, #1c3350 97.5%, var(--tc) 97.5%);
}
:is(.moto, .pasta) .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse calc(var(--flx) + 3px) var(--fly) at 100% 0, transparent 95%, #1c3350 95%, #1c3350 97.5%, var(--tc) 97.5%);
}


/* Conferência, as seis abas em uma faixa que rola de lado quando não cabe, a aba aberta no meio e as curvas nunca cortadas */
.pasta .abas-pasta { --flx: 22px; --fly: 26px; --fl: 22px; }
.pasta .abas-pasta .tabs-seg { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: safe center; scrollbar-width: none; padding: 0 var(--flx); gap: 1px; -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; margin: 0; }
.pasta .abas-pasta .tabs-seg::-webkit-scrollbar { display: none; }
.pasta .abas-pasta .tab { flex: 0 0 auto; white-space: nowrap; padding-left: calc(var(--flx) - 2px); padding-right: calc(var(--flx) - 2px); max-width: none; }
.pasta .abas-pasta .tab:first-child { padding-left: 14px; }
.pasta .abas-pasta .tab:last-child { padding-right: 14px; }
@media (max-width: 760px) {
  .pasta .abas-pasta { --flx: 22px; --fly: 26px; --fl: 22px; }
  .pasta .abas-pasta .tab { padding-left: 20px; padding-right: 20px; flex-direction: row; gap: 6px; font-size: 13px; }
  .pasta .abas-pasta .tab:first-child { padding-left: 14px; }
  .pasta .abas-pasta .tab:last-child { padding-right: 14px; }
  .pasta .abas-pasta .tabs-seg:has(.tab:nth-child(6)) { margin: 0; padding: 0 var(--flx); }
}
@media (max-width: 760px) {
  .pasta .abas-pasta .tab, .pasta .abas-pasta .tab[aria-selected="true"] { flex-direction: row; gap: 6px; padding: 8px 20px 7px; line-height: 1.2; }
  .pasta .abas-pasta .tab:first-child, .pasta .abas-pasta .tab[aria-selected="true"]:first-child { padding-left: 14px; }
  .pasta .abas-pasta .tab:last-child, .pasta .abas-pasta .tab[aria-selected="true"]:last-child { padding-right: 14px; }
}

/* Conferência no computador, a mesma curva longa do motorista, e as abas com folga para o texto nunca ficar sob a curva da vizinha */
@media (min-width: 761px) {
  .pasta .abas-pasta { --flx: 40px; --fly: 34px; --fl: 40px; }
  .pasta .abas-pasta .tab, .pasta .abas-pasta .tab[aria-selected="true"] { padding-left: 30px; padding-right: 30px; }
  .pasta .abas-pasta .tab:first-child, .pasta .abas-pasta .tab[aria-selected="true"]:first-child { padding-left: 22px; }
  .pasta .abas-pasta .tab:last-child, .pasta .abas-pasta .tab[aria-selected="true"]:last-child { padding-right: 22px; }
}

/* Curva volta ao formato exato, com início vertical junto à aba. A emenda é fechada com 1px de sobreposição na própria cor da aba. */
.pasta .abas-pasta .tab::before, .pasta .abas-pasta .tab[aria-selected="true"]::before {
  width: calc(var(--flx) + 1px); background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 99%, var(--tc) 100%);
}
.pasta .abas-pasta .tab::after, .pasta .abas-pasta .tab[aria-selected="true"]::after {
  width: calc(var(--flx) + 1px); background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 99%, var(--tc) 100%);
}
.pasta .abas-pasta .tab::after, .pasta .abas-pasta .tab[aria-selected="true"]::after { right: calc(var(--flx) * -1); }
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}

/* Geometria única das pastas. A curva de ligação começa exatamente onde o canto arredondado termina, sem fio reto no topo. */
.pasta .abas-pasta { --th: 38px; --r: 12px; --fly: calc(var(--th) - var(--r)); }
.pasta .abas-pasta .tab, .pasta .abas-pasta .tab[aria-selected="true"] {
  height: var(--th); box-sizing: border-box; border-radius: var(--r) var(--r) 0 0; padding-top: 0; padding-bottom: 0; align-items: center;
}
.pasta .abas-pasta .tab::before, .pasta .abas-pasta .tab[aria-selected="true"]::before { width: var(--flx); height: var(--fly); background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 99%, var(--tc) 100%); }
.pasta .abas-pasta .tab::after, .pasta .abas-pasta .tab[aria-selected="true"]::after { width: var(--flx); height: var(--fly); background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 99%, var(--tc) 100%); }
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
@media (max-width: 760px) {
  .pasta .abas-pasta { --th: 38px; --r: 12px; --fly: calc(var(--th) - var(--r)); }
}

/* Curva mais suave, mais larga que alta, assim ela cai devagar e a ponta não vira um bico */
@media (min-width: 761px) {
  .pasta .abas-pasta { --flx: 52px; --fl: 52px; }
  .pasta .abas-pasta .tab, .pasta .abas-pasta .tab[aria-selected="true"] { padding-left: 36px; padding-right: 36px; }
  .pasta .abas-pasta .tab:first-child, .pasta .abas-pasta .tab[aria-selected="true"]:first-child { padding-left: 24px; }
  .pasta .abas-pasta .tab:last-child, .pasta .abas-pasta .tab[aria-selected="true"]:last-child { padding-right: 24px; }
}
@media (max-width: 760px) {
  .pasta .abas-pasta { --flx: 34px; --fl: 34px; --th: 38px; --r: 12px; }
  .pasta .abas-pasta .tabs-seg { padding: 0 var(--flx); }
}

/* Motorista, a curva começa onde o canto arredondado termina, sem o trecho reto no topo. Altura e largura da curva ficam as mesmas de antes. */
/* Curva volta ao formato exato, com início vertical junto à aba. A emenda é fechada com 1px de sobreposição na própria cor da aba. */
.moto .abas-pasta .tab::before, .moto .abas-pasta .tab[aria-selected="true"]::before {
  width: calc(var(--flx) + 1px); background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 99%, var(--tc) 100%);
}
.moto .abas-pasta .tab::after, .moto .abas-pasta .tab[aria-selected="true"]::after {
  width: calc(var(--flx) + 1px); background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 99%, var(--tc) 100%);
}
.moto .abas-pasta .tab::after, .moto .abas-pasta .tab[aria-selected="true"]::after { right: calc(var(--flx) * -1); }
.moto .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
.moto .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}

/* Geometria única das pastas. A curva de ligação começa exatamente onde o canto arredondado termina, sem fio reto no topo. */
.moto .abas-pasta { --th: 38px; --r: 12px; --fly: calc(var(--th) - var(--r)); }
.moto .abas-pasta .tab, .moto .abas-pasta .tab[aria-selected="true"] {
  height: var(--th); box-sizing: border-box; border-radius: var(--r) var(--r) 0 0; padding-top: 0; padding-bottom: 0; align-items: center;
}
.moto .abas-pasta .tab::before, .moto .abas-pasta .tab[aria-selected="true"]::before { width: var(--flx); height: var(--fly); background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 99%, var(--tc) 100%); }
.moto .abas-pasta .tab::after, .moto .abas-pasta .tab[aria-selected="true"]::after { width: var(--flx); height: var(--fly); background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 99%, var(--tc) 100%); }
.moto .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 0 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
.moto .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: radial-gradient(ellipse var(--flx) var(--fly) at 100% 0, transparent 96%, #1c3350 96%, #1c3350 98.5%, var(--tc) 98.5%);
}
@media (max-width: 760px) {
  .moto .abas-pasta { --th: 38px; --r: 12px; --fly: calc(var(--th) - var(--r)); }
}

.moto .abas-pasta { --th: 35px; --r: 12px; --flx: 40px; --fl: 40px; --fly: calc(var(--th) - var(--r)); }
@media (max-width: 760px) { .moto .abas-pasta { --th: 38.4px; --r: 12px; --flx: 26px; --fl: 26px; --fly: calc(var(--th) - var(--r)); } }

/* Conferência, a curva de ligação é uma forma vetorial usada como máscara, assim a borda é suavizada de verdade em qualquer tela.
   A cor continua vindo de --tc, então vale para a aba selecionada, as inativas e o hover. */
.pasta .abas-pasta .tab::before, .pasta .abas-pasta .tab[aria-selected="true"]::before,
.pasta .abas-pasta .tab::after, .pasta .abas-pasta .tab[aria-selected="true"]::after {
  width: calc(var(--flx) + 1px) !important; height: var(--fly) !important;
  background: var(--tc) !important; background-size: 100% 100% !important;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0;
}
.pasta .abas-pasta .tab::before, .pasta .abas-pasta .tab[aria-selected="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0V100H0A100 100 0 0 0 100 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0V100H0A100 100 0 0 0 100 0Z'/%3E%3C/svg%3E");
}
.pasta .abas-pasta .tab::after, .pasta .abas-pasta .tab[aria-selected="true"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V100H100A100 100 0 0 1 0 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0V100H100A100 100 0 0 1 0 0Z'/%3E%3C/svg%3E");
}
/* Contorno escuro e fino na curva da aba do meio quando não está selecionada, também vetorial */
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100A100 100 0 0 0 100 0' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, var(--tc) !important;
}
.pasta .abas-pasta .tab:not(:first-child):not(:last-child):not([aria-selected="true"])::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100A100 100 0 0 1 0 0' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, var(--tc) !important;
}

/* =====================================================================
   Conferência, as abas com a lateral em um único desenho em S.
   O canto de cima e a curva de ligação são a mesma curva, que sai do topo da aba
   com a tangente horizontal, desce sem nenhum trecho reto e chega horizontal na base.
   --a é quanto o S entra para dentro da aba, --flx quanto sai para fora.
   ===================================================================== */
.pasta .abas-pasta { --a: 14px; --flx: 44px; --fl: 44px; --E: calc(var(--a) + var(--flx)); }
@media (max-width: 760px) { .pasta .abas-pasta { --a: 10px; --flx: 30px; --fl: 30px; --E: calc(var(--a) + var(--flx)); } }

body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab::before {
  content: "" !important; display: block !important; position: absolute !important; z-index: -1 !important;
  left: calc(var(--flx) * -1) !important; right: calc(var(--flx) * -1) !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important;
  background: var(--tc) !important; border-radius: 0 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  -webkit-mask-size: var(--E) 100%, var(--E) 100%, calc(100% - 2 * var(--E) + 2px) 100% !important; mask-size: var(--E) 100%, var(--E) 100%, calc(100% - 2 * var(--E) + 2px) 100% !important;
  -webkit-mask-position: left top, right top, center top !important; mask-position: left top, right top, center top !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
/* Contorno escuro e fino nas abas do meio quando não estão abertas */
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left top / var(--E) 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right top / var(--E) 100% no-repeat,
    var(--tc) !important;
}
/* Primeira aba só tem o S do lado de fora, o lado de dentro é uma parede com o canto de cima arredondado */
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:first-child::before {
  right: 0 !important; border-top-right-radius: var(--r) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  -webkit-mask-size: var(--E) 100%, calc(100% - var(--E) + 1px) 100% !important; mask-size: var(--E) 100%, calc(100% - var(--E) + 1px) 100% !important;
  -webkit-mask-position: left top, right top !important; mask-position: left top, right top !important;
}
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:last-child::before {
  left: 0 !important; border-top-left-radius: var(--r) !important;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E") !important;
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: calc(100% - var(--E) + 1px) 100%, var(--E) 100% !important; mask-size: calc(100% - var(--E) + 1px) 100%, var(--E) 100% !important;
  -webkit-mask-position: left top, right top !important; mask-position: left top, right top !important;
}
/* O segundo elemento deixa de ser a curva e vira o fio dourado do topo da aba aberta */
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab::after { display: none !important; }
body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab[aria-selected="true"]::after {
  content: "" !important; display: block !important; position: absolute !important; z-index: 1 !important; top: 0 !important; bottom: auto !important; height: 1px !important; width: auto !important;
  left: calc(var(--a) + 6px) !important; right: calc(var(--a) + 6px) !important;
  background: linear-gradient(90deg, rgba(227, 195, 122, 0), #e3c37a 16px, #e3c37a calc(100% - 16px), rgba(227, 195, 122, 0)) !important;
  -webkit-mask: none !important; mask: none !important; border-radius: 0 !important;
}

/* Celular, o S tem a cauda de baixo mais longa e suave, e um pouco mais de largura, para a ponta não virar bico */
@media (max-width: 760px) {
  .pasta .abas-pasta { --a: 12px; --flx: 36px; --fl: 36px; --E: calc(var(--a) + var(--flx)); }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C62 0 62 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C62 0 62 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C62 0 62 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C62 0 62 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C62 0 62 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C62 0 62 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:last-child::before {
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C62 0 62 100 100 100H0Z'/%3E%3C/svg%3E") !important;
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C62 0 62 100 100 100H0Z'/%3E%3C/svg%3E") !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C62 0 62 100 0 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left top / var(--E) 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C62 0 62 100 100 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right top / var(--E) 100% no-repeat,
      var(--tc) !important;
  }
}

/* Conferência, o contêiner das abas é reto. Ele ainda tinha as pontas de pílula do primeiro desenho, e como corta o que passa dos limites,
   recortava o cantinho de baixo da curva da primeira e da última aba, deixando uma ponta escura. */
.pasta .abas-pasta .tabs-seg, .pasta .abas-pasta .tabs-moto { border-radius: 0 !important; }

/* Celular, junção das abas simétrica e mais curta, os dois lados iguais */
@media (max-width: 760px) {
  .pasta .abas-pasta { --a: 8px; --flx: 22px; --fl: 22px; --E: calc(var(--a) + var(--flx)); }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:first-child::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100H100Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000) !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:last-child::before {
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E") !important;
    mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100H0Z'/%3E%3C/svg%3E") !important;
  }
  body.pasta.pasta.pasta .abas-pasta.abas-pasta .tab.tab:not(:first-child):not(:last-child):not([aria-selected="true"])::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0C50 0 50 100 0 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left top / var(--E) 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0C50 0 50 100 100 100' fill='none' stroke='%231c3350' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right top / var(--E) 100% no-repeat,
      var(--tc) !important;
  }
}

/* Motorista com o mesmo desenho de abas da conferência. A forma (o S, o contêiner reto, a junção do celular) vem das regras .pasta.
   Aqui só fica o que é do motorista: três abas de largura igual, nome da aba com o número embaixo no celular, altura própria. */
body.moto.pasta .abas-pasta.abas-pasta .tab.tab { flex: 1 1 0; min-width: 0; max-width: 230px; white-space: normal; padding-left: 8px; padding-right: 8px; }
body.moto.pasta .abas-pasta.abas-pasta .tab.tab:first-child, body.moto.pasta .abas-pasta.abas-pasta .tab.tab:last-child { padding-left: 8px; padding-right: 8px; }
body.moto.pasta .abas-pasta .tabs-seg { justify-content: center; }
@media (max-width: 760px) {
  body.moto.pasta .abas-pasta.abas-pasta .tab.tab, body.moto.pasta .abas-pasta.abas-pasta .tab.tab[aria-selected="true"] {
    flex: 1 1 0; max-width: none; flex-direction: column; gap: 1px; padding: 0 2px; line-height: 1.15; font-size: 12.5px;
  }
  body.moto.pasta .abas-pasta.abas-pasta .tab.tab:first-child, body.moto.pasta .abas-pasta.abas-pasta .tab.tab:last-child,
  body.moto.pasta .abas-pasta.abas-pasta .tab.tab[aria-selected="true"]:first-child, body.moto.pasta .abas-pasta.abas-pasta .tab.tab[aria-selected="true"]:last-child { padding-left: 2px; padding-right: 2px; }
}

/* Pavanatto, a marca antes do nome, na altura das letras, e o nome no laranja da marca, um pouco mais suave */
.moto .panel-head h1.nome-pavanatto { color: #e96f55; }
.moto .panel-head h1.com-marca { display: flex; align-items: center; gap: 0.3em; }
.moto .panel-head h1.com-marca .marca-antes { height: 0.78em; width: auto; flex: none; display: block; }
@media (min-width: 761px) { .moto .panel-head h1.com-marca { justify-content: center; } }
.moto .panel-head h1.com-marca { display: block; }
.moto .panel-head h1.com-marca .nome-linha { display: inline-flex; align-items: center; gap: 0.3em; }
@media (min-width: 761px) { .moto .panel-head h1.com-marca { text-align: center; } }
.moto .panel-head h1.nome-pavanatto { color: #fff; }

/* Checagem no resumo da lista, o texto do alerta em vermelho como no cartão aberto, e "Nenhum alerta" em verde */
.tr .c-chk .chip.c-warn, .tr .c-chk .chip.c-danger { color: #c0392b; }
.tr .c-chk .chip.c-ok { color: #1f7a43; }

/* O título do cabeçalho fica acima da camada de brilho do fundo, em branco puro de ponta a ponta */
.page-hero .panel-head { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }

/* Cartões de número do cabeçalho na identidade da página, igual aos cartões das listas: fundo branco, barra lateral, número em marinho */
.hero-flex .stats-mini { gap: 10px; }
.hero-flex .stat-mini {
  position: relative; z-index: 1; width: 176px; min-height: 0; height: auto; padding: 11px 16px 12px 20px; gap: 2px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;
  background: #fff; border: 1px solid #dbe4ee; border-left: 4px solid var(--gold); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 47, 74, 0.08), 0 8px 22px rgba(5, 14, 24, 0.28);
}
.hero-flex .stat-mini.t-amber { border-left-color: #c0392b; }
.hero-flex .stat-mini .n { order: 2; font-family: var(--sans); font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--navy); }
.hero-flex .stat-mini .l { order: 1; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.hero-flex .stat-mini.t-amber .n { color: #c0392b; }
@media (max-width: 480px) {
  .hero-flex .stat-mini { width: calc(50% - 6px); padding: 9px 12px 10px 16px; }
  .hero-flex .stat-mini .n { font-size: 26px; }
  .hero-flex .stat-mini .l { white-space: normal; min-height: 0; font-size: 10.5px; letter-spacing: 0.05em; }
}
@media (min-width: 481px) { .hero-flex .stat-mini { width: 214px; } }

/* Cartões de número menores, no branco gelo do site, só do tamanho do que mostram */
.hero-flex .stat-mini {
  width: auto; min-width: 0; padding: 7px 14px 8px 16px; gap: 0; background: var(--mist);
  border: 1px solid #dbe4ee; border-left: 4px solid var(--gold); border-radius: 10px; box-shadow: 0 4px 14px rgba(5, 14, 24, 0.22);
}
.hero-flex .stat-mini.t-amber { border-left-color: #c0392b; }
.hero-flex .stat-mini .n { font-size: 22px; line-height: 1.1; }
.hero-flex .stat-mini .l { font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.2; }
.hero-flex .stats-mini { gap: 8px; flex-wrap: nowrap; }
@media (min-width: 481px) { .hero-flex .stat-mini { width: auto; } }
@media (max-width: 480px) {
  .hero-flex .stat-mini { width: auto; flex: 1 1 0; padding: 6px 10px 7px 12px; }
  .hero-flex .stat-mini .n { font-size: 20px; }
  .hero-flex .stat-mini .l { font-size: 9.5px; letter-spacing: 0.04em; }
}

/* Cartões de número, o número à esquerda e o texto à direita, alinhados ao centro da altura */
.hero-flex .stat-mini { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 14px 8px 14px; }
.hero-flex .stat-mini .n { order: 0; font-size: 26px; line-height: 1; flex: none; }
.hero-flex .stat-mini .l { order: 1; line-height: 1.2; }
@media (max-width: 480px) {
  .hero-flex .stat-mini { gap: 8px; padding: 7px 10px 7px 12px; }
  .hero-flex .stat-mini .n { font-size: 22px; }
}

/* Conferência no computador, os cartões descem até que o centro deles fique exatamente na linha dourada do título.
   A barra azul ganha altura para os cartões caberem sem encostar nas abas. */
@media (min-width: 861px) {
  .pasta .hero-flex .stats-mini { transform: translateY(calc(50% - 0.5px)); }
  .pasta .abas-pasta { margin-top: 46px; }
}

/* Conferência, a mesma letra do nome da Pavanatto (Cormorant Garamond) no semestre, no título e nos dois cartões de número */
body.pasta:not(.moto) .page-hero .kicker,
body.pasta:not(.moto) .page-hero h1,
body.pasta:not(.moto) .hero-flex .stat-mini .n,
body.pasta:not(.moto) .hero-flex .stat-mini .l { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
body.pasta:not(.moto) .page-hero .kicker { font-size: 14px; letter-spacing: 0.16em; }
body.pasta:not(.moto) .page-hero h1 { font-size: clamp(34px, 4.6vw, 46px); line-height: 1.05; letter-spacing: 0.005em; }
body.pasta:not(.moto) .hero-flex .stat-mini .n { font-size: 32px; line-height: 0.9; }
body.pasta:not(.moto) .hero-flex .stat-mini .l { font-size: 13.5px; letter-spacing: 0.06em; font-weight: 700; }
@media (max-width: 760px) {
  body.pasta:not(.moto) .page-hero h1 { font-size: clamp(27px, 8.2vw, 34px); }
}
@media (max-width: 480px) {
  body.pasta:not(.moto) .hero-flex .stat-mini .n { font-size: 28px; }
  body.pasta:not(.moto) .hero-flex .stat-mini .l { font-size: 12px; }
}

/* Algarismos alinhados na linha (o estilo antigo desce o 9 e deixa o 1 parecido com um I) e cartões um pouco mais enxutos */
body.pasta:not(.moto) .page-hero .kicker,
body.pasta:not(.moto) .hero-flex .stat-mini .n { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
body.pasta:not(.moto) .hero-flex .stat-mini .n { font-size: 30px; }
body.pasta:not(.moto) .hero-flex .stat-mini .l { font-size: 12.5px; letter-spacing: 0.04em; }
@media (min-width: 861px) and (max-width: 1100px) {
  body.pasta:not(.moto) .page-hero h1 { font-size: 38px; }
}
/* O alinhamento com a linha dourada só vale quando os cartões cabem ao lado do título */
@media (min-width: 861px) and (max-width: 899px) {
  .pasta .hero-flex .stats-mini { transform: none; }
  .pasta .abas-pasta { margin-top: 22px; }
}
/* Texto dos cartões de número no azul forte do fundo do cabeçalho */
.hero-flex .stat-mini .l, body.pasta:not(.moto) .hero-flex .stat-mini .l { color: var(--navy); }
/* Os textos dos cartões voltam à letra original da página (Inter), só os números ficam na Cormorant Garamond */
body.pasta:not(.moto) .hero-flex .stat-mini .l { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; }
@media (max-width: 480px) { body.pasta:not(.moto) .hero-flex .stat-mini .l { font-size: 10.5px; letter-spacing: 0.05em; } }


/* Formulário, a orientação sobe para o topo e o cartão branco abre direto com a pergunta */
.hero-texto { margin: 16px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: #eaf2fa; text-align: left; hyphens: none; text-wrap: pretty; }
.hero-texto[hidden] { display: none; }
.form-card form > .step-label:first-child { margin-top: 0; }
@media (max-width: 760px) { .hero-texto { font-size: 15px; margin-top: 14px; } }

/* Tela de entrada: só o cartão de login, centralizado */
.login-page { grid-template-rows: 1fr; }

/* Entrada na identidade do sistema, fundo do topo dos outros ambientes e linha dourada fina sob o título */
.login-page {
  background:
    radial-gradient(circle at 6% 118%, rgba(47, 93, 138, 0.6), transparent 52%),
    radial-gradient(circle at 96% -12%, rgba(47, 93, 138, 0.4), transparent 46%),
    linear-gradient(135deg, #0e2033, #172f4a) fixed;
}
.login-box .card { padding: 30px 28px 28px; border-radius: 16px; border: 1px solid rgba(227, 195, 122, 0.35); box-shadow: 0 24px 60px rgba(5, 14, 24, 0.5); }
.login-box h1 { font-family: var(--serif, "Inter", sans-serif); font-size: 28px; letter-spacing: -0.01em; }
.login-box h1::after { content: ""; display: block; height: 1px; margin-top: 14px; background: linear-gradient(90deg, #d1a12f 0%, rgba(209, 161, 47, 0) 100%); }
.login-box .sub { margin: 14px 0 22px; }
.login-box .field label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.login-box .input:focus { border-color: #d1a12f; box-shadow: 0 0 0 3px rgba(209, 161, 47, 0.18); outline: none; }
.login-box .btn-primary { background: #d1a12f; color: #172f4a; }
.login-box .btn-primary:hover { background: #dcae3f; }
@media (max-width: 480px) { .login-box .card { padding: 24px 20px 22px; } }

/* Faixa no topo da entrada, com degradê e a marca da AMF */
.login-page { grid-template-rows: auto 1fr; }
.login-topo { background: linear-gradient(90deg, rgba(5, 14, 24, 0.55), rgba(47, 93, 138, 0.28)); border-bottom: 1px solid rgba(227, 195, 122, 0.45); padding: 10px 24px; }
.login-topo .f-brand { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; color: #fff; font-family: var(--sans); font-size: 14px; letter-spacing: 0.02em; }
.login-topo .f-brand img { height: 44px; width: auto; }
.login-topo .f-brand b { font-weight: 600; }
@media (max-width: 480px) { .login-topo { padding: 8px 16px; } .login-topo .f-brand b { font-size: 13px; } }

/* Entrada com painel de marca ao lado do login */
.login-main { grid-auto-flow: column; justify-content: center; align-items: center; gap: 72px; padding: 40px 32px 56px; position: relative; }
.login-marca { max-width: 440px; color: #fff; }
.login-selo { height: 84px; width: auto; margin-bottom: 26px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); }
.login-marca .kicker { color: #e3c37a; font-size: 13px; letter-spacing: 0.18em; }
.login-marca h2 { font-family: var(--sans); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; font-weight: 700; color: #fff; margin: 10px 0 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.login-marca h2::after { content: ""; display: block; height: 1px; margin-top: 16px; background: linear-gradient(90deg, #e3c37a 0%, rgba(227, 195, 122, 0) 100%); }
.login-marca p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); text-align: left; hyphens: none; }
.login-pontos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.login-pontos li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.92); }
.login-pontos li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d1a12f; box-shadow: 0 0 0 4px rgba(209, 161, 47, 0.18); flex: none; }
.login-main::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; bottom: -220px; border: 1px solid rgba(227, 195, 122, 0.18); box-shadow: 0 0 0 60px rgba(227, 195, 122, 0.04), 0 0 0 120px rgba(227, 195, 122, 0.025); pointer-events: none; }
.login-box { position: relative; z-index: 1; width: 420px; }
@media (max-width: 900px) {
  .login-main { grid-auto-flow: row; gap: 30px; align-content: start; padding: 28px 18px 44px; }
  .login-marca { max-width: 420px; }
  .login-selo { height: 64px; margin-bottom: 18px; }
  .login-box { width: 100%; max-width: 420px; }
  .login-pontos { display: none; }
}
.login-marca { text-align: left; }
.login-marca .kicker { display: block; text-align: left; }
@media (max-width: 900px) { .login-main { padding-top: 34px; } }

/* Entrada, texto da marca em cima do login, tudo centralizado, e logo maior na faixa */
.login-main { grid-auto-flow: row; justify-content: center; justify-items: center; align-content: center; gap: 28px; padding: 36px 18px 56px; }
.login-marca { max-width: 520px; text-align: center; }
.login-marca .kicker { text-align: center; }
.login-marca h2::after { background: linear-gradient(90deg, rgba(227, 195, 122, 0) 0%, #e3c37a 35%, #e3c37a 65%, rgba(227, 195, 122, 0) 100%); }
.login-marca p { text-align: center; font-size: 16px; margin-top: 14px; }
.login-box { width: 100%; max-width: 420px; }
.login-topo { padding: 14px 24px; }
.login-topo .f-brand { justify-content: center; gap: 16px; font-size: 18px; max-width: none; }
.login-topo .f-brand img { height: 68px; }
.login-topo .f-brand b { font-weight: 600; letter-spacing: 0.03em; }
@media (max-width: 480px) { .login-topo { padding: 10px 14px; } .login-topo .f-brand { gap: 12px; } .login-topo .f-brand img { height: 52px; } .login-topo .f-brand b { font-size: 15px; } }
.login-page { overflow: hidden; } .login-main { overflow: hidden; }