/* Vai e Vem Escolar · 0.2.45
 * Camada exclusivamente visual: cinco PWAs, módulos e páginas públicas.
 * Sem mudanças de autenticação, leitura facial, câmeras, API ou Push.
 */
:root {
  --ink:#15273e;--muted:#64758a;--bg:#f4f7fb;--line:#dfe7f0;
  --green:#12866f;--mint:#e4f6ef;--blue:#2869c5;--radius:15px;
  --ui-white:#fff;--ui-soft:#f8fafd;--ui-deep:#10283e;
  --ui-shadow:0 3px 14px rgba(22,48,74,.045);
  --ui-shadow-raised:0 12px 28px rgba(22,48,74,.10);
  --ui-accent:#12866f;
}
html {scroll-behavior:smooth;overflow-x:clip;color-scheme:light}
body {background:var(--bg);color:var(--ink);font-size:14px;line-height:1.48;-webkit-font-smoothing:antialiased}
body.secretariat-app {--ui-accent:#376dc6}
body.porter-app {--ui-accent:#108b78}
body.guardian-app {--ui-accent:#167f6c}
body,main,.card,.grid,.grid>*,.section-head,.page-head,form,section,article {min-width:0}
img,svg,video,canvas {max-width:100%}
img {height:auto}
:where(h1,h2,h3,h4,p,span,strong,a,td,th,summary) {overflow-wrap:break-word}
h1,h2,h3 {color:inherit}
h1 {letter-spacing:-.035em}
h2 {letter-spacing:-.025em;line-height:1.3}
h3 {line-height:1.32}
a {text-underline-offset:3px}
a:hover {text-decoration-color:currentColor}
:where(button,a,input,select,textarea,summary):focus-visible {
  outline:3px solid rgba(13,132,109,.54);outline-offset:2px;
}
:where(button,.button) {transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
:where(button,.button):hover:not(:disabled) {filter:none;border-color:#a9c7c4;box-shadow:0 2px 8px rgba(18,56,80,.07)}
:where(button,.button):active:not(:disabled) {transform:translateY(1px)}
:where(button,.button):disabled {opacity:.56;cursor:not-allowed;box-shadow:none}
button,.button {gap:7px;border-color:#cfdae6;background:#fff;border-radius:10px;letter-spacing:0;white-space:normal;text-align:center;line-height:1.25}
button.primary,.button.primary {background:var(--ui-accent);border-color:var(--ui-accent);color:white;box-shadow:0 2px 4px rgba(12,103,87,.12)}
button.primary:hover:not(:disabled),.button.primary:hover {background:#0d715e;border-color:#0d715e;box-shadow:0 4px 10px rgba(12,103,87,.20)}
button.small,.button.small {font-size:12px;min-height:34px;padding:7px 11px}
:where(input,select,textarea) {accent-color:var(--ui-accent)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea {
  max-width:100%;font-family:inherit;color:var(--ink);background:#fff;
  border:1px solid #cbd7e5;border-radius:10px;
  box-shadow:0 1px 2px rgba(15,35,55,.025);
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,select:focus,textarea:focus {
  border-color:var(--ui-accent);outline:3px solid rgba(16,139,116,.14);outline-offset:0;
}
input::placeholder,textarea::placeholder {color:#8493a5;opacity:1}
textarea {width:100%;display:block;padding:11px 12px;line-height:1.5;resize:vertical;min-height:90px}
label {color:#33465c;font-size:12px;line-height:1.45}
label .muted {font-weight:400}
.check {align-items:center;line-height:1.5;gap:9px}
.check input {width:18px;height:18px;flex:none}
.card {border:1px solid var(--line);background:var(--ui-white);box-shadow:var(--ui-shadow);border-radius:var(--radius)}
.card.subtle {background:#f2f7fa;border-color:#dbe7ec}
.card h2 {line-height:1.28}
.section-head {margin-bottom:13px}
.section-head h2 {font-weight:740}
.muted {color:var(--muted)}
.eyebrow {color:#60738a;font-size:10px;letter-spacing:.12em}
.badge,.pill {border:1px solid transparent;font-weight:650;letter-spacing:0}
.badge {background:#fff4e3;color:#79531d;border-color:#f5e2c2}
.pill.green {background:#e4f5eb;color:#13734d}
.pill.blue {background:#e9f0fd;color:#285ba7}
.notice {background:#ebf7f2;color:#14624f;border:1px solid #c6e7d8;padding:11px 14px;border-radius:11px}
.notice.error {background:#fff0f0;color:#9d283b;border-color:#f5cdd2}
.empty {text-align:center;background:#fbfcff;border:1px dashed #dbe3ec;border-radius:11px;margin:6px 0}
.actions {gap:8px}
.actions>* {max-width:100%}
hr {border-color:var(--line);opacity:1}
:where(details)>summary {list-style-position:outside;line-height:1.45}
:where(details)>summary:hover {color:var(--ui-accent)}
:where(details)>summary:focus-visible {border-radius:6px}
.table-wrap {max-width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:12px;background:#fff}
.table-wrap table {min-width:100%;border-collapse:separate;border-spacing:0}
.table-wrap th {background:#f6f8fb;color:#5d7086;font-weight:750;white-space:nowrap}
.table-wrap td,.table-wrap th {padding:11px 12px;border-bottom:1px solid #eaf0f5}
.table-wrap tbody tr:hover {background:#fafcfe}
.table-wrap tr:last-child td {border-bottom:none}
.table-wrap .actions {min-width:max-content}
/* A navegação existente permanece funcional, incluindo rolagem independente do drawer. */
.sidebar {background:linear-gradient(178deg,#10263b 0%,#152e45 68%,#0f293f 100%);border-right:1px solid #213a50}
.sidebar .brand {gap:10px;line-height:1.2}
.sidebar .brand strong {font-weight:800;letter-spacing:-.025em}
.sidebar .brand img,.pwa-sidebar-logo {object-fit:contain;flex:none;border-radius:9px}
.sidebar .brand .mark {background:#128b77}
.sidebar nav a {color:#c1d0dc;position:relative;transition:background-color .16s ease,color .16s ease}
.sidebar nav a:hover,.sidebar nav a.active {background:#29455c;color:#fff;text-decoration:none}
.sidebar nav a.active {box-shadow:inset 3px 0 0 #68d8bf;font-weight:750}
.sidebar .nav-group-title {color:#e7f2f9}
.sidebar .nav-group-title small {color:#b1c7d7}
.sidebar .sidebar-foot {overflow-wrap:anywhere;color:#b1c5d5}
.sidebar .link {color:#eff8ff}
/* Barras, indicadores e cards — todos os módulos (Admin, Escola, Secretaria, Portaria). */
.admin-ui main {padding-top:20px}
.admin-ui .page-head {border-bottom:1px solid #e2e9f1;padding-bottom:13px;margin-bottom:15px;align-items:center}
.admin-ui .page-head h1 {font-size:clamp(20px,2vw,25px);letter-spacing:-.038em;line-height:1.2;font-weight:790}
.admin-ui .admin-context {font-size:11px;gap:4px 10px;margin-top:4px;line-height:1.45}
.admin-ui .admin-head-actions {flex-wrap:wrap;justify-content:flex-end}
.admin-ui .page-head .badge {background:#fff5e5;border-color:#edd5af;color:#7e5d2b}
.admin-ui .card {padding:19px 20px;margin-bottom:14px}
.admin-ui .card h2 {font-size:18px}
.admin-ui .card h3 {font-size:15px}
.admin-ui .grid {gap:13px}
.admin-ui .metrics {gap:11px;margin-bottom:15px}
.admin-ui .metrics article {background:white;border:1px solid var(--line);border-radius:14px;box-shadow:var(--ui-shadow);padding:15px 17px}
.admin-ui .metrics article strong {font-size:clamp(23px,2.5vw,32px);font-variant-numeric:tabular-nums;color:#173a4c;line-height:1.1}
.admin-ui .metrics article span {font-size:11px;line-height:1.4}
.admin-ui .welcome {background:linear-gradient(112deg,#142c43,#1b5260);border:1px solid #204e5b;border-radius:15px}
.admin-ui .welcome h2 {color:#fff;font-size:20px}
.admin-ui .welcome p {color:#d9e8ee}
.admin-ui .welcome .button {background:white;color:#1d5060}
.admin-ui details.admin-disclosure>summary {padding:9px 3px;min-height:38px}
.admin-ui .attendance-metrics article {min-width:0}
.admin-ui .network-section,.admin-ui .school-city-group {border-radius:13px}
.admin-ui .network-create-panel {border:1px solid #d5e1eb;box-shadow:var(--ui-shadow-raised);z-index:30}
.admin-ui .school-city-heading {gap:8px}
.admin-ui .school-city-heading h3 {font-size:15px}
.admin-ui .school-picker {flex-wrap:wrap;align-items:end}
.admin-ui .school-picker label {max-width:100%}
.admin-ui .admin-help {font-size:12px}
.admin-ui .live-status {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.admin-ui .team-alerts {border-radius:12px}
/* Popups reais, inclusive modais de alunos e responsáveis. */
dialog {color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 25px 70px rgba(9,31,48,.24);max-width:min(96vw,760px);max-height:calc(100dvh - 28px);overflow:auto}
dialog::backdrop {background:rgba(13,31,49,.62);backdrop-filter:blur(2px)}
dialog :where(input,select,textarea) {max-width:100%}
dialog .section-head {align-items:flex-start}
dialog .section-head button {flex-shrink:0}
/* Scanner e central multicâmeras: preservar proporção dos vídeos e controles. */
.camera,.multi-portaria .multi-media {background:#0b1e30;border-radius:12px}
.camera-guide {box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.multi-portaria .multi-toolbar {gap:9px}
.multi-portaria .multi-toolbar strong {font-size:18px}
.multi-portaria .multi-tile {border:1px solid #d9e4ed;border-radius:15px;box-shadow:var(--ui-shadow)}
.multi-portaria .multi-tile-head {background:#fbfcfe;border-bottom:1px solid #e8eef4;padding:10px 12px}
.multi-portaria .multi-tile-head strong {color:#19334b}
.multi-portaria .multi-tile[data-state='confirmed'] {box-shadow:0 0 0 2px rgba(22,140,100,.12)}
.multi-portaria .multi-tile-controls {border-top:1px solid #ebf0f5;padding:10px 11px;gap:6px}
.multi-portaria .multi-tile-controls button {min-height:34px}
.multi-portaria .multi-tile-controls select {max-width:100%;min-width:0}
.multi-portaria .multi-results {border:1px solid var(--line);border-radius:15px;box-shadow:var(--ui-shadow)}
.multi-portaria .multi-global {border-radius:11px}
.multi-portaria .multi-dialog {border-radius:18px}
/* Cartão da família, avisos e calendário: pequenos refinamentos sem alterar fluxo. */
.family-app {background:var(--bg)}
.family-header {background:rgba(255,255,255,.96);border:1px solid #e5ecf3;border-top:0;border-radius:0 0 15px 15px;box-shadow:0 3px 14px rgba(17,44,65,.045);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.family-header>a {min-width:0}
.family-header a span {min-width:0;overflow-wrap:anywhere}
.family-header-actions {flex-wrap:wrap;justify-content:flex-end}
.family-app .card {border-color:#e0e8f0;box-shadow:var(--ui-shadow)}
.family-home-head {gap:10px}
.family-student-strip {scroll-padding-left:2px;overscroll-behavior-inline:contain}
.student-hero-card {border-color:#d8e4ed;border-radius:19px;box-shadow:0 6px 16px rgba(20,47,68,.07)}
.student-hero-card h2 {line-height:1.18}
.student-hero-top {align-items:flex-start}
.student-hero-visual {background:#eaf0f6}
.family-quick-actions {gap:9px}
.family-quick-actions button {font-weight:730;border-radius:11px}
.family-panel>summary {padding:15px 17px}
.family-panel[open]>summary {background:#fbfcfe}
.family-notice-card {border-radius:12px}
.family-notice-card:focus-visible {outline-offset:2px}
.calendar-grid .calendar-day {transition:border-color .15s ease,background-color .15s ease}
.calendar-grid .calendar-day:not(:disabled):hover {border-color:#a4cbbf;box-shadow:none}
.family-app dialog {border-radius:18px;box-shadow:0 25px 70px rgba(9,31,48,.25)}
.family-app #toast {box-shadow:0 7px 25px rgba(0,0,0,.17)}
/* Autenticação, instalação e página de seleção dos PWAs. */
.auth {background:radial-gradient(ellipse at 15% 0%,#e2f3ed 0%,transparent 45%),linear-gradient(135deg,#f2f7fb,#f7f9fc 63%,#edf4f7)}
.auth .login,.auth .install {border-radius:19px;border-color:#d9e4ed;box-shadow:0 16px 45px rgba(22,50,75,.10)}
.auth .login {position:relative;overflow:hidden}
.auth .login::before {content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#14886f,#6ec3b6)}
.auth .login h1,.auth .login h2 {line-height:1.2}
.auth .login label {font-size:12px}
.auth .login button.primary {min-height:43px}
.auth .login-intro {max-width:460px}
.auth .login-intro h1 {letter-spacing:-.055em;line-height:1.06}
.role-pwa-login.role-login-compact,.admin-login-simple {background:radial-gradient(ellipse at 17% 9%,#e1f3eb,transparent 52%),linear-gradient(120deg,#f4f7fb,#edf4f7)}
.role-login-compact .login,.admin-login-simple .admin-login-card {box-shadow:0 18px 48px rgba(22,50,75,.11);border:1px solid #dfe8ef;border-radius:19px}
.role-login-compact .role-login-head h1 {font-size:23px;font-weight:790}
.role-login-compact .role-login-form label {line-height:1.45}
.role-login-compact .role-login-back {margin-top:13px}
.auth .pwa-access-card {transition:border-color .16s ease,background-color .16s ease,transform .16s ease}
.auth .pwa-access-card:hover {transform:translateY(-2px);border-color:#96c4b7}
.auth .pwa-access-card:focus-visible {outline:3px solid #8ccfbd}
/* Campo de senha existente: preservar a correção funcional do olhinho. */
.password-field>input {padding-right:58px!important}
.password-field>.password-toggle {color:#3f5b70!important;background:#f6f9fb!important;border-color:#dce5ee!important}
.password-field>.password-toggle:focus-visible {outline:2px solid #208d74!important;outline-offset:1px!important}
/* Mobile / tablet: sem rolagem horizontal nem menu à direita. */
@media (max-width:980px) {
  .admin-ui .sidebar {padding:9px 12px;background:#10283e;border-bottom:1px solid #294558}
  .admin-ui .sidebar-top {grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .admin-ui .sidebar-top>#admin-menu-toggle {grid-column:1;grid-row:1;justify-self:start}
  .admin-ui .sidebar-top>.brand {grid-column:2;grid-row:1;justify-self:start;min-width:0}
  .admin-ui .sidebar-top>.sidebar-logout {grid-column:3;grid-row:1;justify-self:end}
  .admin-ui #admin-menu-toggle {min-height:39px;border-radius:10px;padding:8px 11px;font-weight:700}
  .admin-ui .sidebar-drawer {left:0;right:auto;max-width:calc(100vw - 35px);background:#10283e}
  .admin-ui .sidebar-drawer #admin-nav {overscroll-behavior-y:contain}
  .admin-ui .sidebar-drawer #admin-nav a {border-radius:9px;min-height:40px}
  .admin-ui main {margin-left:0;padding:16px 16px 55px}
  .admin-ui .page-head {margin-bottom:13px}
  .admin-ui .admin-head-actions {gap:6px}
  .admin-ui .grid.two,.admin-ui .grid.split,.admin-ui .grid.scanner-grid {grid-template-columns:minmax(0,1fr)}
  .multi-portaria .multi-toolbar {flex-wrap:wrap;align-items:flex-start}
}
@media (max-width:700px) {
  body {font-size:13px}
  .admin-ui main {padding:13px 12px calc(55px + env(safe-area-inset-bottom,0px))}
  .admin-ui .page-head {padding-bottom:10px;margin-bottom:12px;gap:8px}
  .admin-ui .page-head h1 {font-size:20px;line-height:1.18}
  .admin-ui .admin-context {font-size:10px}
  .admin-ui .page-head .badge {font-size:10px}
  .admin-ui .card {padding:14px;margin-bottom:11px;border-radius:13px}
  .admin-ui .card h2 {font-size:17px}
  .admin-ui .section-head {gap:8px;flex-wrap:wrap}
  .admin-ui .grid {gap:10px}
  .admin-ui .metrics {gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-ui .metrics article {padding:12px 11px}
  .admin-ui .metrics article strong {font-size:25px}
  .admin-ui .welcome {padding:13px 14px}
  .admin-ui .admin-form-grid {grid-template-columns:minmax(0,1fr)}
  .admin-ui .network-toolbar-compact {align-items:stretch}
  .admin-ui .network-toolbar-compact label {min-width:0}
  .admin-ui .network-create-panel {max-width:calc(100vw - 24px);right:0}
  .table-wrap td,.table-wrap th {padding:9px 10px;white-space:normal}
  .table-wrap {margin-inline:0}
  .school-picker {align-items:stretch}
  .school-picker label {min-width:0;width:100%}
  .school-picker button {min-height:39px}
  .family-header {padding:10px 13px}
  .family-main {padding:10px 12px calc(25px + env(safe-area-inset-bottom,0px))}
  .family-app .card {padding:14px}
  .family-home-head {align-items:center}
  .family-home-head .muted {font-size:10px}
  .family-quick-actions button {min-height:44px}
  .family-panel {padding:0!important}
  .family-panel>summary {padding:13px 14px}
  .student-hero-card {border-radius:16px}
  .auth {padding:16px 12px;min-height:100dvh}
  .auth .login {padding:23px 21px}
  .role-pwa-login.role-login-compact {padding:12px}
  .role-login-compact .login {padding:22px 20px}
  .multi-portaria .multi-tile {border-radius:12px}
  .multi-portaria .multi-tile-head {gap:6px}
  .multi-portaria .multi-tile-controls {gap:6px}
  .multi-portaria .multi-tile-controls button,.multi-portaria .multi-tile-controls select {min-height:36px}
  .multi-portaria .multi-media {aspect-ratio:16/10}
  .multi-portaria .multi-dialog {max-width:calc(100vw - 22px)}
  dialog {max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {font-size:16px}
}
@media (max-width:360px) {
  .admin-ui .sidebar-top {gap:5px}
  .admin-ui .sidebar-top>.brand {gap:5px;font-size:10px}
  .admin-ui .brand .pwa-sidebar-logo {width:26px;height:26px}
  .admin-ui #admin-menu-toggle {padding:7px 8px}
  .admin-ui .page-head {flex-wrap:wrap}
  .admin-ui .admin-head-actions {justify-content:flex-start}
  .family-header-actions {gap:4px}
  .family-header-actions button {padding:6px 8px}
  .family-quick-actions {grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  :where(button,.button,.student-hero-card,.auth .pwa-access-card) {transition:none}
}
@media print {
  body,.family-app,.auth {background:white!important}
  .card,.metrics article,.student-hero-card {box-shadow:none!important}
  .sidebar,.sidebar-backdrop,.admin-ui .sidebar,.family-header {display:none!important}
  main,.admin-ui main,.family-main {margin:0!important;padding:0!important;max-width:none!important}
  .table-wrap {overflow:visible;border:0}
  .table-wrap table {width:100%}
}