/* Reuniões Alexandre Guimarães — visual das duas telas */

:root{
  --azul:#0f2038;
  --azul-2:#1b3862;
  --acento:#c9a24a;
  --tinta:#111a26;
  --tinta-2:#54637a;
  --tinta-3:#8593a6;
  --linha:#dde3ec;
  --fundo:#eef1f6;
  --card:#ffffff;
  --card-2:#f7f9fc;
  --ok:#0d5e3d;
  --ok-fundo:#e8f4ee;
  --ok-linha:#bcdfcc;
  --erro:#8f1d17;
  --erro-fundo:#fdeceb;
  --erro-linha:#f3c9c6;
  --sombra:0 1px 2px rgba(15,32,56,.06), 0 8px 24px rgba(15,32,56,.06);
  --raio:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --azul:#0b1626;
    --azul-2:#16294a;
    --acento:#d8b465;
    --tinta:#e8edf5;
    --tinta-2:#9aa8bd;
    --tinta-3:#6f7f96;
    --linha:#23324a;
    --fundo:#0d1626;
    --card:#141f33;
    --card-2:#1a2740;
    --ok:#7fd7ab;
    --ok-fundo:#12301f;
    --ok-linha:#1f5136;
    --erro:#ffaaa4;
    --erro-fundo:#3a1512;
    --erro-linha:#6b2721;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

a{color:var(--azul-2)}
@media (prefers-color-scheme: dark){ a{color:#8fb4ee} }

.wrap{max-width:640px;margin:0 auto;padding:0 16px}

/* ---------- topo ---------- */

.topo{
  background:linear-gradient(155deg,var(--azul) 10%,var(--azul-2));
  color:#fff;
  padding:20px 0 0;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 2px 14px rgba(0,0,0,.16);
}
.topo-linha{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.marca .rotulo{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acento);font-weight:700;margin-bottom:5px;
}
.marca h1{margin:0;font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.contador{
  flex-shrink:0;text-align:right;font-size:11px;color:#a9bad4;line-height:1.35;padding-top:14px;
}
.contador b{display:block;font-size:19px;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

/* abas */
.abas{display:flex;gap:24px;margin-top:16px}
.aba{
  color:#a9bad4;text-decoration:none;font-size:14px;font-weight:600;
  padding:0 0 11px;border-bottom:2px solid transparent;
}
.aba:hover{color:#fff}
.aba.ativa{color:#fff;border-bottom-color:var(--acento)}

/* ---------- estrutura ---------- */

.corpo{padding-top:18px;padding-bottom:110px}

.painel{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px;box-shadow:var(--sombra);
}

/* ---------- formulário ---------- */

label{
  display:block;font-size:12px;font-weight:700;color:var(--tinta-2);
  letter-spacing:.03em;text-transform:uppercase;margin-bottom:7px;
}
input,textarea{
  width:100%;padding:13px 14px;font:inherit;color:var(--tinta);
  background:var(--card-2);border:1.5px solid var(--linha);border-radius:11px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
input:focus,textarea:focus{
  border-color:var(--azul-2);
  box-shadow:0 0 0 3px rgba(27,56,98,.14);
  background:var(--card);
}
@media (prefers-color-scheme: dark){
  input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(143,180,238,.18);border-color:#4d7ec4}
}
textarea{resize:vertical;min-height:74px}
input[type="date"],input[type="time"]{min-height:48px}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo{margin-top:15px}
.campo:first-child{margin-top:0}
.dica{font-size:12px;color:var(--tinta-3);margin-top:6px;text-transform:none;letter-spacing:0}

/* ---------- botões ---------- */

button,.botao{
  display:block;width:100%;padding:15px;border:0;border-radius:11px;cursor:pointer;
  font:700 15px/1 inherit;color:#fff;background:var(--azul-2);text-align:center;
  text-decoration:none;transition:filter .15s,opacity .15s;
}
button:hover,.botao:hover{filter:brightness(1.12)}
button:active,.botao:active{filter:brightness(.94)}
button:disabled{opacity:.5;cursor:progress;filter:none}
.botao.fantasma{
  background:var(--card);color:var(--tinta-2);border:1.5px solid var(--linha);font-weight:600;
}
.botao.fantasma:hover{background:var(--card-2);color:var(--tinta);filter:none}

.flutuante{
  position:fixed;right:16px;bottom:16px;width:auto;padding:15px 24px;
  border-radius:999px;box-shadow:0 10px 28px rgba(15,32,56,.32);font-size:15px;z-index:15;
}

/* ---------- avisos ---------- */

.aviso{
  margin-top:15px;padding:13px 15px;border-radius:11px;font-size:14px;
  border:1.5px solid transparent;line-height:1.45;
}
.aviso.ok{background:var(--ok-fundo);border-color:var(--ok-linha);color:var(--ok)}
.aviso.erro{background:var(--erro-fundo);border-color:var(--erro-linha);color:var(--erro)}
.aviso strong{display:block;margin-bottom:2px;font-size:14px}
.aviso a{color:inherit;font-weight:700}

/* ---------- busca e filtros ---------- */

.busca{position:relative}
.busca input{padding-left:40px}
.busca::before{
  content:"";position:absolute;left:15px;top:50%;width:13px;height:13px;
  margin-top:-8px;border:2px solid var(--tinta-3);border-radius:50%;
}
.busca::after{
  content:"";position:absolute;left:26px;top:50%;width:6px;height:2px;
  margin-top:3px;background:var(--tinta-3);transform:rotate(45deg);
}

.chips{display:flex;gap:7px;margin-top:12px;overflow-x:auto;padding-bottom:2px}
.chip{
  flex-shrink:0;width:auto;padding:8px 15px;border-radius:999px;
  border:1.5px solid var(--linha);background:var(--card);color:var(--tinta-2);
  font-size:13px;font-weight:600;
}
.chip:hover{filter:none;background:var(--card-2)}
.chip[aria-pressed="true"]{background:var(--azul-2);color:#fff;border-color:var(--azul-2)}

/* ---------- lista ---------- */

.dia{
  display:flex;align-items:baseline;gap:9px;
  margin:26px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--linha);
}
.dia .num{font-size:15px;font-weight:700;color:var(--tinta)}
.dia .resto{font-size:12px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.dia .selo{
  margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento);border:1.5px solid var(--acento);border-radius:999px;padding:3px 9px;
}

.lista{list-style:none;margin:0;padding:0}

.item{
  position:relative;background:var(--card);border:1px solid var(--linha);
  border-radius:var(--raio);padding:14px 15px 14px 17px;margin-bottom:9px;
  display:flex;gap:14px;align-items:flex-start;box-shadow:var(--sombra);
  overflow:hidden;
}
.item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--azul-2);
}
.item.passada{opacity:.62}
.item.passada::before{background:var(--tinta-3)}

.hora{
  flex-shrink:0;min-width:52px;font-weight:800;font-size:16px;color:var(--azul-2);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;padding-top:1px;
}
@media (prefers-color-scheme: dark){ .hora{color:#8fb4ee} }

.info{flex:1;min-width:0}
.quem{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:5px;word-break:break-word}
.meta{display:flex;gap:7px;font-size:13px;color:var(--tinta-2);line-height:1.4;margin-top:3px}
.meta .icone{flex-shrink:0;width:15px;text-align:center;opacity:.65;font-size:12px;padding-top:1px}
.meta a{color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.meta a:hover{color:var(--tinta)}
.rep{font-weight:600;color:var(--tinta-2)}

.acoes{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.mini{
  width:36px;height:36px;padding:0;border-radius:9px;
  border:1.5px solid var(--linha);background:var(--card-2);color:var(--tinta-2);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.mini:hover{background:var(--linha);color:var(--tinta);filter:none}
.mini.perigo:hover{background:var(--erro-fundo);color:var(--erro);border-color:var(--erro-linha)}

/* ---------- estados ---------- */

.estado{
  text-align:center;color:var(--tinta-3);font-size:14px;line-height:1.6;
  padding:44px 20px;background:var(--card);border:1.5px dashed var(--linha);
  border-radius:var(--raio);margin-top:20px;
}
.estado b{display:block;color:var(--tinta-2);font-size:15px;margin-bottom:4px}

.rodape{margin-top:26px;display:grid;gap:9px}
.nota{text-align:center;font-size:12px;color:var(--tinta-3);margin-top:16px;line-height:1.6}

@media (max-width:430px){
  .dupla{grid-template-columns:1fr}
  .marca h1{font-size:17px}
  .contador{display:none}
}