/* public/css/hub.css — Portal 1B, Escala de Culto */

:root{
  --verde:#5E9C82;
  --verde-escuro:#4A7D68;
  --verde-claro:#7bb59d;
  --carvao:#232323;
  --bg:#F2F2F2;
  --surface:#FFFFFF;
  --surface-2:#EAEAEA;
  --line:#DCDCDC;
  --texto:#232323;
  --texto-fraco:#6B6B6B;
  --vermelho:#B23B3B;
  --vermelho-bg:#FBEAEA;
  --radius:10px;
  --sombra:0 1px 3px rgba(0,0,0,.08);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181818;
    --surface:#232323;
    --surface-2:#2B2B2B;
    --line:#3A3A3A;
    --texto:#F2F2F2;
    --texto-fraco:#A8A8A8;
    --vermelho-bg:#3A2323;
  }
}

:root[data-theme="dark"]{
  --bg:#181818;
  --surface:#232323;
  --surface-2:#2B2B2B;
  --line:#3A3A3A;
  --texto:#F2F2F2;
  --texto-fraco:#A8A8A8;
  --vermelho-bg:#3A2323;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--texto);font-family:'Inter', system-ui, -apple-system, sans-serif;}
h1,h2,h3{margin:0 0 8px;color:var(--texto);font-weight:800;letter-spacing:-.02em;}
p{margin:0 0 8px;}
a{color:var(--verde-escuro);}

/* assinatura visual do site (1b.org.br) — "risquinho de régua": traço de 32px
   em verde antes do rótulo em caixa alta. Só pra cabeçalho de seção — rótulo de
   campo de formulário continua usando .rot puro, sem o traço. */
.tag-line{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-fraco);margin:0 0 10px;}
.tag-line::before{content:"";display:block;width:32px;height:1.5px;background:var(--verde);flex-shrink:0;}
.tag-line.claro{color:var(--verde-claro);}
.tag-line.claro::before{background:var(--verde-claro);}

/* ===== shell responsivo ===== */
.hub-shell{display:flex;min-height:100vh;flex-direction:column;}
.hub-sidebar{display:none;}
.hub-bottomnav{display:flex;border-top:1px solid var(--line);background:var(--surface);position:fixed;bottom:0;left:0;right:0;padding:8px 4px calc(8px + env(safe-area-inset-bottom));}
.hub-main{flex:1;padding:16px 16px calc(72px + env(safe-area-inset-bottom));}

@media (min-width: 900px){
  .hub-shell{flex-direction:row;}
  .hub-sidebar{display:flex;flex-direction:column;width:216px;flex-shrink:0;background:var(--surface-2);border-right:1px solid var(--line);padding:18px 14px;min-height:100vh;}
  .hub-bottomnav{display:none;}
  .hub-main{padding:24px 32px;max-width:920px;}
}

/* ===== componentes ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sombra);padding:16px;margin-bottom:12px;}

.lista-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.lista-item:last-child{border-bottom:none;}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--verde);color:#fff;}
.badge.fraco{background:var(--surface-2);color:var(--texto-fraco);}
.badge.alerta{background:var(--vermelho);color:#fff;}

.aviso-conflito{display:flex;align-items:center;gap:8px;background:var(--vermelho-bg);color:var(--vermelho);border:1px solid var(--vermelho);border-radius:var(--radius);padding:10px 12px;font-size:.9rem;margin-bottom:12px;}
.aviso-sucesso{display:flex;align-items:center;gap:8px;background:rgba(94,156,130,.15);color:var(--verde-escuro);border:1px solid var(--verde);border-radius:var(--radius);padding:10px 12px;font-size:.9rem;margin-bottom:12px;}

/* sidebar (desktop) */
.sidebar{display:flex;flex-direction:column;gap:4px;}
.sidebar a{display:block;padding:8px 10px;border-radius:var(--radius);color:var(--texto);text-decoration:none;font-size:.9rem;}
.sidebar a:hover,.sidebar a.ativo{background:var(--verde);color:#fff;}

/* bottomnav (mobile) */
.m-bottomnav{display:flex;flex:1;justify-content:space-around;}
.m-bottomnav a{flex:1;text-align:center;color:var(--texto-fraco);text-decoration:none;font-size:.72rem;padding:4px;}
.m-bottomnav a.ativo{color:var(--verde-escuro);font-weight:600;}

/* navegador de culto (anterior/próximo, um de cada vez — em vez de linha de chips
   que ficava confusa/quebrava com muitos cultos cadastrados) */
.culto-nav-seta{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--texto);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.culto-nav-seta:hover:not(:disabled){background:var(--surface-2);}
.culto-nav-seta:disabled{opacity:.35;cursor:default;}

/* navegador de final de semana — os 5 horários fixos (sáb 19h + dom 8h/10h/17h/19h),
   um final de semana de cada vez; "+ Novo culto" fica de fora, pra eventos especiais */
.semana-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.semana-slots{display:flex;gap:8px;overflow-x:auto;flex:1;padding-bottom:2px;}
.culto-slot-fixo{flex-shrink:0;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--texto);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;white-space:nowrap;transition:transform .15s ease;}
.culto-slot-fixo:hover{transform:translateY(-1px);}
.culto-slot-fixo.ativo{background:var(--carvao);border-color:var(--carvao);color:#fff;}

/* grade da escala — 1 linha por função, pessoa(s) já escalada(s) ou vazio */
.escala-grade{display:flex;flex-direction:column;gap:10px;}
.escala-linha{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;}
.escala-linha-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.escala-linha-acoes{display:flex;gap:6px;flex-shrink:0;}
.escala-funcao{font-weight:700;font-size:.95rem;}
.escala-pessoas{display:flex;flex-direction:column;gap:6px;}
.escala-vazia{color:var(--texto-fraco);font-size:.85rem;font-style:italic;}
.pessoa-chip{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface-2);border-radius:var(--radius);}
.pessoa-chip span:first-child{flex:1;font-weight:600;font-size:.9rem;}
.pessoa-notificar,.pessoa-remover{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:none;background:none;color:var(--texto-fraco);font-size:1rem;cursor:pointer;line-height:1;}
.pessoa-notificar:hover{background:var(--surface);color:var(--verde-escuro);}
.pessoa-remover:hover{background:var(--vermelho-bg);color:var(--vermelho);}

/* painel de sugestão — abre inline sob a linha da função clicada */
.painel-sugestao{margin-top:10px;}
.painel-sugestao-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}

/* botão de adicionar */
.add-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:none;background:var(--verde);color:#fff;font-size:1.2rem;cursor:pointer;line-height:1;}
.add-btn:hover{background:var(--verde-escuro);}

/* botões — pill, caixa alta, peso 700 (identidade do site). Primário = verde
   sólido; secundário = ghost (borda, sem preenchimento). Hover levanta levemente
   com sombra verde suave — nunca em cima de :disabled. */
.btn{
  display:inline-block;padding:10px 20px;border-radius:50px;border:1.5px solid var(--line);
  background:transparent;color:var(--texto);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;
}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(94,156,130,.25);}
.btn.primario{background:var(--verde);border-color:var(--verde);color:#fff;width:100%;}
.btn.primario:hover:not(:disabled){background:var(--verde-escuro);border-color:var(--verde-escuro);}

/* sidebar/bottomnav do hub (app.html) */
.wordmark{font-size:15px;font-weight:800;margin-bottom:20px;padding:0 6px;}
.wordmark span{color:var(--verde);}

.hub-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:600;color:var(--texto-fraco);cursor:pointer;}
.hub-item[hidden]{display:none;}
.hub-item.active{background:var(--verde);color:#fff;font-weight:700;}
.hub-item.active .hub-ic{background:#fff;color:var(--verde);}
.hub-item.disabled{opacity:.45;cursor:default;}
.hub-soon{font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--texto-fraco);opacity:.7;margin-left:auto;}

/* ícone dentro de círculo verde sólido — identidade do site (1b.org.br) */
.hub-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--verde);color:#fff;font-size:12px;flex-shrink:0;}

.user-card{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px;border-top:1px solid var(--line);}
.user-card b{display:block;font-size:12.5px;}
.user-card span{font-size:11px;color:var(--texto-fraco);cursor:pointer;}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--carvao);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.m-navitem{flex:1;text-align:center;font-size:9.5px;font-weight:700;color:var(--texto-fraco);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
.m-navitem .m-navic{font-size:17px;}
.m-navitem.active{color:var(--verde-escuro);}
.m-navitem[hidden]{display:none;}

.btn.sm{padding:9px 16px;font-size:13px;display:inline-block;width:auto;}

/* tela de login */
body.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px;}
.login-card{width:100%;max-width:360px;text-align:center;}
.login-card .subtitulo{color:var(--texto-fraco);margin-bottom:16px;}
.login-card form{display:flex;flex-direction:column;gap:4px;text-align:left;}
.login-card label.rot{font-size:.8rem;color:var(--texto-fraco);margin-top:8px;}
.login-card .btn.primario{margin-top:14px;}
.login-card .erro{color:var(--vermelho);font-size:.85rem;margin:4px 0 0;}

.li-info{display:flex;flex-direction:column;gap:2px;}
.li-info b{font-size:.95rem;}
.li-info span{font-size:.82rem;color:var(--texto-fraco);}

.destaque{background:var(--carvao);color:#fff;border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.destaque .rotulo{font-size:.78rem;opacity:.75;text-transform:uppercase;letter-spacing:.04em;}
.destaque .funcao{font-size:1.3rem;font-weight:700;margin:4px 0;}
.destaque .quando{font-size:.9rem;opacity:.9;}

.carregando{color:var(--texto-fraco);padding:24px;text-align:center;}

.badge.verde{background:rgba(94,156,130,.15);color:var(--verde-escuro);}

.rot{display:block;font-size:.8rem;color:var(--texto-fraco);margin:12px 0 4px;}
.subtitulo{color:var(--texto-fraco);margin-bottom:16px;}
.erro{color:var(--vermelho);font-size:.85rem;margin:4px 0 0;}

.fila-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.fila-item:last-child{border-bottom:none;}
.fila-pos{font-weight:700;color:var(--texto-fraco);width:20px;}
.fila-nome{flex:1;font-weight:600;}
.fila-tempo{font-size:.82rem;color:var(--texto-fraco);}
.fila-nunca{font-size:.82rem;color:var(--verde-escuro);font-weight:600;}

/* controles de formulário — genérico, qualquer tela (antes só existia dentro de .login-card,
   e só pra `input`; espaçamento vertical fica por conta do container flex/grid com `gap`,
   nunca margin no próprio controle — evita duplicar regra de espaçamento em cascata) */
input[type="date"],input[type="text"],input[type="email"],input[type="password"],select{
  width:100%;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);color:var(--texto);font-size:.9rem;font-family:inherit;
}
input[type="date"]{color-scheme:light dark;}
input:focus,select:focus{outline:2px solid var(--verde);outline-offset:1px;}

/* linha do seletor de culto + botão de criar novo */
.culto-nav-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.culto-nav-row .btn{flex-shrink:0;width:auto;white-space:nowrap;}

/* formulário de criar culto / bloquear datas */
.form-novo-culto,.form-bloqueio{display:flex;flex-direction:column;gap:10px;padding:14px 16px;}
.form-novo-culto-campos,.form-bloqueio-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-novo-culto-acoes{display:flex;gap:8px;}
.form-novo-culto-acoes .btn{width:auto;flex:1;}
.form-novo-culto label.rot,.form-bloqueio label.rot{margin-top:0;}
.form-novo-culto .erro{margin-top:0;}