/* ====== Fontes MyCamp (alojadas localmente, funciona offline) ====== */
@font-face {
  font-family: "Jaapokki";
  src: url("/assets/fonts/Jaapokki-Regular.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/Raleway.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Paleta oficial MyCamp (do Manual de Normas / website) */
  --mc-red: #dd0020;
  --mc-red-dark: #aa0019;
  --mc-green: #61b232;
  --mc-green-dark: #4e9128;
  --mc-yellow: #fbbe11;

  --bg: #f4edee;
  --card: #ffffff;
  --ink: #26201f;
  --muted: #797170; /* ~4.8:1 sobre branco — leitura sob luz variável (era #837a79 ≈ 4.2:1) */
  --line: #ece2e3;
  --primary: var(--mc-red);
  --ok: var(--mc-green);
  --ok-bg: #eaf6e1;
  --falta: var(--mc-red);
  --falta-bg: #fdeced;
  --alert: #c0102a;
  --alert-bg: #fdecec;
  /* Sombras em duas camadas: contacto curto + difusa longa (profundidade mais suave e premium) */
  --shadow: 0 1px 2px rgba(70,20,25,.05), 0 3px 10px rgba(70,20,25,.06);
  --shadow-lg: 0 4px 14px rgba(120,20,30,.10), 0 18px 44px rgba(120,20,30,.16);
  /* Curvas ease-out exponenciais — desaceleração natural, sem bounce */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);

  --display: "Jaapokki", "Raleway", system-ui, sans-serif;
  --body: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--body); background: var(--bg); color: var(--ink); }
h1, h2, .display { font-family: var(--display); letter-spacing: .01em; font-weight: 400; text-wrap: balance; }
.muted { color: var(--muted); font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Foco visível nos cartões operáveis por teclado (role="button") */
.co-kid:focus-visible, .ekid:focus-visible, .loja-row:focus-visible, .pick:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 2px; }
/* Anel de foco suave nos campos de formulário (só com teclado — não intrusivo no toque/rato) */
input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px rgba(221,0,32,.15); }
.err { color: var(--alert); font-size: 14px; margin-top: 8px; min-height: 18px; font-weight: 600; }
code { background: #f4e3e5; padding: 1px 6px; border-radius: 5px; font-size: 13px; }

/* ====== Botoes ====== */
.btn-primary, .btn-ghost {
  font-family: var(--body); font-size: 15px; font-weight: 700; padding: 11px 20px;
  border-radius: 999px; cursor: pointer; border: 2px solid transparent;
  transition: transform .16s var(--ease-out), filter .16s var(--ease-out), box-shadow .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
  min-height: 44px; /* alvo de toque mínimo em tablet/telemóvel */
}
.btn-primary { background: var(--mc-red); color: #fff; }
.btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(221,0,32,.26); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--mc-red); color: var(--mc-red); }
.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 2px; }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ====== Login ====== */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background: radial-gradient(circle at 50% -10%, #fff 0%, var(--bg) 60%); }
.login-card {
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lg);
  padding: 14px 34px 34px; width: 100%; max-width: 380px; text-align: center;
}
.login-logo { width: 168px; height: auto; margin: 0 auto 6px; display: block; }
.login-card h1 { font-size: 21px; margin: 14px 0 4px; color: var(--mc-red); }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.login-card input {
  padding: 14px 16px; font-size: 16px; font-family: var(--body); border: 2px solid var(--line);
  border-radius: 14px; text-align: center; transition: border-color .14s var(--ease-out);
}
.login-card input:focus { outline: none; border-color: var(--mc-red); }

/* ====== Topbar ====== */
.topbar { background: var(--mc-red); position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px rgba(120,10,25,.15); }
.topbar.admin { background: var(--mc-red-dark); }
.topbar-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 11px 20px; }
.logo-mark { height: 24px; width: auto; display: block; }
.brand { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 11px; font-size: 17px; color: #fff; }
.brand .sep { width: 1px; height: 22px; background: rgba(255,255,255,.4); }
.brand .cdot { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid rgba(255,255,255,.7); }
.brand strong { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.85); }
.crumbs a { color: #fff; text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.navlink { color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.16); white-space: nowrap; }
.navlink:hover { background: #fff; color: var(--mc-red); }
/* Seletor segmentado Check-in <-> Check-out (topbar; só para admin/coordenador). */
.cio-switch { display: inline-flex; align-items: center; background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px; gap: 3px; }
/* O atributo hidden tem de ganhar ao display:inline-flex acima. Sem isto, os papéis de acesso
   único (só check-in / só check-out) viam o alternador e o link do outro lado não fazia nada. */
.cio-switch[hidden] { display: none; }
.cio-seg { color: rgba(255,255,255,.92); text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1; padding: 7px 13px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cio-seg:hover { background: rgba(255,255,255,.14); color: #fff; }
.cio-seg.is-active, .cio-seg.is-active:hover { background: #fff; color: var(--mc-red); cursor: default; }
.topbar .right { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; gap: 12px; justify-content: flex-end; }
.topbar a.btn-ghost { text-decoration: none; }
.topbar .btn-ghost { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.5); }
.topbar .btn-ghost:hover { background: #fff; color: var(--mc-red); border-color: #fff; }
.conn { font-size: 12px; color: rgba(255,255,255,.9); display: flex; align-items: center; gap: 6px; }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: #aef0a0; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.conn.off .dot { background: var(--mc-yellow); }

/* ====== Layout ====== */
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 64px; }
.page-title { font-size: 27px; margin: 0 0 4px; }
.count-badge { font-family: var(--body); font-size: 15px; background: var(--mc-red); color: #fff; border-radius: 999px; padding: 2px 12px; vertical-align: middle; margin-left: 8px; font-weight: 700; }
.hero { background: var(--card); border-radius: 20px; padding: 28px 32px; box-shadow: var(--shadow); margin-bottom: 24px; border-top: 5px solid var(--mc-red); }
.hero-title { font-family: var(--display); font-size: 28px; color: var(--mc-red); margin: 0; line-height: 1.12; max-width: 30ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stat { font-size: 15px; font-weight: 700; padding: 7px 15px; border-radius: 999px; }
.stat b { font-weight: 800; }
.stat.total { background: #f3ebec; color: var(--ink); }
.stat.boys { background: #e9f1fd; color: #1d4ed8; }
.stat.girls { background: #fcecf3; color: #be185d; }
.stat.naovem { background: #eef0f2; color: var(--muted); }

/* ====== Dois caminhos ====== */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 26px; }
.path {
  position: relative; text-align: left; border: none; cursor: pointer; border-radius: 22px; padding: 30px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); overflow: hidden;
  color: var(--ink); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); font-family: var(--body);
}
.path::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; opacity: .12; transition: transform .35s var(--ease-out-soft), opacity .35s var(--ease-out-soft); }
.path:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.path:hover::after { transform: scale(1.22); opacity: .18; }
.path:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 3px; }
.path-num { transition: transform .2s var(--ease-out); transform-origin: left center; }
.path:hover .path-num { transform: scale(1.05); }
.path.falta { background: var(--falta-bg); box-shadow: inset 0 0 0 2px #f6c9cf, var(--shadow); }
.path.falta::after { background: var(--mc-red); }
.path.feito { background: var(--ok-bg); box-shadow: inset 0 0 0 2px #c2e6ad, var(--shadow); }
.path.feito::after { background: var(--mc-green); }
.path.tardio { background: #fff7e0; box-shadow: inset 0 0 0 2px #fbe09a, var(--shadow); }
.path.tardio::after { background: var(--mc-yellow); }
.path-num { font-family: var(--display); font-size: 54px; line-height: 1; }
.path.falta .path-num { color: var(--mc-red); }
.path.feito .path-num { color: var(--mc-green-dark); }
.path.tardio .path-num { color: #b45309; }
.path.naovem { background: #f1f3f5; box-shadow: inset 0 0 0 2px #dfe3e7, var(--shadow); }
.path.naovem::after { background: #9aa3ad; }
.path.naovem .path-num { color: #6b7280; }
.path-label { font-family: var(--display); font-size: 21px; margin-top: 8px; }
.path-sub { font-size: 14px; color: var(--muted); font-weight: 600; }

/* ====== Lista / grelha ====== */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.title-row { display: flex; align-items: center; gap: 12px; }
.title-row .page-title { margin: 0; }
.backbtn { width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--mc-red); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, background .12s; }
.backbtn svg { display: block; }
.backbtn:hover { border-color: var(--mc-red); background: var(--falta-bg); }
.list-head #search { padding: 12px 16px; font-size: 15px; font-family: var(--body); border: 2px solid var(--line); border-radius: 999px; min-width: 270px; background: var(--card); }
.list-head #search:focus { outline: none; border-color: var(--mc-red); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 13px; }

/* Duas colunas: Rapazes / Raparigas */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.col { border-radius: 18px; padding: 15px 15px 17px; }
.col.boys { background: #e9f1fd; }
.col.girls { background: #fcecf3; }
.col.span2 { grid-column: 1 / -1; background: #f1eeef; }
.col-head { font-family: var(--display); font-weight: 400; font-size: 19px; margin: 0 0 13px; padding: 0 3px 10px;
  border-bottom: 3px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.col-head span { font-family: var(--body); font-weight: 800; font-size: 14px; color: inherit; opacity: .75; }
.col-head.boys { color: #1d4ed8; border-color: #a9caf9; }
.col-head.girls { color: #be185d; border-color: #f4b3d1; }
.col-list { display: flex; flex-direction: column; gap: 11px; }
.empty-col { color: var(--muted); padding: 16px; text-align: center; border: 2px dashed rgba(0,0,0,.13); border-radius: 14px; }
.kid {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 15px 17px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px;
}
.kid { cursor: pointer; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.kid:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kid:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 2px; }
.kid.falta:hover { border-color: var(--mc-red); }
.kid.done { background: var(--ok-bg); border-color: #c2e6ad; }
.kid.done:hover { border-color: var(--mc-green); }
.kid.tardio { background: #fff8e8; border-color: #fce3a0; }
.kid.tardio:hover { border-color: var(--mc-yellow); }
.kid-late { font-size: 13px; font-weight: 800; color: #b45309; }
.kid.naovem { background: #f1f3f5; border-color: #dfe3e7; }
.kid.naovem:hover { border-color: #9aa3ad; }
.kid-naovem { font-size: 12.5px; font-weight: 800; color: #6b7280; }
.tardio-nota { margin-top: 9px; }
.tardio-nota.hidden { display: none; }
.tardio-nota input { width: 100%; padding: 8px 10px; font: inherit; font-size: 13.5px; border: 1.5px solid #fbe09a; border-radius: 9px; background: #fffdf6; }
.tardio-nota input:focus { outline: none; border-color: var(--mc-yellow); }
.fld-tarde { background: #fffdf3; border-color: #fbe5a8; }
.kid-name { font-size: 16.5px; font-weight: 700; }
.kid-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: #f3ebec; border-radius: 7px; padding: 2px 9px; font-size: 12.5px; font-weight: 700; }
.tag.alert { background: var(--alert-bg); color: var(--alert); }
.tag.tarde { background: #fff7ed; color: #b45309; }
.fld-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.kid-go { font-size: 13.5px; font-weight: 800; color: var(--mc-red); margin-top: 2px; }
.kid-ok { font-size: 13px; font-weight: 800; color: var(--mc-green-dark); }
.kid-edit { font-size: 12.5px; font-weight: 800; color: var(--mc-green-dark); opacity: .7; }
.kid.done:hover .kid-edit { opacity: 1; }
.empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 54px 20px; font-size: 16px; }

/* ====== Popup de check-in ====== */
dialog { border: none; }
dialog::backdrop { background: rgba(40,8,12,.5); }
.checkin-dialog { border-radius: 22px; padding: 0; width: 860px; max-width: 96vw; max-height: 94vh; box-shadow: var(--shadow-lg); overflow: hidden; }
/* IMPORTANTE: o flex só quando aberto — senão anula o `display:none` que esconde o <dialog> fechado (o popup ficaria visível mesmo depois de fechar). */
.checkin-dialog[open] { display: flex; flex-direction: column; }
.ci-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 24px; background: var(--mc-red); color: #fff; flex-shrink: 0; }
.ci-head h2 { margin: 0; font-size: 28px; color: #fff; line-height: 1.05; }
.ci-sub { font-size: 15.5px; color: #fff; font-weight: 700; margin-top: 7px; letter-spacing: .01em; }
.ci-head .x { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -6px -10px -6px 0; border-radius: 10px; flex: 0 0 auto; }
.ci-head .x:hover { color: #fff; background: rgba(255,255,255,.15); }
.ci-head .x:active { background: rgba(255,255,255,.25); }

.ci-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 18px 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.ci-col { display: flex; flex-direction: column; gap: 14px; }
.ci-blocktitle { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--muted); margin-bottom: 8px; }

#contactos { display: flex; flex-direction: column; gap: 7px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.contact-row input { padding: 10px 11px; font: inherit; font-size: 14.5px; border: 1.5px solid var(--line); border-radius: 9px; min-width: 0; }
.contact-row input:focus { outline: none; border-color: var(--mc-red); }
.contact-row .c-del { border: none; background: #f3ebec; color: var(--muted); border-radius: 9px; width: 32px; cursor: pointer; font-size: 18px; }
.contact-row .c-del:hover { background: var(--alert-bg); color: var(--alert); }
.contact-row .c-nome-ro { display: flex; align-items: center; padding: 8px 10px; font-size: 14px; font-weight: 700; background: #f3ebec; border: 1.5px solid var(--line); border-radius: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row .c-spacer { width: 32px; }

.restr-edit { display: flex; flex-direction: column; gap: 8px; }
.restr-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.restr-edit textarea { font: inherit; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; resize: vertical; min-height: 52px; }
.restr-edit textarea:focus { outline: none; border-color: var(--mc-red); }
.addc { margin-top: 8px; background: none; border: 1.5px dashed var(--line); color: var(--mc-red); font: inherit; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.addc:hover { border-color: var(--mc-red); }

/* Restrições: editor de linhas (uma condição por linha) */
.restr-lines { display: flex; flex-direction: column; gap: 12px; }
.rl-group { display: flex; flex-direction: column; gap: 5px; }
.rl-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.linelist { display: flex; flex-direction: column; gap: 6px; }
.line-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.line-in { padding: 9px 11px; font: inherit; font-size: 14.5px; border: 1.5px solid var(--line); border-radius: 9px; min-width: 0; }
.line-in:focus { outline: none; border-color: var(--mc-red); }
.line-del { border: none; background: #f3ebec; color: var(--muted); border-radius: 9px; width: 32px; cursor: pointer; font-size: 18px; }
.line-del:hover { background: var(--alert-bg); color: var(--alert); }
.addline, .addmed { align-self: flex-start; background: none; border: 1.5px dashed var(--line); color: var(--mc-red); font: inherit; font-weight: 700; font-size: 12.5px; padding: 5px 10px; border-radius: 9px; cursor: pointer; }
.addline:hover, .addmed:hover { border-color: var(--mc-red); }

/* Editor de medicação: condição + até 4 horários (dropdowns opcionais) por linha */
.medlist { display: flex; flex-direction: column; gap: 10px; }
.med-row { display: flex; flex-direction: column; gap: 6px; padding: 9px; border: 1.5px solid var(--line); border-radius: 11px; background: #fbf7f7; }
.med-top { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.med-t { padding: 9px 11px; font: inherit; font-size: 14.5px; border: 1.5px solid var(--line); border-radius: 9px; min-width: 0; background: var(--card); }
.med-t:focus { outline: none; border-color: var(--mc-red); }
.med-line-del { border: none; background: #f3ebec; color: var(--muted); border-radius: 9px; width: 32px; cursor: pointer; font-size: 18px; }
.med-line-del:hover { background: var(--alert-bg); color: var(--alert); }
.med-hs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.med-h-wrap { display: inline-flex; align-items: center; gap: 2px; }
.med-h { font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); max-width: 100%; }
.med-h:focus { outline: none; border-color: var(--mc-red); }
.med-h-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.med-h-del:hover { color: var(--alert); }
.med-add-h { align-self: center; background: none; border: 1.5px dashed var(--line); color: var(--mc-red); font: inherit; font-weight: 700; font-size: 12px; padding: 5px 9px; border-radius: 9px; cursor: pointer; }
.med-add-h:hover { border-color: var(--mc-red); }

/* ---------- Check-out (grelha tipo equipas) ---------- */
.stat.feito { background: var(--ok-bg); color: var(--mc-green-dark); }
.stat.falta { background: var(--falta-bg); color: var(--mc-red); }
.co-search { width: 100%; margin-top: 12px; padding: 11px 14px; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 10px; box-sizing: border-box; }
.co-search:focus { outline: none; border-color: var(--mc-red); }
.co-team { margin-top: 16px; }
.co-team-head { font-family: var(--display); font-size: 17px; margin: 0 0 7px; display: flex; align-items: center; gap: 9px; }
.co-team-head span { font-size: 12px; font-weight: 800; color: var(--muted); background: #f3ebec; border-radius: 999px; padding: 2px 8px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.co-kid { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 11px; padding: 9px 10px; min-height: 52px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); user-select: none; }
.co-kid:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.co-kid:active { transform: translateY(0); box-shadow: none; }
.co-kid.has-photo { background: #fff6e0; border-color: #f2c94c; padding-right: 32px; }  /* tem fotos: reserva espaço p/ o quadrado não tapar o nome */
.co-kid.saiu { background: var(--ok-bg); border-color: var(--mc-green); }                /* fez check-out */
.co-kid-name { font-weight: 800; font-size: 13px; line-height: 1.15; }
.co-kid-status { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.co-kid.saiu .co-kid-status { color: var(--mc-green-dark); }
.co-pay { position: absolute; top: 6px; right: 6px; width: 23px; height: 23px; border-radius: 6px; font: inherit; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; }
.co-pay.paid { background: var(--mc-green); color: #fff; border: none; cursor: default; }
.co-pay.cobranca { background: #7c3aed; color: #fff; border: none; cursor: default; }
.co-pay.unpaid { background: #fff; color: var(--mc-red); border: 1.5px dashed var(--mc-red); cursor: pointer; transition: background .14s var(--ease-out), transform .14s var(--ease-out); }
.co-pay.unpaid:hover { background: var(--falta-bg); }
.co-pay.unpaid:active { transform: scale(.92); }

/* Popup de pagamento (numerário / transferência) */
.pay-dialog { border: none; border-radius: 16px; padding: 0; width: min(92vw, 380px); box-shadow: 0 18px 50px rgba(70,20,25,.28); }
.pay-dialog::backdrop { background: rgba(20,10,12,.45); }
.pay-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.pay-head h2 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--mc-red); }
.pay-head .x { border: none; background: #f3ebec; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: 18px; cursor: pointer; }
.pay-q { margin: 0; padding: 0 18px; color: var(--muted); font-weight: 700; }
.pay-methods { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 20px; }
.pay-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 4px; }
.pay-field { display: flex; flex-direction: column; gap: 5px; font-weight: 800; font-size: 13px; color: var(--muted); }
.pay-field input, .pay-field textarea { font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); padding: 11px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); resize: vertical; }
.pay-field input:focus, .pay-field textarea:focus { outline: none; border-color: var(--mc-red); }
.pay-m { font: inherit; font-weight: 800; font-size: 16px; padding: 15px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); cursor: pointer; text-align: left; }
.pay-m:hover { border-color: var(--mc-red); color: var(--mc-red); }
.pay-m:disabled { opacity: .5; cursor: default; }
.pay-m.warn-anyway { font-size: 15px; }
.pay-m.warn-cancel { border: none; background: none; color: var(--muted); text-align: center; font-size: 14px; padding: 6px; }
.pay-m.warn-cancel:hover { color: var(--ink); }

.restr { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.restr:last-child { border-bottom: none; }
.restr-l { flex: 0 0 108px; color: var(--muted); font-weight: 700; }
.restr-v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.restr.has .restr-v { color: var(--alert); font-weight: 600; }

textarea#ci-obs { width: 100%; resize: vertical; font: inherit; font-size: 14.5px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; min-height: 104px; }
textarea#ci-obs:focus { outline: none; border-color: var(--mc-red); }

.fld { background: #faf6f7; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.fld-label { font-size: 13px; font-weight: 700; }
.money { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.money-in { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 4px 10px; font-weight: 700; }
.money-in input { border: none; outline: none; width: 84px; font: inherit; font-weight: 700; text-align: right; }

.swrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.switch { position: relative; flex: 0 0 auto; display: inline-flex; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { display: block; width: 46px; height: 26px; border-radius: 999px; background: #d8cdce; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + .track { background: var(--mc-green); }
.switch input:checked + .track::after { transform: translateX(20px); }
.subsw { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.subsw.hidden { display: none; }
.kit-pecas { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.kit-pecas .swrow { font-size: 13px; font-weight: 600; color: var(--muted); }

.ci-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fbf8f8; flex-shrink: 0; }

/* Ecrã estreito: uma coluna (o corpo faz scroll, por isso nunca corta). */
@media (max-width: 700px) {
  .checkin-dialog { max-width: 100vw; max-height: 96vh; border-radius: 16px; }
  .ci-body { grid-template-columns: 1fr; }
}
/* Ecrã baixo: compactar para reduzir a necessidade de scroll. */
@media (max-height: 760px) {
  .ci-head { padding: 11px 22px; }
  .ci-head h2 { font-size: 22px; }
  .ci-sub { font-size: 14px; margin-top: 4px; }
  .ci-body { padding: 12px 22px; gap: 14px; }
  .ci-col { gap: 10px; }
  .ci-blocktitle { margin-bottom: 5px; }
  .restr-edit textarea { min-height: 40px; }
  textarea#ci-obs { min-height: 64px; }
  .fld { padding: 8px 12px; }
  .ci-actions { padding: 10px 22px; }
}

/* ====== Admin ====== */
.admin-wrap { max-width: 900px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow); margin-bottom: 20px; }
.panel h2 { font-size: 19px; margin: 0 0 6px; color: var(--mc-red-dark); }
.ghost-panel { background: transparent; box-shadow: none; border-style: dashed; border-color: #d9c7c9; }
.row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.panel input[type=text], .panel input[type=password], .panel input[type=file] {
  padding: 10px 13px; font-size: 15px; font-family: var(--body); border: 2px solid var(--line); border-radius: 11px; background: var(--card); }
.panel input:focus { outline: none; border-color: var(--mc-red); }
/* Tabelas largas (passwords, semanas) fazem scroll horizontal dentro do painel em ecrãs estreitos. */
.table-scroll { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .coord-table { margin-top: 0; }
.pass-table { min-width: 640px; }
.coord-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.coord-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); font-weight: 800; }
.coord-table td { padding: 10px; border-bottom: 1px solid var(--line); }
.coord-table tr.inactive { opacity: .42; }
.coord-table .pw { width: 160px; }
.sem-date { font: inherit; font-size: 13.5px; padding: 5px 7px; border: 1.5px solid var(--line); border-radius: 7px; width: 140px; }
.sem-date:focus { outline: none; border-color: var(--mc-red); }
.pass-table { font-size: 14px; }
.pass-table .pw { width: 108px; }
.pass-table th, .pass-table td { padding: 8px 7px; }
.navlink-static { color: rgba(255,255,255,.9); font-size: 13.5px; font-weight: 700; }
.faixa-tag { font-family: var(--body); font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: 999px; }

/* ===== Admin: cabeçalho fixo + barra de secções ===== */
.sticky-top { position: sticky; top: 0; z-index: 20; }
.sticky-top > .topbar { position: static; }
.admin-nav { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(70,20,25,.06); }
.admin-nav-in { max-width: 1100px; margin: 0 auto; display: flex; gap: 4px; padding: 7px 14px; overflow-x: auto; scrollbar-width: none; }
.admin-nav-in::-webkit-scrollbar { display: none; }
.admin-nav a { flex: 0 0 auto; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background .12s, color .12s; }
.admin-nav a:hover { background: var(--falta-bg); color: var(--mc-red); }
.conn.off .conn-label { color: var(--mc-yellow); }

/* ===== Admin: grupos (Operação de hoje / Configuração) ===== */
.group-head { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--ink); margin: 30px 4px 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; scroll-margin-top: 130px; }
.group-head:first-of-type { margin-top: 22px; }
.group-sub { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.admin-wrap .panel { scroll-margin-top: 130px; }

/* Configuração recolhível (um cartão, secções planas lá dentro — sem cartões aninhados) */
.config-group { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; scroll-margin-top: 130px; }
.config-group > summary { list-style: none; cursor: pointer; padding: 18px 24px; font-family: var(--display); font-size: 18px; color: var(--mc-red-dark); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.config-group > summary::-webkit-details-marker { display: none; }
.config-group > summary::after { content: "\25be"; color: var(--muted); font-size: 14px; transition: transform .18s var(--ease-out); }
.config-group[open] > summary::after { transform: rotate(180deg); }
.config-group > summary:hover { color: var(--mc-red); }
.config-body { padding: 0 20px 8px; }
.config-body .panel { border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; padding: 20px 4px; margin: 0; }
.config-body .panel:first-child { border-top: none; }
.config-body .danger-panel { border-top: none; background: var(--falta-bg); border-radius: 14px; padding: 18px; margin: 12px 0 4px; }

/* ===== Diálogos e toasts de marca (substituem confirm/prompt/alert) ===== */
.app-dialog { border: none; border-radius: 20px; padding: 0; max-width: 440px; width: calc(100vw - 32px); box-shadow: var(--shadow-lg); color: var(--ink); background: var(--card); }
.app-dialog::backdrop { background: rgba(38,32,31,.45); }
.app-dialog-form { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px; font-family: var(--body); }
.app-dialog-title { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--mc-red); margin: 0; }
.app-dialog-msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.app-dialog-input { padding: 12px 14px; font: inherit; font-size: 16px; border: 2px solid var(--line); border-radius: 12px; }
.app-dialog-input:focus { outline: none; border-color: var(--mc-red); }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.btn-danger { background: var(--alert); }
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); max-width: 90vw; text-align: center; opacity: 1; transform: translateY(0); transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast-err { background: var(--alert); }
.toast-ok { background: var(--mc-green-dark); }
.pw.pw-dup { border-color: var(--alert); background: var(--alert-bg); }

/* ===== Admin: mensagens de estado (verde = ok, vermelho = erro) ===== */
.msg { font-size: 14px; font-weight: 700; min-height: 18px; color: var(--muted); }
.msg.ok { color: var(--mc-green-dark); }
.msg.err { color: var(--alert); }

/* ===== Admin: campo de password com mostrar/ocultar ===== */
.pw-field { position: relative; display: inline-flex; align-items: center; }
.panel .pw-field input { padding-right: 40px; }
.pw-reveal { position: absolute; right: 8px; border: none; background: none; cursor: pointer; font-size: 15px; padding: 4px; line-height: 1; color: var(--muted); border-radius: 8px; transition: color .12s var(--ease-out); }
.pw-reveal:hover, .pw-reveal[aria-pressed="true"] { color: var(--mc-red); }

/* ===== Admin: input de ficheiro no sistema de marca ===== */
.file-input { cursor: pointer; max-width: 100%; min-width: 0; }
.file-input::file-selector-button { font: inherit; font-weight: 700; font-size: 13px; padding: 7px 15px; margin-right: 12px; border: none; border-radius: 999px; background: var(--falta-bg); color: var(--mc-red); cursor: pointer; transition: background .12s, color .12s; }
.file-input::file-selector-button:hover { background: var(--mc-red); color: #fff; }

/* ===== Admin: tabelas largas — cabeçalho fixo + 1ª coluna fixa no scroll ===== */
.table-scroll { overflow: auto; max-height: 72vh; }
.coord-table thead th { position: sticky; top: 0; background: var(--card); z-index: 2; }
.pass-table th:first-child, .pass-table td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }
.pass-table thead th:first-child { z-index: 3; }

/* ===== Equipas (monitor) ===== */
.lock-banner { background: #fff7ed; border: 1.5px solid #fed7aa; color: var(--falta); border-radius: 12px; padding: 11px 15px; font-weight: 700; margin-bottom: 16px; }
.teams-bar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.team-chip { font: inherit; font-weight: 700; font-size: 14px; padding: 8px 15px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: transform .14s var(--ease-out), border-color .14s var(--ease-out), color .14s var(--ease-out); }
.team-chip:hover { border-color: var(--mc-red); color: var(--mc-red); }
.team-chip:active { transform: scale(.97); }
.team-chip span { font-size: 12px; background: #f3ebec; color: var(--muted); border-radius: 999px; padding: 1px 8px; font-weight: 800; }
.team-chip.active { border-color: var(--mc-red); color: var(--mc-red); }
.team-chip.active span { background: var(--mc-red); color: #fff; }

/* Monitor: ecra-porta (escolher a equipa antes de ver as criancas) */
.pickteam { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 22px; }
.pick { font: inherit; text-align: left; background: var(--card); border: 2px solid var(--line); border-top: 5px solid var(--tc, var(--mc-red)); border-radius: 16px; padding: 18px 22px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.pick:hover { transform: translateY(-3px); border-color: var(--tc, var(--mc-red)); box-shadow: var(--shadow-lg); }
.pick:active { transform: translateY(-1px); box-shadow: var(--shadow); }
.pick-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.pick-count { font-size: 13px; font-weight: 700; color: var(--muted); }
/* Telemóvel do monitor, por baixo do nome da equipa. */
.pick-tel { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }

/* Monitor: barra fixa da equipa escolhida (dentro do modo montar) */
.teambar-fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 16px; margin-bottom: 18px; box-shadow: var(--shadow); }
.tbf-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbf-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tbf-name { font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbf-switch { font: inherit; font-weight: 800; font-size: 13.5px; padding: 9px 15px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; flex: 0 0 auto; transition: transform .14s var(--ease-out), border-color .14s var(--ease-out), color .14s var(--ease-out); }
.tbf-switch:hover { border-color: var(--mc-red); color: var(--mc-red); }
.tbf-switch:active { transform: scale(.97); }

/* Admin em modo check-in: distintivo na barra superior */
.admin-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em; background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
/* Seletor de coordenação no modo admin (topbar) — pill translúcido a condizer com .navlink/.admin-badge,
   em vez da caixa branca sólida de cantos direitos que destoava (sobretudo em mobile). */
.admin-coord-switch {
  font-family: var(--body); font-weight: 700; font-size: 14px; color: #fff;
  background-color: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px; padding: 7px 32px 7px 14px; min-height: 40px; max-width: 100%; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px;
  transition: background-color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.admin-coord-switch:hover { background-color: rgba(255,255,255,.28); border-color: #fff; }
.admin-coord-switch:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.admin-coord-switch option { color: var(--ink); background: #fff; font-weight: 600; }

/* Autorizações: botão "Sair" (só quando o login é pela password de autorizações) */
.aut-logout { position: fixed; top: 12px; right: 12px; z-index: 20; font: inherit; font-weight: 800; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; box-shadow: var(--shadow); }
.aut-logout:hover { border-color: var(--mc-red); color: var(--mc-red); }
.admin-switch { display: inline-flex; align-items: center; gap: 7px; }
.admin-switch-lbl { color: #fff; opacity: .85; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
#adminCoordSel { font: inherit; font-weight: 800; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }
#adminCoordSel option { color: #26201f; }

/* Banner de "sem ligação / dados desatualizados" (ver LiveConn em ui.js). Fixo no topo, por cima
   da topbar, para ser impossível de ignorar antes de recarregar. */
.stale-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: var(--mc-yellow); color: #3a2c00; font-weight: 800; font-size: 14px;
  padding: 10px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.18); text-align: center;
}
.stale-banner[hidden] { display: none; }
.stale-banner-txt { max-width: 760px; }
.stale-banner-btn {
  font: inherit; font-weight: 800; font-size: 13.5px; padding: 8px 18px; border-radius: 999px;
  border: 2px solid #3a2c00; background: #3a2c00; color: var(--mc-yellow); cursor: pointer;
  min-height: 40px; white-space: nowrap;
}
.stale-banner-btn:hover { background: #000; border-color: #000; }
/* Empurra o conteúdo para baixo enquanto o banner está visível (não tapa a topbar sticky). */
body.has-stale-banner { padding-top: 46px; }
body.has-stale-banner .topbar { top: 46px; }
@media (max-width: 640px) { body.has-stale-banner { padding-top: 76px; } body.has-stale-banner .topbar { top: 76px; } }

.ecols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ecol { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px 16px; box-shadow: var(--shadow); }
.ecol.target { background: #fbf6f7; border-color: #f0d8dc; }
.ecol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ecol-head h2 { font-size: 18px; margin: 0; }
.ecol-head #search { padding: 9px 13px; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; min-width: 150px; }
.ekid-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.ekid { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; cursor: pointer; transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.ekid:hover { border-color: var(--mc-red); transform: translateY(-1px); box-shadow: var(--shadow); }
.ekid:active { transform: translateY(0); box-shadow: none; }
.ecol.target .ekid { background: #fff; }
.ekid.sx-f { box-shadow: inset 3px 0 0 #f6a8cd; }
.ekid.sx-m { box-shadow: inset 3px 0 0 #8fb6f0; }
.ekid-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ekid-name { font-weight: 700; font-size: 14.5px; }
.ekid-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ch { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.ch-pen { background: #e7f6ec; color: #137a3a; }
.ch-sc { background: #fdf0e2; color: #b45309; }
.ch-ip { background: #e8effd; color: #1d4ed8; }
.ch-jrm { background: #f3e8ff; color: #7e22ce; }
.ch-tardio { background: #fff4d6; color: #9a6a00; }
.ekid-act { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.ekid:hover .ekid-act { color: var(--mc-red); }
/* Contactos do tutor (equipas fechadas) — link para ligar direto */
.ekid-contacts { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.ekid-tel { display: inline-flex; align-items: baseline; gap: 6px; width: fit-content; max-width: 100%; font-size: 13px; font-weight: 700; color: var(--mc-red); text-decoration: none; padding: 2px 0; }
.ekid-tel .tel-num { text-decoration: underline; letter-spacing: .2px; }
.ekid-tel .tel-nome { font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.mobile-tabs { display: none; }

/* Monitor em telemóvel: 1 coluna + separadores Disponíveis / A minha equipa */
@media (max-width: 700px) {
  .ecols { grid-template-columns: 1fr; }
  .mobile-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
  .mobile-tabs button { flex: 1; font: inherit; font-weight: 800; font-size: 14px; padding: 12px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
  .mobile-tabs button.active { border-color: var(--mc-red); color: var(--mc-red); }
  .mobile-tabs button span { background: #f3ebec; border-radius: 999px; padding: 1px 8px; font-size: 12.5px; }
  .mobile-tabs button.active span { background: var(--mc-red); color: #fff; }
  .ecols.show-pool .ecol.target { display: none; }
  .ecols.show-team .ecol:not(.target) { display: none; }
  .ecol { padding: 12px; }
  .ecol-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .ecol-head #search { width: 100%; min-width: 0; padding: 13px 15px; font-size: 16px; }   /* 16px evita zoom no iOS */
  .ekid { padding: 14px 14px; }
  .ekid-name { font-size: 16px; }
  .ekid-act { font-size: 14px; }
  .ekid-tel { font-size: 15.5px; padding: 6px 0; gap: 8px; }
  .ekid-tel .tel-nome { font-size: 13px; }
  .team-chip { padding: 11px 16px; font-size: 15px; }
  .teams-bar { gap: 8px; }
  .faixa-tag { display: none; }
  .navlink-static { display: none; }
  .wrap { padding: 16px 12px 50px; }
}

/* ===== Coordenador ===== */
.coord-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.coord-head { min-width: 0; }
.coord-stat { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.coord-stat .late, .team-card-head .mf.late { color: #9a6a00; }
.contacts { position: relative; min-width: 280px; flex: 1; max-width: 420px; }
.contacts #cq { width: 100%; padding: 11px 15px; font-size: 15px; border: 2px solid var(--line); border-radius: 999px; }
.contacts #cq:focus { outline: none; border-color: var(--mc-red); }
.cresults { position: absolute; left: 0; right: 0; top: 46px; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 320px; overflow: auto; }
.cresults:empty { display: none; }
.cres { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cres:last-child { border-bottom: none; }
.cres[data-id] { cursor: pointer; transition: background .14s var(--ease-out, ease-out); }
.cres[data-id]:hover { background: #faf6f6; }
.cres[data-id]:focus-visible { outline: none; background: #faf6f6; box-shadow: inset 0 0 0 2px var(--mc-red); }
.cres-nome { font-weight: 700; }
.cres-eq { font-size: 12px; color: var(--muted); }
.cres-tel { grid-column: 1/-1; color: var(--muted); }
.cres-tel a { color: var(--mc-red); font-weight: 700; text-decoration: none; }

.gen-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.gen-bar.locked { background: #f4fbf0; border-color: #c2e6ad; }
.gen-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gen-bar .warn { color: var(--falta); }
.gen-bar .ok { color: var(--mc-green-dark); }
a.btn-primary { text-decoration: none; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.team-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); }
.team-card.sem-equipa { background: var(--falta-bg); border-color: #f6c9cf; margin-bottom: 16px; }
/* Coluna (era linha) para o telemóvel do monitor caber POR BAIXO do nome da equipa.
   Sem telemóvel o cabeçalho fica visualmente igual ao que era. */
.team-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 10px; border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.tch-tel { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.team-card-head h3 { margin: 0; font-size: 16px; }
.team-card-head span { font-weight: 800; color: var(--muted); font-size: 13px; }
.team-card-head .mf { font-weight: 600; font-size: 12px; }
.crows { display: flex; flex-direction: column; gap: 6px; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; background: #faf8f8; }
.crow.sx-f { box-shadow: inset 3px 0 0 #f6a8cd; }
.crow.sx-m { box-shadow: inset 3px 0 0 #8fb6f0; }
.crow-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  cursor: pointer; border-radius: 6px; margin: -2px -4px; padding: 2px 4px;
  transition: background .14s var(--ease-out, ease-out), color .14s var(--ease-out, ease-out); }
.crow-name:hover { background: #fff; color: var(--mc-red, #dd0020); }
.crow-name:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mc-red, #dd0020); }
.crow .mover { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 5px; background: #fff; max-width: 120px; }
.crow .mover:disabled { opacity: .5; }

/* Equipas no admin */
.team-group { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.team-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.team-items { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
/* Equipa com contacto do monitor (bloco editável) */
.team-row { display: flex; flex-direction: column; gap: 7px; background: #f7f3f4; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 230px; box-shadow: 0 0 0 0 var(--mc-green); transition: box-shadow .25s var(--ease-out); }
.team-row.saved { box-shadow: 0 0 0 2px var(--mc-green); }
.tr-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; }
.tr-head em { font-style: normal; font-weight: 800; color: var(--mc-red); background: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.tr-head .ti-ren { margin-left: auto; }
.tr-head button { border: none; background: none; cursor: pointer; font-size: 14px; color: var(--muted); width: 24px; height: 24px; border-radius: 50%; transition: background .12s var(--ease-out), color .12s var(--ease-out); }
.tr-head .ti-del:hover { background: var(--alert-bg); color: var(--alert); }
.tr-head .ti-ren:hover { background: #e8effd; color: var(--primary); }
.tr-mon { display: flex; flex-direction: column; gap: 5px; }
.tr-mon input { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.tr-mon input:focus { outline: none; border-color: var(--mc-red); }
@media (max-width: 640px) { .team-row { min-width: 100%; } .tr-mon input { min-height: 40px; font-size: 16px; } }
.team-item { display: inline-flex; align-items: center; gap: 6px; background: #f7f3f4; border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-weight: 700; font-size: 13.5px; }
.team-item em { font-style: normal; font-weight: 800; color: var(--mc-red); background: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.team-item button { border: none; background: none; cursor: pointer; font-size: 14px; color: var(--muted); width: 20px; height: 20px; border-radius: 50%; transition: background .12s var(--ease-out), color .12s var(--ease-out); }
.team-item .ti-del:hover { background: var(--alert-bg); color: var(--alert); }
.team-item .ti-ren:hover { background: #e8effd; color: var(--primary); }
.cs-dot, .coord-table .cs-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* Estatísticas ao vivo */
.stats-panel { border-top: 5px solid var(--mc-red); }
.stats-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sem-tag { font-family: var(--body); font-size: 14px; font-weight: 700; background: #f3ebec; color: var(--ink); padding: 3px 12px; border-radius: 999px; vertical-align: middle; }
.big-stat { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; }
.big-num { font-family: var(--display); font-size: 54px; color: var(--mc-green-dark); line-height: 1; }
.big-of { font-size: 17px; color: var(--muted); font-weight: 600; }
.big-pct { margin-left: auto; font-family: var(--display); font-size: 30px; color: var(--mc-red); }
.big-late { font-size: 15px; font-weight: 800; color: #b45309; margin-left: 12px; }
.bar-outer { display: flex; height: 14px; background: #efe7e8; border-radius: 999px; overflow: hidden; }
.bar-inner { background: linear-gradient(90deg, var(--mc-green), #8fd861); transition: width .4s ease; }
.bar-late { background: var(--mc-yellow); transition: width .4s ease; }
.coord-stats { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.cs-row { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 12px; }
.cs-name { font-weight: 700; font-size: 14px; }
.cs-bar { display: flex; height: 10px; background: #efe7e8; border-radius: 999px; overflow: hidden; }
.cs-fill { transition: width .4s ease; }
.cs-late { background: var(--mc-yellow); transition: width .4s ease; }
.cs-num { font-weight: 800; font-size: 13px; color: var(--muted); text-align: right; }
.t-late { color: #b45309; font-weight: 800; font-size: 12px; }

/* Semanas + ações */
.badge-ativa { font-size: 10.5px; font-weight: 800; background: var(--mc-green); color: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
tr.sem-active { background: #f4fbf0; }
.sem-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mini { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .14s var(--ease-out), color .14s var(--ease-out); }
.mini:hover { border-color: var(--mc-red); color: var(--mc-red); }
.mini.danger:hover { border-color: var(--alert); color: var(--alert); }

/* Backups */
.bk-list { list-style: none; padding: 0; margin: 14px 0 0; max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.bk-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bk-list li:last-child { border-bottom: none; }
.topbar.admin .conn .dot { background: #aef0a0; }
.topbar.admin .conn.off .dot { background: var(--mc-yellow); }

/* Mudar criança de coordenação */
.movekid #mkSearch { width: 100%; max-width: 420px; padding: 11px 15px; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 999px; margin-top: 14px; }
.movekid #mkSearch:focus { outline: none; border-color: var(--mc-red); }
.mk-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-results:empty { display: none; }
.mk-empty { padding: 8px 2px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.mk-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-nome { font-weight: 700; font-size: 15px; }
.mk-meta { font-size: 12.5px; color: var(--muted); }
.mk-act { display: flex; align-items: center; gap: 8px; }
.mk-arrow { color: var(--muted); font-weight: 800; }
.mk-dest { font: inherit; font-size: 13.5px; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; cursor: pointer; }
.mk-go { white-space: nowrap; }

/* Lojinha no admin: dinheiro recebido depois do check-in (transferências) e créditos */
#lojinha .movekid #ljSearch { width: 100%; max-width: 420px; padding: 11px 15px; font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 999px; margin-top: 14px; }
#lojinha .movekid #ljSearch:focus { outline: none; border-color: var(--mc-red); }
.lj-adm-legenda { margin: 6px 0 0; padding-left: 20px; }
.lj-adm-legenda li { margin-bottom: 5px; }
.lj-adm-ficha { margin-top: 16px; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); }
.lj-adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lj-adm-nome { display: block; font-size: 17px; }
.lj-adm-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.lj-adm-kpi { flex: 1 1 150px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; }
.lj-adm-kpi span { font-size: 12px; color: var(--muted); }
.lj-adm-kpi b { font-size: 18px; font-variant-numeric: tabular-nums; }
.lj-adm-kpi.big { background: #f7f4f4; }
.lj-adm-kpi.big b { color: var(--mc-red); }
.lj-adm-fat { margin: 12px 0 0; font-size: 13.5px; }
.lj-adm-warn { color: var(--mc-red); }
.lj-adm-ok { color: var(--mc-green-dark); }
.lj-adm-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.lj-adm-add label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.lj-adm-add label.grow { flex: 1 1 200px; }
.lj-adm-add label.grow input { font: inherit; font-size: 14px; padding: 8px 11px; border: 1.5px solid var(--line); border-radius: 9px; }
.lj-adm-h3 { margin: 18px 0 8px; font-size: 14px; }
.lj-adm-movs { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.lj-adm-mov { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; }
.lj-adm-mov .t { font-weight: 700; white-space: nowrap; }
.lj-adm-mov .w { color: var(--muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-adm-mov .v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lj-adm-mov .v.pos { color: var(--mc-green-dark); }
.lj-adm-mov .v.neg { color: var(--ink); }

/* ====== Responsivo ====== */
@media (max-width: 640px) {
  .paths { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .topbar-in { gap: 10px; }
  .ci-grid { grid-template-columns: 1fr; }
  /* Painéis e listas mais compactos no telemóvel/tablet estreito */
  .wrap { padding: 20px 12px 48px; }
  .panel { padding: 18px 16px; border-radius: 14px; }
  .panel h2 { font-size: 17px; }
  .big-num { font-size: 46px; }
  /* Estatísticas por coordenação: nome+número em cima, barra ao vivo a 100% por baixo */
  .cs-row { grid-template-columns: 1fr auto; grid-template-areas: "name num" "bar bar"; row-gap: 6px; column-gap: 10px; }
  .cs-name { grid-area: name; }
  .cs-num { grid-area: num; }
  .cs-bar { grid-area: bar; height: 12px; }
  /* Lista do coordenador: equipas numa coluna e barra de contactos a 100% */
  .team-grid { grid-template-columns: 1fr; }
  .coord-top { flex-direction: column; }
  .contacts { max-width: none; width: 100%; min-width: 0; }
}

/* ===== Admin em tablet/telemóvel: alvos de toque ≥44px (≤1024px) ===== */
@media (max-width: 1024px) {
  .mini { min-height: 44px; padding: 10px 14px; font-size: 13px; }
  .coord-table .pw, .pass-table .pw, .sem-date { min-height: 44px; }
  .coord-table td .act { width: 24px; height: 24px; }
  .pw-reveal { min-width: 44px; min-height: 44px; right: 4px; }
  .panel .pw-field input { padding-right: 46px; }
  .team-item button { width: 32px; height: 32px; font-size: 16px; }
  .preco-x { width: 36px; height: 36px; }
  .admin-nav a { padding: 10px 14px; }
  .file-input::file-selector-button { padding: 10px 15px; }
}

/* ===== Inputs ≥16px em telemóvel (evita o zoom automático do iOS ao focar) ===== */
@media (max-width: 640px) {
  .list-head #search, .contact-row input, .line-in, .med-t, .med-h, .tardio-nota input, .co-search, #ci-obs, .money-in input { font-size: 16px; }
}

/* ===== Admin em tablet estreito/telemóvel: só a barra de secções acompanha ===== */
/* O cabeçalho, com muitos botões, ficaria alto de mais fixo — deixa-se rolar. */
@media (max-width: 820px) {
  .sticky-top { position: static; }
  .admin-nav { position: sticky; top: 0; z-index: 15; }
  .admin-wrap .panel, .group-head, .config-group { scroll-margin-top: 60px; }
}

/* ---------- Escritório ---------- */
.esc-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.esc-tabs button { font: inherit; font-weight: 800; font-size: 15px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .14s var(--ease-out), color .14s var(--ease-out), background .14s var(--ease-out); }
.esc-tabs button:hover:not(.active) { border-color: #f0d0d5; color: var(--ink); }
.esc-tabs button.active { border-color: var(--mc-red); color: var(--mc-red); background: var(--falta-bg); }
.esc-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 6px; }
.esc-kpi { background: var(--falta-bg, #fff6f7); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.esc-kpi-lbl { font-size: 13px; color: #5c5453; font-weight: 600; }
/* "check-in"/"check-out" não se partem ao meio no hífen quando a coluna é estreita. */
.nb { white-space: nowrap; }
/* font-size base = máximo; o JS (fitKpiVals) reduz por valor só quando um número grande
   — ex.: "€10 776,50" — não cabe na caixa, mantendo os curtos no tamanho grande. */
.esc-kpi-val { font-family: var(--display); font-size: 34px; line-height: 1.05; color: var(--mc-red); white-space: nowrap; }
.esc-kpi-sub { font-size: 13px; color: #5c5453; }
.esc-kpi:nth-child(2) .esc-kpi-val { color: var(--mc-green-dark); }
.esc-kpi:nth-child(3) .esc-kpi-val { color: #1f2937; }

.esc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 6px; }
.esc-card { border: 1px solid var(--line); border-top: 5px solid var(--cc, #64748b); border-radius: 14px; padding: 16px 18px; background: var(--card, #fff); box-shadow: var(--shadow); }
.esc-card-head { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.esc-card-rows { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.esc-card-rows.money { border-top: none; padding-top: 0; margin-top: 10px; }
.esc-line { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.esc-line.sub { font-size: 12.5px; color: #5c5453; padding-left: 10px; }
.esc-line.big { font-size: 15px; align-items: baseline; }
.esc-line.big em { font-style: normal; font-size: 12px; color: #5c5453; }
.esc-line .v { font-family: var(--display); font-size: 18px; color: var(--mc-red); white-space: nowrap; }
/* Valor informativo (ex.: lojinha no check-out) — tom neutro (o mesmo dos sub-textos destes cartões),
   para não se confundir com o € recebido (a vermelho). */
.esc-line .v-info { font-family: var(--display); color: #5c5453; white-space: nowrap; }
.esc-card-tot { margin-left: auto; font-family: var(--display); font-size: 20px; color: var(--mc-green-dark); }

/* Lista de fotografias à cobrança (moradas de envio) */
.cobranca-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cobranca-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 10px 18px; align-items: start; border: 1px solid var(--line); border-top: 5px solid var(--cc, #64748b); border-radius: 14px; padding: 12px 14px; background: var(--card, #fff); box-shadow: var(--shadow); }
.cobranca-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.cobranca-addr { display: flex; flex-direction: column; gap: 2px; }
.cobranca-name { font-weight: 800; font-size: 14px; }
.cobranca-morada { font-size: 14px; color: #5c5453; white-space: pre-line; }

@media (max-width: 640px) {
  .esc-totais { grid-template-columns: 1fr; }
  .esc-cards { grid-template-columns: 1fr; }
  .cobranca-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Lojinha (modo Loja no monitor) ---------- */
/* Seletor de modo: Montar equipa | Loja | Medicação | Restrições (embrulha p/ 2x2 no telemóvel) */
.modeseg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.modeseg button { flex: 1 1 140px; font: inherit; font-weight: 800; font-size: 14.5px; padding: 12px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .14s var(--ease-out), color .14s var(--ease-out), background .14s var(--ease-out); }
.modeseg button.active { border-color: var(--mc-red); color: var(--mc-red); background: #fff; }

/* ---------- Medicação / Restrições (abas coordenação-inteira no monitor) ---------- */
/* Sub-seletor: Horário | SOS | Nomes */
.medsub { display: flex; gap: 8px; margin-bottom: 16px; }
.medsub button { flex: 1; font: inherit; font-weight: 800; font-size: 14px; padding: 11px 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .14s var(--ease-out), color .14s var(--ease-out); }
.medsub button.active { border-color: var(--mc-red); color: var(--mc-red); background: #fff; }
.medsub button:hover:not(.active) { border-color: var(--mc-red); color: var(--mc-red); }

.med-search { margin-bottom: 12px; }
.med-search input { width: 100%; padding: 12px 15px; font-size: 16px; font-family: var(--body); border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); }
.med-search input:focus { outline: none; border-color: var(--mc-red); }
.med-hora-group { margin-bottom: 18px; }
.med-hora-head { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
/* Chips com só o nome; a informação abre num popup ao carregar. */
.med-names { display: flex; flex-wrap: wrap; gap: 8px; }
.med-name { font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: transform .14s var(--ease-out), border-color .14s var(--ease-out), box-shadow .14s var(--ease-out); }
.med-name:hover { border-color: var(--mc-red); transform: translateY(-1px); box-shadow: var(--shadow); }
.med-name:active { transform: translateY(0); box-shadow: none; }
.med-name:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 2px; }
.med-name.sx-f { box-shadow: inset 3px 0 0 #f6a8cd; }
.med-name.sx-m { box-shadow: inset 3px 0 0 #8fb6f0; }
/* Equipa por baixo do nome. A hierarquia é o ponto: o nome mantém 14,5px/700 e a equipa fica
   a 11px/600 em cinzento — lê-se quando se procura por ela, nunca antes do nome. */
.med-name { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.med-nm { line-height: 1.25; }
.med-eq { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.med-eq.vazia { font-style: italic; opacity: .7; }
/* No popup, ao lado do nome (o cabeçalho já é grande; não precisa de segunda linha). */
.medinfo-eq { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.medinfo-eq.vazia { font-style: italic; opacity: .7; }
@media (max-width: 640px) { .med-name { min-height: 44px; } }

/* Popup de informação médica (por cima; só leitura) */
.medinfo-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(30, 12, 16, .5); display: flex; align-items: center; justify-content: center; padding: 18px; }
.medinfo-modal { position: relative; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto; padding: 22px 22px 18px; border-top: 5px solid var(--mc-red); }
.medinfo-x { position: absolute; top: 10px; right: 12px; border: none; background: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; }
.medinfo-x:hover { color: var(--mc-red); background: #f3ebec; }
.medinfo-head { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--mc-red); margin: 0 34px 14px 0; line-height: 1.15; }
.medinfo-body { display: flex; flex-direction: column; gap: 8px; }
.medinfo-line { font-size: 15px; line-height: 1.4; color: var(--ink); background: #fbf7f7; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.medinfo-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
.medinfo-actions .btn-primary { min-height: 44px; padding: 0 20px; }

/* Barra de ferramentas da Medicação (botão adicionar) */
.med-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.med-add-btn { min-height: 40px; font-weight: 800; }

/* Popup de medicação editável: linhas com controlos + rodapé */
.med-modal .medinfo-body { margin-bottom: 4px; }
/* flex-wrap + ml-main a 100%: em ecrãs estreitos (telemóvel) o botão "Marcar como dada" + editar/apagar
   não cabem ao lado do texto; sem isto, o .ml-main colapsava a 0px e o texto (overflow visível) era
   pintado POR CIMA dos botões. Agora o texto ocupa a 1ª linha e as ações passam para baixo. */
.medinfo-line.ml { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.medinfo-line.ml.hl { border-color: var(--mc-red); }
.ml-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 100%; min-width: 0; }
.ml-t { font-size: 15px; line-height: 1.35; }
.ml-h { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ml-ctrls { flex: 0 0 auto; display: flex; gap: 6px; }
.ml-edit, .ml-del { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; min-height: 36px; }
.ml-edit { color: var(--mc-red); }
.ml-edit:hover { border-color: var(--mc-red); }
.ml-del { color: var(--alert); }
.ml-del:hover { border-color: var(--alert); background: var(--alert-bg); }
.med-modal-foot { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.med-modal-foot .btn-primary, .med-modal-foot .btn-ghost { min-height: 44px; padding: 0 18px; }

/* "Já dada" no popup de horário: botão que marca a medicação como dada (partilhado, reset às 3h) */
.medinfo-line.given { background: var(--ok-bg); border-color: #c2e6ad; }
.med-given { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 13px; padding: 8px 12px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: border-color .14s var(--ease-out), background .14s var(--ease-out), color .14s var(--ease-out); }
.med-given:hover { border-color: var(--mc-green); color: var(--mc-green-dark); }
.med-given:focus-visible { outline: 3px solid var(--mc-green); outline-offset: 2px; }
.med-given .mg-box { width: 22px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 2px solid var(--line); background: #fff; color: #fff; font-size: 15px; font-weight: 900; line-height: 1; }
.med-given.on { background: var(--mc-green); border-color: var(--mc-green-dark); color: #fff; }
.med-given.on .mg-box { background: transparent; border-color: rgba(255,255,255,.7); }
.med-given[disabled] { opacity: .55; cursor: default; }
/* ✓ nos chips do horário quando a criança já tem tudo dado nessa hora */
.med-name.med-done { background: var(--ok-bg); border-color: #c2e6ad; color: var(--mc-green-dark); }
.med-name.med-done .md-tick { color: var(--mc-green); font-weight: 900; }

/* Modal "SMS aos pais" (coordenador) */
.sms-modal { max-width: 560px; }
.sms-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sms-stat { flex: 1 1 90px; text-align: center; background: #f7f3f4; border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; }
.sms-stat b { display: block; font-size: 22px; line-height: 1.1; color: var(--ink); }
.sms-stat span { font-size: 11.5px; color: var(--muted); }
.sms-stat.ok b { color: var(--mc-green-dark); }
.sms-stat.err b { color: var(--alert); }
.sms-stat.warn b { color: #9a6a00; }
.sms-note { font-size: 13px; color: var(--muted); background: #fff8ec; border: 1px solid #f2e2bd; border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
.sms-ex { margin: 12px 0; }
.sms-ex-h { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.sms-ex-t { font-size: 13.5px; line-height: 1.45; background: #eef4ff; border: 1px solid #d3e0f7; border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.sms-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sms-foot button { min-height: 44px; padding: 0 16px; }
.sms-warn { font-size: 13.5px; color: var(--alert); background: var(--alert-bg); border: 1px solid #f3c8c8; border-radius: 8px; padding: 10px 12px; }
.sms-sending { font-size: 13.5px; color: var(--muted); }
.sms-result { font-size: 14px; background: var(--ok-bg); border: 1px solid #c2e6ad; border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.sms-result .err { color: var(--alert); }
.sms-result details { margin-top: 6px; }
.sms-result summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.sms-result ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }

/* Editor de linha no popup */
.med-edit-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.med-edit-note { font-weight: 600; font-size: 12px; color: var(--muted); }
.meded { display: flex; flex-direction: column; gap: 8px; }
.meded-t { padding: 11px 12px; font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); }
.meded-t:focus { outline: none; border-color: var(--mc-red); }
.meded-hs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meded-h { font: inherit; font-size: 15px; padding: 8px 9px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); min-height: 40px; }
.meded-h:focus { outline: none; border-color: var(--mc-red); }
.meded-addh { background: none; border: 1.5px dashed var(--line); color: var(--mc-red); font: inherit; font-weight: 700; font-size: 12.5px; padding: 8px 11px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.meded-addh:hover { border-color: var(--mc-red); }
/* Telemóvel: alvos de toque ≥44px e selects ≥16px (evita o zoom do iOS) */
@media (max-width: 640px) {
  .ml-edit, .ml-del { min-height: 44px; }
  .med-h-del { min-width: 44px; min-height: 44px; font-size: 20px; }
  .meded-h { font-size: 16px; min-height: 44px; }
  .meded-addh, .meded-t { min-height: 44px; }
  .medinfo-x { width: 44px; height: 44px; }
}

/* ---------- Restrições (aba do monitor) ---------- */
/* Nomes: nome + chips (um por restrição), com a cor atribuída no fundo */
.rest-person { margin-bottom: 14px; }
.rest-person-name { font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
/* Aqui o nome é um bloco simples (não é a pastilha flex), por isso a equipa precisa de
   display:block para não ficar colada ao nome na mesma linha. */
.rest-person-name .med-eq { display: block; font-weight: 600; margin-top: 1px; }
.rest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rest-chip { font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-align: left; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.rest-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.rest-chip:active { transform: translateY(0); box-shadow: none; }
.rest-chip:focus-visible { outline: 3px solid var(--mc-red); outline-offset: 2px; }
.rest-chip.has-cor { font-weight: 700; }
@media (max-width: 640px) { .rest-chip { min-height: 44px; } }

/* Restrições por cor: subtítulo com bola da cor + chips das crianças */
.rest-cor-group { margin-bottom: 18px; }
.rest-cor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.rest-cor-head .cor-legenda { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cor-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
/* Legenda editável ao lado da cor + contagem */
.cor-legenda { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink); background: #f3ebec; border: 1.5px dashed var(--line); border-radius: 999px; padding: 4px 11px; cursor: text; line-height: 1.2; min-height: 30px; display: inline-flex; align-items: center; }
.cor-legenda.vazia { color: var(--muted); font-weight: 700; }
.cor-legenda:hover { border-color: var(--mc-red); color: var(--mc-red); }
.cor-legenda-input { font: inherit; font-size: 13px; font-weight: 600; border: none; outline: none; background: transparent; min-width: 130px; color: var(--ink); }

/* Popup para escolher a cor da restrição */
.cor-modal { max-width: 400px; }
.cor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cor-swatch { font: inherit; font-weight: 700; font-size: 14px; padding: 14px 10px; border-radius: 12px; border: none; cursor: pointer; min-height: 48px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cor-swatch.sel { outline: 3px solid var(--ink); outline-offset: 2px; }
.cor-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cor-actions .btn-ghost { min-height: 44px; }

/* Lista de crianças da equipa em modo loja */
.loja-head { margin-bottom: 12px; }
.loja-head #lojaSearch { width: 100%; padding: 12px 15px; font-size: 16px; border: 1.5px solid var(--line); border-radius: 999px; }
.loja-list { display: flex; flex-direction: column; gap: 8px; }
.loja-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.loja-row:hover { border-color: var(--mc-red); transform: translateY(-1px); box-shadow: var(--shadow); }
.loja-row:active { transform: translateY(0); box-shadow: none; }
.loja-row.sx-f { box-shadow: inset 3px 0 0 #f6a8cd; }
.loja-row.sx-m { box-shadow: inset 3px 0 0 #8fb6f0; }
.loja-row-name { font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loja-row-saldo { flex: 0 0 auto; font-family: var(--display); font-size: 20px; font-weight: 700; }
.saldo-pos { color: var(--mc-green-dark); }
.saldo-low { color: #b45309; }
.saldo-neg { color: var(--mc-red); }

/* Modal do carrinho */
.loja-overlay { position: fixed; inset: 0; background: rgba(20,10,12,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.loja-modal { background: var(--card); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.3); width: 100%; max-width: 460px; max-height: 92vh; overflow: hidden auto; padding: 20px 20px 18px; position: relative; }
.loja-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.loja-x:hover { color: var(--mc-red); }
.loja-modal-head { display: flex; flex-direction: column; gap: 3px; padding-right: 40px; margin-bottom: 14px; }
.loja-modal-name { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.15; }
.loja-modal-saldo { font-size: 14px; color: var(--muted); }
.loja-modal-saldo strong { font-family: var(--display); font-size: 17px; }
.loja-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pricebtn { font: inherit; font-weight: 800; font-size: 15px; padding: 12px 14px; min-width: 64px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: transform .14s var(--ease-out), border-color .14s var(--ease-out), background .14s var(--ease-out); }
.pricebtn:hover { border-color: var(--mc-red); color: var(--mc-red); }
.pricebtn:active { background: #fbeef0; transform: scale(.96); }
.pricebtn.other { border-style: dashed; color: var(--muted); }
.loja-other { display: flex; gap: 8px; margin-bottom: 12px; }
.loja-other input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 16px; border: 1.5px solid var(--line); border-radius: 10px; }
.loja-other button { flex: 0 0 auto; }
.loja-other button { font: inherit; font-weight: 800; padding: 0 16px; border-radius: 10px; border: 2px solid var(--mc-red); background: var(--mc-red); color: #fff; cursor: pointer; }
.cart { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; min-height: 20px; }
.cart-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 10px 0; margin: 0; }
.cart-line { display: flex; align-items: center; justify-content: space-between; background: #f7f3f4; border-radius: 10px; padding: 9px 14px; font-weight: 700; }
.cart-del { width: 30px; height: 30px; border-radius: 50%; border: none; background: #eadfe1; color: var(--mc-red); font-size: 18px; line-height: 1; cursor: pointer; }
.cart-total { text-align: right; font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.cart-total strong { font-family: var(--display); font-size: 18px; }
.loja-actions { display: flex; gap: 10px; }
.loja-actions .btn-ghost, .loja-actions .btn-primary { flex: 1; }
.loja-foot { display: flex; gap: 14px; justify-content: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.linkbtn { background: none; border: none; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--muted); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--mc-red); }
.loja-hist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.hist-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; background: #faf7f8; border-radius: 10px; padding: 8px 12px; }
.hist-info { min-width: 0; }
.hist-info b { font-weight: 800; }
.hist-sub { color: var(--muted); font-size: 12px; }
.hist-del { flex: 0 0 auto; background: none; border: 1.5px solid var(--line); border-radius: 8px; color: var(--mc-red); font-weight: 800; font-size: 12px; padding: 5px 9px; cursor: pointer; align-self: flex-start; }
.hist-credito b { color: var(--mc-green-dark); }
/* Itens de uma compra no histórico (cada um removível) */
.hist-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hist-item { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12.5px; font-weight: 700; }
.hist-item-del { width: 20px; height: 20px; border-radius: 50%; border: none; background: #f0e2e4; color: var(--mc-red); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.hist-item-del:hover { background: var(--mc-red); color: #fff; }

/* Check-out: nota de saldo da loja negativo (crédito por cobrar) */
.co-loja-debt { display: inline-block; align-self: flex-start; margin-top: 1px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--mc-red); border-radius: 999px; padding: 1px 8px; }
.co-loja-refund { display: inline-block; align-self: flex-start; margin-top: 1px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--mc-green); border-radius: 999px; padding: 1px 8px; }

/* Admin: preços da loja, cada um num quadradinho */
.loja-precos-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.preco-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 16px; font-family: var(--display); font-size: 18px; font-weight: 700; box-shadow: var(--shadow); }
.preco-x { width: 26px; height: 26px; border-radius: 8px; border: none; background: #f0e2e4; color: var(--mc-red); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.preco-x:hover { background: var(--mc-red); color: #fff; }

/* Ecrãs baixos (ex.: 360×640): compacta o modal do carrinho para caber sem tanto scroll */
@media (max-height: 720px) {
  .loja-modal { padding: 14px 16px; max-height: 96vh; }
  .loja-modal-head { margin-bottom: 8px; }
  .loja-prices { gap: 6px; margin-bottom: 8px; }
  .pricebtn { padding: 9px 12px; font-size: 14.5px; }
  .loja-other { margin-bottom: 8px; }
  .cart-line { padding: 7px 12px; }
  .loja-foot { margin-top: 10px; padding-top: 8px; }
}

/* ---------- Coordenador: seletor Equipas/Lojinha + vista Lojinha ---------- */
.coord-modeseg { max-width: 420px; margin: 0 0 18px; }
.lj-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 12px; }
.lj-grand { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: var(--muted); }
.lj-grand b { font-family: var(--display); font-size: 18px; color: var(--ink); margin-left: 4px; }
.lj-grand-deve b { color: var(--mc-red); }
.lj-grand-devolver b { color: var(--mc-green-dark); }
.lj-hint { font-size: 13px; margin: 0 2px 16px; }
.lj-hint .lj-neg { color: var(--mc-red); }
.lj-team { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.lj-team-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lj-team-head h3 { margin: 0; font-size: 18px; }
.lj-team-tot { font-size: 13px; color: var(--muted); }
.lj-team-tot .lj-neg { color: var(--mc-red); }
.lj-table { overflow-x: auto; }
.lj-head-row, .lj-row { display: grid; grid-template-columns: minmax(160px, 2fr) 92px 92px 92px 100px 28px; gap: 6px; align-items: center; min-width: 560px; }
.lj-head-row { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 10px; }
.lj-head-row span:not(:first-child), .lj-num { text-align: right; }
.lj-row { padding: 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background .14s var(--ease-out), border-color .14s var(--ease-out); }
.lj-row:hover { background: #faf6f7; border-color: #f0d8dc; }
.lj-row.open { background: #faf6f7; border-color: #f0d8dc; }
.lj-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.lj-pos { color: var(--mc-green-dark); }
.lj-low { color: #b45309; }
.lj-neg { color: var(--mc-red); }
.lj-zero { color: var(--muted); }
.lj-exp { text-align: center; color: var(--muted); transition: transform .1s; }
.lj-row.open .lj-exp { transform: rotate(90deg); }
.lj-detail { min-width: 560px; padding: 4px 10px 10px 20px; display: flex; flex-direction: column; gap: 5px; }
.lj-detail[hidden] { display: none; }   /* o atributo hidden tem de ganhar ao display:flex acima */
.lj-mov { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; }
.lj-mov-t { font-weight: 800; }
.lj-mov-when { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-mov-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.lj-det-msg { color: var(--muted); font-size: 13px; margin: 4px 0; }

/* ===== Preferência de movimento reduzido (respeitada em toda a app) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Alvos de toque ≥44px em TODOS os ecrãs (tablet/telemóvel, ≤1024px) =====
   Colocado no fim do ficheiro de propósito: precisa de vencer, por ordem de
   cascata, as regras-base dos componentes definidas acima (mesma especificidade). */
@media (max-width: 1024px) {
  /* Monitor (telemóvel-first) */
  .tbf-switch { min-height: 44px; }
  .cart-del, .loja-x { min-width: 44px; min-height: 44px; }
  .hist-del { min-height: 44px; }
  .hist-item-del { width: 44px; height: 44px; font-size: 18px; }
  .linkbtn { min-height: 44px; padding: 8px 4px; }
  .pricebtn { min-height: 44px; }
  /* Coordenador — check-in (coord.js) */
  .swrow { min-height: 44px; }
  .backbtn { width: 44px; height: 44px; }
  .c-del, .line-del, .med-line-del { min-width: 44px; min-height: 44px; }
  .addc, .addline, .addmed, .med-add-h { min-height: 44px; }
  .med-h { min-height: 44px; }
  /* Coordenador — painel (coordenador.js) */
  .crow .mover { min-height: 44px; }
  .navlink { min-height: 44px; display: inline-flex; align-items: center; }
  .cio-seg { min-height: 44px; }
  /* Escritório */
  .esc-tabs button { min-height: 44px; }
  /* Check-out: aumenta o botão € e reserva a goteira p/ não tapar o nome */
  .co-pay { width: 40px; height: 40px; font-size: 16px; }
  .co-kid.has-photo { padding-right: 50px; }
  .pay-head .x { min-width: 44px; min-height: 44px; }
  /* Autorizações (pais, tablet) */
  .aut-back { min-height: 44px; padding: 10px 4px; }
  .aut-sigmodal-x { min-width: 44px; min-height: 44px; padding: 10px; }
}

/* ---------- Check-out: criança que já saiu do campo ----------
   Fica visível mas esbatida (cinza + meia opacidade) e sem o "lift" do hover.
   Continua clicável (abrir loja, ver saldo, desfazer engano). A etiqueta "✓ saiu"
   marca-a de forma inequívoca. Aplica-se em todos os painéis (equipa, loja, medicação, restrições). */
.is-out { opacity: .5; filter: grayscale(1); }
.ekid.is-out:hover, .loja-row.is-out:hover, .med-name.is-out:hover { transform: none; box-shadow: none; border-color: var(--line); }
.ekid.is-out:hover .ekid-act { color: inherit; }
.ch-out { background: #6b7280; color: #fff; }

/* ---------- Preparar semana (assistente por etapas — admin.js) ----------
   Cada passo simula primeiro; o relatório fica num bloco com scroll próprio. */
.prep-picker { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: .2em 0 1.2em; }
.prep-select { padding: 10px 12px; font-size: 15px; font-family: var(--body); border: 2px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); min-height: 44px; max-width: 100%; }
.prep-select:focus { outline: none; border-color: var(--mc-red); }
.prep-step { border: 2px solid var(--line); border-radius: 16px; margin: 0 0 14px; overflow: hidden; background: var(--card); }
.prep-step-head { display: flex; align-items: center; gap: .6em; padding: 12px 16px; background: #faf5f5; border-bottom: 1px solid var(--line); }
.prep-step-head h3 { margin: 0; font-size: 16px; }
.prep-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--mc-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.prep-step-body { padding: 14px 16px; }
.prep-msg { margin-top: .5em; }
.prep-report:not(:empty) { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fcfafa; max-height: 460px; overflow: auto; font-size: 14px; }
.prep-report h4 { margin: 14px 0 6px; font-size: 14px; }
.prep-report h4:first-child, .prep-report .prep-sum:first-child { margin-top: 0; }
.prep-sum { font-size: 15px; margin: 0 0 8px; }
.prep-list { margin: 4px 0 4px; padding-left: 20px; }
.prep-list li { margin: 3px 0; }
.prep-list ul { margin: 2px 0; }
.prep-ok { color: var(--mc-green); margin: 4px 0; }
.prep-warn { color: var(--mc-red-dark); }
.prep-funnel { background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin: 4px 0; }
.prep-report details { margin: 8px 0; }
.prep-report summary { cursor: pointer; font-weight: 600; }

/* ---------- Passo 5: Equipas & coordenadores (grelha — admin.js) ---------- */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 10px; }
.eq-coord { border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card); min-width: 0; }
.eq-coord legend { font-weight: 700; padding: 0 6px; color: var(--mc-red-dark); }
.eq-coordenador { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 6px; margin-bottom: 8px; }
.eq-coordenador label { font-size: 13px; color: var(--muted); font-weight: 600; }
.eq-coordenador input, .eq-table input, .eq-table select { padding: 8px 10px; font-size: 14px; font-family: var(--body);
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); width: 100%; min-width: 0; }
.eq-coordenador input:focus, .eq-table input:focus, .eq-table select:focus { outline: none; border-color: var(--mc-red); }
.eq-table { width: 100%; border-collapse: collapse; }
.eq-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 2px 4px; }
.eq-table td { padding: 2px 4px; }
.eq-table td:nth-child(1) { width: 40%; } .eq-table td:nth-child(2) { width: 32%; } .eq-table td:nth-child(4) { width: 34px; }
.eq-table .eq-del { width: 32px; padding: 6px 0; }
.eq-add { margin-top: 6px; }