/* =====================================================================
   Estilos próprios da aplicação (complementam estilos.css, partilhado
   com o protótipo). Aqui vive o que o protótipo não tinha: login,
   barra de estado da fila offline, resolução de conflitos.
   ===================================================================== */

/* ---------- login ---------- */
.login{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.login-caixa{width:100%;max-width:340px}
.login-caixa h1{
  font-family:var(--narrow);
  font-size:34px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 4px;text-align:center;
}
.login-sub{
  text-align:center;color:var(--muted);
  font-size:13px;margin:0 0 30px;
}
.login-erro{
  background:var(--red-dim);
  border:1px solid rgba(255,97,82,.3);
  border-radius:11px;
  color:#FFB3AB;
  font-size:13.5px;
  padding:11px 14px;
  margin-bottom:14px;
}
.login .btn{margin-top:8px}

/* ---------- app shell ---------- */
.app{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
}
.device{min-height:100vh}

/* ---------- barra de estado (offline / fila) ---------- */
.barra-estado{
  flex:none;
  font-size:12.5px;font-weight:600;
  padding:9px 14px;
  text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.barra-estado.offline{
  background:var(--red-dim);
  color:#FFB3AB;
  border-bottom:1px solid rgba(255,97,82,.3);
}
.barra-estado.fila{
  background:var(--amber-dim);
  color:var(--amber);
  border-bottom:1px solid rgba(255,176,32,.25);
}
.barra-estado button{
  appearance:none;cursor:pointer;
  background:var(--amber);border:0;border-radius:8px;
  color:#0C1116;font-family:var(--ui);
  font-size:12px;font-weight:700;
  padding:5px 11px;
}
.barra-estado button:disabled{opacity:.6;cursor:default}

/* ---------- fotografias reais (o protótipo usava gradientes) ---------- */
.photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

/* ---------- rodapé das folhas ---------- */
.sheet-foot{
  flex:none;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
}

/* ---------- título de vista no detalhe ---------- */
.cd-titulo{
  font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

/* ---------- registo guardado offline ---------- */
.checkmark.aguardar{
  background:var(--amber-dim);
  border-color:var(--amber);
}
.checkmark.aguardar svg{stroke:var(--amber)}

/* ---------- resolução de conflitos de ficha ---------- */
.conflito{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px 15px;
  margin-bottom:10px;
}
.conflito .c-sub{
  font-size:12.5px;color:var(--muted);margin-top:6px;
}
.conflito select{
  appearance:none;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  font-family:var(--ui);
  font-size:14px;font-weight:600;
  padding:11px 13px;
  min-width:140px;
}
.conflito select:focus{outline:none;border-color:var(--amber)}

/* ---------- campo de data nativo ---------- */
input[type=date]{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--text);
  font-family:var(--ui);
  font-size:16px;
  padding:13px 15px;
  color-scheme:dark;
}
input[type=date]:focus{outline:none;border-color:var(--amber);background:var(--surface-2)}