/* ============================================================
   Escalas Porto 2026 — Design System "QuestUI" (variante clara)
   Fundo claro · Azul (Egyptian Blue) como cor principal ·
   nogueira só em pequenos toques · ouro como acento discreto.
   Tipografia: Noto Sans (igual ao jw.org).
   Paleta: Egyptian Blue #2d3091 · Sky Blue #92cce4
           Golden Bronze #c6962a · Deep Walnut #4b2b05
   ============================================================ */

/* Tipografia do jw.org: NotoSans (títulos + corpo), NotoSerif em apoio. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Serif:wght@400;600;700&display=swap');

:root {
  /* Fontes (iguais às do jw.org) */
  --font-head: "Noto Sans", Arial, "Arial Unicode MS", sans-serif;
  --font-body: "Noto Sans", Arial, "Arial Unicode MS", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Azul — cor principal */
  --blue: #2d3091;           /* Egyptian Blue */
  --blue-deep: #232673;
  --blue-bright: #3a3fb4;
  --sky: #92cce4;            /* Sky Blue — realce/info/ligações */
  --sky-soft: #d6ecf5;

  /* Acentos discretos */
  --gold: #c6962a;           /* Golden Bronze — acento, com parcimónia */
  --gold-soft: #f0e2c2;
  --walnut: #4b2b05;         /* Deep Walnut — só pequenos toques */

  /* Fundos claros */
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --tint: #fbf6ec;           /* toque quente de nogueira muito ténue */

  /* Texto */
  --ink: #232743;
  --muted: #5d6580;
  --on-blue: #f3f6fc;        /* texto sobre azul */

  /* Linhas */
  --border: #d6deea;
  --border-strong: #bcc8da;

  /* Estados */
  --success: #1f9d57;
  --warning: #b8860b;
  --error: #b3261e;
  --error-text: #b3261e;

  /* Sombras (tom azul, tema claro) */
  --shadow-sm: 0 1px 2px rgba(45,48,145,.07), 0 1px 3px rgba(45,48,145,.06);
  --shadow: 0 2px 5px rgba(45,48,145,.06), 0 14px 30px -18px rgba(45,48,145,.34);
  --shadow-md: 0 8px 26px -12px rgba(45,48,145,.40);
  --glow: 0 0 0 4px rgba(146,204,228,.5);

  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px;
  --maxw: 660px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Fundo claro com brilho azul subtil + textura ornamental ténue */
.tile-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(146,204,228,.35), transparent 55%),
    radial-gradient(90% 70% at 50% 115%, rgba(45,48,145,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%232d3091' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M32 4 L60 32 L32 60 L4 32 Z'/%3E%3Cpath d='M32 18 L46 32 L32 46 L18 32 Z'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%232d3091' fill-opacity='.08' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 64px 64px;
}

/* --- Masthead (faixa azul = cor principal) --- */
.masthead { position: sticky; top: 0; z-index: 20; }
.mast-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  color: var(--on-blue);
}
.azulejo-mark { /* crista — único toque de ouro no topo */
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #e3b756, var(--gold));
  border: 1.5px solid #e9c777; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 3px rgba(45,38,5,.25);
}
.azulejo-mark::after {
  content: ""; width: 12px; height: 12px; border: 1.5px solid var(--blue-deep); border-radius: 1px;
}
.mast-titles { display: flex; flex-direction: column; line-height: 1.1; flex: 1; }
.kicker {
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--sky); font-weight: 600;
}
.wordmark { font-family: var(--font-head); font-weight: 700; font-size: 1.28rem; letter-spacing: .04em; color: #fff; }
.mast-rule { height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.link-btn {
  background: transparent; border: 1px solid rgba(243,246,252,.55);
  color: var(--on-blue); padding: 7px 14px; border-radius: var(--r); cursor: pointer;
  font-family: var(--font-head); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; transition: all .25s;
}
.link-btn:hover { background: rgba(255,255,255,.14); }

/* Seletor de língua (na faixa azul) */
.lang-switch {
  flex: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--on-blue);
  border: 1px solid rgba(243,246,252,.45); border-radius: var(--r);
  padding: 6px 10px; font-family: var(--font-head); font-size: .72rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s, border-color .25s;
  -webkit-appearance: none; appearance: none;
}
.lang-switch:hover { background: rgba(255,255,255,.2); }
.lang-switch:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(146,204,228,.35); }
.lang-switch option { color: var(--ink); }

/* --- Layout --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 44px; }
.foot {
  max-width: var(--maxw); margin: 0 auto; text-align: center; color: var(--muted);
  font-family: var(--font-head); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 20px 40px;
}
.foot .sep { color: var(--gold); margin: 0 10px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s ease both; }

/* --- Cartões --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 26px 24px; position: relative;
}
/* Cartão importante: acento azul no topo + moldura interior (toque nogueira) */
.card.framed { border-top: 2px solid var(--blue); }
.card.framed::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-soft);
  border-radius: var(--r-sm); pointer-events: none;
}
.center { text-align: center; }

h1 {
  font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; line-height: 1.2;
  letter-spacing: .01em; margin: 0 0 10px; color: var(--blue);
}
.muted { color: var(--muted); margin: 6px 0; }

/* --- Login --- */
.login-eyebrow {
  font-family: var(--font-head); font-size: .66rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 8px;
}
label { display: block; font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--ink); margin: 22px 0 6px; }
input[type=tel] {
  width: 100%; height: 44px; padding: 8px 14px; font-size: 1.1rem;
  font-family: var(--font-body); letter-spacing: .06em; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s;
}
input[type=tel]::placeholder { color: #9aa3b6; }
input[type=tel]:hover { border-color: var(--blue); }
input[type=tel]:focus { outline: none; border: 2px solid var(--blue); box-shadow: 0 0 0 3px rgba(45,48,145,.18); }

.btn-primary {
  width: 100%; margin-top: 22px; min-height: 48px; padding: 12px 30px; cursor: pointer;
  font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: .06em;
  color: var(--on-blue); background: var(--blue); border: 1.5px solid var(--blue-bright);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  transition: transform .06s, background .2s, box-shadow .25s;
}
.btn-primary:hover { background: var(--blue-deep); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn-quiet {
  margin-top: 18px; background: transparent; border: 1px solid var(--blue);
  color: var(--blue); min-height: 40px; padding: 8px 22px; border-radius: var(--r);
  cursor: pointer; font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; transition: all .25s;
}
.btn-quiet:hover { background: rgba(45,48,145,.06); }

.msg { margin-top: 16px; font-size: .9rem; min-height: 1.2em; font-family: var(--font-body); }
.msg.err { color: var(--error-text); font-weight: 600; }
.msg.ok  { color: var(--blue); }

.seal { font-family: var(--font-head); font-size: 2.4rem; color: var(--gold); margin-bottom: 4px; }

.spinner {
  width: 30px; height: 30px; margin: 4px auto 14px;
  border: 3px solid var(--border); border-top-color: var(--blue);
  border-radius: 9999px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Dashboard --- */
.hello { padding: 4px 2px 18px; }
.hello .greet { font-family: var(--font-head); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.hello h1 { font-size: 2rem; margin-top: 6px; }
.hello .meta { color: var(--muted); font-size: .95rem; }
.hello .meta .role { color: var(--blue); font-weight: 700; }

/* Próximo turno — destaque azul */
.next {
  position: relative; overflow: hidden; color: var(--on-blue); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 22px;
  background: linear-gradient(150deg, var(--blue-bright), var(--blue) 55%, var(--blue-deep));
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-md);
}
.next::after {
  content: ""; position: absolute; right: -40px; top: -34px; width: 140px; height: 140px;
  transform: rotate(45deg); border: 1px solid rgba(146,204,228,.35); border-radius: 8px;
}
.next .lbl { font-family: var(--font-head); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky); font-weight: 600; }
.next .big { font-family: var(--font-head); font-size: 1.5rem; margin: 6px 0; font-weight: 700; color: #fff; }
.next .where { color: var(--sky-soft); font-size: .95rem; }
.next .when-pill {
  display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: var(--r-sm);
  background: rgba(198,150,42,.22); border: 1px solid var(--gold);
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft);
}

.section-label {
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin: 14px 2px 12px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }

.shifts { display: flex; flex-direction: column; gap: 14px; }
.shift {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .3s, border-color .3s;
}
.shift.open { border-color: var(--blue); box-shadow: var(--shadow), var(--glow); }
.shift-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; position: relative; }
.shift-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); }
.shift-head.live::before { background: var(--error); }
.daychip { flex: none; width: 52px; text-align: center; line-height: 1; border-right: 1px solid var(--border); padding-right: 12px; }
.daychip .d { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.daychip .m { font-family: var(--font-head); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.shift-main { flex: 1; min-width: 0; }
.shift-time { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.shift-where { color: var(--muted); font-size: .87rem; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Chips/badges — maiúsculas espaçadas */
.badge {
  font-family: var(--font-head); font-size: .6rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--surface-2); color: var(--blue); border: 1px solid var(--border-strong);
}
.badge.role-CAP { background: var(--gold-soft); color: #8a5a14; border-color: var(--gold); }
.badge.role-KM  { background: rgba(45,48,145,.1); color: var(--blue); border-color: var(--blue-bright); }
.badge.door     { background: rgba(146,204,228,.22); color: #1d5a78; border-color: var(--sky); }
.badge.live     { background: rgba(179,38,30,.12); color: var(--error); border-color: var(--error); }
.badge.dept     { background: var(--blue); color: var(--on-blue); border-color: var(--blue-bright); }
.badge.novo     { background: rgba(31,157,87,.14); color: var(--success); border-color: var(--success); }
.badge.alterado { background: var(--gold-soft); color: #8a5a14; border-color: var(--gold); }
.cal-sub { margin: -10px 0 18px; }
.chev { color: var(--blue); transition: transform .25s; font-size: .9rem; }
.shift.open .chev { transform: rotate(90deg); }

.shift-body { display: none; padding: 0 18px 16px; }
.shift.open .shift-body { display: block; animation: rise .35s ease both; }

.team-count {
  font-family: var(--font-head); font-size: .62rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 10px 0 2px;
}
.team-filter {
  width: 100%; height: 40px; padding: 8px 12px; margin: 8px 0 2px; font-size: .95rem;
  font-family: var(--font-body); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r);
}
.team-filter:focus { outline: none; border: 2px solid var(--blue); box-shadow: 0 0 0 3px rgba(45,48,145,.15); }
.team { list-style: none; margin: 0; padding: 0; }
.member { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.desig {
  display: inline-block; font-family: var(--font-head); font-size: .54rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
  padding: 2px 6px; margin-left: 4px; border-radius: var(--r-sm);
  background: var(--gold-soft); color: #8a5a14; border: 1px solid var(--gold);
}
.tag {
  flex: none; font-family: var(--font-head); font-size: .56rem; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 7px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--blue); border: 1px solid var(--border-strong);
  min-width: 36px; text-align: center;
}
.tag.CAP { background: var(--gold-soft); color: #8a5a14; border-color: var(--gold); }
.tag.KM  { background: rgba(45,48,145,.1); color: var(--blue); border-color: var(--blue-bright); }
.who { flex: 1; min-width: 0; }
.nm { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.nm .si { color: var(--muted); font-weight: 400; font-size: .85rem; }
.sub { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts { display: flex; gap: 8px; flex: none; }
.ico-btn {
  width: 42px; height: 42px; display: grid; place-items: center; text-decoration: none;
  border-radius: var(--r); font-size: 1.05rem; border: 1px solid var(--border-strong);
  background: var(--surface-2); transition: transform .06s, box-shadow .25s, border-color .25s;
}
.ico-btn:active { transform: scale(.94); }
.ico-btn:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.ico-btn.wa  { border-color: rgba(31,157,87,.45); }
.ico-btn.tel { border-color: var(--sky); }

.empty { text-align: center; color: var(--muted); padding: 30px 10px; font-style: italic; }

/* --- Consentimento RGPD --- */
.consent-list { margin: 14px 0 18px; padding-left: 18px; color: var(--ink); }
.consent-list li { margin: 8px 0; font-size: .92rem; line-height: 1.6; }
.consent-list strong { color: var(--blue); }
.consent-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px;
  font-size: .92rem; color: var(--ink); font-weight: 600; cursor: pointer;
}
.consent-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--blue); }

/* --- Contagem decrescente (pílula do próximo turno) --- */
.next .when-pill { font-family: var(--font-mono); letter-spacing: .04em; }
.next-cal {
  position: absolute; right: 18px; bottom: 18px; text-decoration: none; font-size: 1.3rem;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r);
  background: rgba(255,255,255,.14); border: 1px solid rgba(146,204,228,.4);
}
.next-cal:hover { background: rgba(255,255,255,.24); }

/* --- Filtros por dia --- */
.day-pills {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 0 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.day-pills::-webkit-scrollbar { display: none; }
.day-pill {
  flex: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  padding: 8px 14px; border-radius: 9999px;
  background: var(--surface); color: var(--muted); border: 1.5px solid var(--border);
  transition: all .18s;
}
.day-pill:hover { border-color: var(--blue); color: var(--blue); }
.day-pill.active { background: var(--blue); color: var(--on-blue); border-color: var(--blue-bright); }
.day-pill .dp-n { opacity: .7; font-size: .82em; margin-left: 2px; }

/* --- Botões de calendário no turno --- */
.cal-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cal-btn {
  text-decoration: none; font-family: var(--font-head); font-size: .76rem; font-weight: 600;
  padding: 8px 14px; border-radius: var(--r); border: 1.5px solid var(--blue);
  background: var(--blue); color: var(--on-blue); transition: all .18s;
}
.cal-btn:hover { background: var(--blue-deep); }
.cal-btn.ghost { background: transparent; color: var(--blue); }
.cal-btn.ghost:hover { background: rgba(45,48,145,.06); }

/* ============================================================
   Tablette / iPad (ex.: iPad 13") — usar a largura do ecrã
   ============================================================ */
@media (min-width: 820px) {
  :root { --maxw: 940px; }
  .wrap { padding: 34px 28px 56px; }
  /* Ecrãs simples (login, e-mail, consentimento, loading) não esticam */
  #view-login, #view-sent, #view-consent, #view-loading {
    max-width: 520px; margin-left: auto; margin-right: auto;
  }
  /* Turnos em 2 colunas; o cartão aberto ocupa a linha toda */
  .shifts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .shift.open { grid-column: 1 / -1; }
  .hello h1 { font-size: 2.3rem; }
}

@media (min-width: 1180px) {
  :root { --maxw: 1080px; }
  .shifts { grid-template-columns: 1fr 1fr 1fr; }
}