/* =====================================================================
   CORES DA CAL — extraídas do logo oficial. Altere só aqui.
   ===================================================================== */
:root{
  --grafite:#4B4B4D; --grafite-esc:#3A3A3C;
  --laranja:#FF6600; --laranja-esc:#C24E00; --laranja-sv:#FFF0E6;
  --papel:#F7F6F4; --branco:#FFFFFF;
  --tinta:#2B2B2D; --tinta-media:#6E6E70; --tinta-fraca:#A3A3A5;
  --linha:#E4E3E0;
  --ok:#1F7A4D; --ok-suave:#E6F4EC; --ok-linha:#C9E4D6;
  --alerta:#B5641A; --alerta-suave:#FBEEDF;
  --erro:#C0392B; --erro-suave:#FBEBE9; --erro-linha:#F3D6D2;
  --r:10px; --sombra:0 1px 2px rgba(43,43,45,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--papel);color:var(--tinta);line-height:1.6;-webkit-font-smoothing:antialiased}

.previa-nav{position:sticky;top:0;z-index:50;background:var(--grafite);padding:12px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.previa-nav .marca{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:#fff;margin-right:auto;letter-spacing:-.01em}
.previa-nav .marca span{color:var(--laranja)}
.aba{background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.78);font:400 13px 'Inter',sans-serif;padding:6px 14px;border-radius:99px;cursor:pointer;transition:.18s}
.aba:hover{border-color:rgba(255,255,255,.55);color:#fff}
.aba[aria-selected="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:500}
.aba:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.tela{display:none;padding:28px 20px 56px}
.tela.ativa{display:block;animation:sobe .28s ease-out}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tela.ativa{animation:none}}
.env{max-width:880px;margin:0 auto}
.env.estreito{max-width:440px}

.portal{text-align:center;margin-bottom:24px}
.logo-cal{width:104px;height:auto;margin:0 auto 12px;display:block}
.selo-igreja{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja);font-weight:600}
.titulo-portal{font-family:'Poppins',sans-serif;font-weight:600;font-size:27px;letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.sub-portal{font-size:13.5px;color:var(--tinta-media);margin-top:7px}

.teste{background:var(--laranja-sv);border:1px dashed var(--laranja);border-radius:var(--r);padding:14px;margin-top:16px}
.teste-tit{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--laranja-esc);font-weight:600;margin-bottom:9px}
.teste-btn{display:block;width:100%;text-align:left;background:var(--branco);border:1px solid var(--linha);border-radius:8px;padding:8px 11px;font:400 12.5px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;margin-bottom:6px}
.teste-btn:hover{border-color:var(--laranja)}
.teste-btn:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.teste-senha{font-size:11.5px;color:var(--laranja-esc);margin-top:8px;text-align:center}

.divisor{display:flex;align-items:center;gap:12px;margin:20px 0}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--linha)}
.divisor span{font-size:11.5px;color:var(--tinta-fraca);letter-spacing:.04em}

.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.topo h1{font-family:'Poppins',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.25}
.topo .sub{font-size:13px;color:var(--tinta-media);margin-top:2px}
.quem{display:flex;align-items:center;gap:9px;background:var(--branco);border:1px solid var(--linha);padding:6px 13px 6px 6px;border-radius:99px;font-size:13px}
.bolinha{width:28px;height:28px;border-radius:50%;background:var(--grafite);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600}

.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:22px;box-shadow:var(--sombra)}
.cartao + .cartao{margin-top:16px}
.etapa{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.etapa b{font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--laranja);font-weight:600}
.etapa h2{font-size:15px;font-weight:600;letter-spacing:-.01em}

.pastores{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.pastor{display:flex;gap:12px;align-items:center;border:1px solid var(--linha);border-radius:var(--r);padding:12px;cursor:pointer;background:var(--branco);text-align:left;font-family:inherit;transition:.15s;width:100%}
.pastor:hover{border-color:var(--tinta-fraca)}
.pastor[aria-pressed="true"]{border-color:var(--laranja);background:var(--laranja-sv)}
.pastor:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.pastor .av{width:42px;height:42px;border-radius:50%;flex:0 0 42px;background:var(--grafite);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.pastor .nm{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pastor .dp{font-size:12px;color:var(--tinta-media)}

/* ---------- Calendário ---------- */
.mes{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mes strong{font-size:14px;font-weight:600}
.mes button{border:1px solid var(--linha);background:var(--branco);width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--tinta-media);font-size:15px;line-height:1}
.mes button:hover{border-color:var(--tinta-fraca)}
.grade{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.grade .dow{text-align:center;font-size:10.5px;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.07em;padding-bottom:6px;font-weight:500}
.dia{min-height:58px;border:1px solid var(--linha);border-radius:8px;background:var(--branco);font:400 14px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:.15s;padding:4px 2px}
.dia .qt{font-size:10.5px;color:var(--laranja-esc);font-weight:500;line-height:1.2}
.dia:hover{border-color:var(--laranja)}
.dia:focus-visible{outline:2px solid var(--laranja);outline-offset:1px}
.dia.fora{background:transparent;border-color:transparent;color:var(--tinta-fraca);cursor:default}
.dia.sem{background:var(--erro-suave);border-color:var(--erro-linha);color:var(--erro);cursor:not-allowed}
.dia.tem{background:var(--ok-suave);border-color:var(--ok-linha);color:var(--ok);font-weight:500}
.dia.tem .qt{color:var(--ok)}
.dia[aria-pressed="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600}
.dia[aria-pressed="true"] .qt{color:#fff}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--tinta-media)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:11px;height:11px;border-radius:3px;display:block;border:1px solid}
.lg-tem{background:var(--ok-suave);border-color:var(--ok-linha)}
.lg-sem{background:var(--erro-suave);border-color:var(--erro-linha)}
.lg-sel{background:var(--laranja);border-color:var(--laranja)}

/* ---------- Horários ---------- */
.cab-dia{font-size:13px;color:var(--tinta-media);margin-bottom:11px}
.cab-dia b{color:var(--tinta);font-weight:600}
.horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.hora{border:1px solid var(--linha);background:var(--branco);border-radius:var(--r);padding:11px 0;text-align:center;font:400 13px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;transition:.15s}
.hora:hover{border-color:var(--laranja)}
.hora:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.hora[aria-pressed="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600}
.hora:disabled{background:var(--erro-suave);border-color:var(--erro-linha);color:var(--erro);text-decoration:line-through;cursor:not-allowed}
.vazio-msg{font-size:13px;color:var(--tinta-media);padding:14px;background:var(--papel);border-radius:var(--r);text-align:center}

label.rot,p.rot{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.dica{font-size:12.5px;color:var(--tinta-media);margin-bottom:9px}
textarea,select,
input[type=text],input[type=email],input[type=tel],
input[type=password],input[type=number],input[type=date],input[type=time],input[type=search]{
  display:block;width:100%;border:1px solid var(--linha);border-radius:var(--r);
  padding:11px 13px;font:400 14px 'Inter',sans-serif;color:var(--tinta);
  background:var(--branco);resize:vertical;line-height:1.4;
}
textarea:focus,select:focus,input:focus{outline:2px solid var(--laranja);outline-offset:-1px;border-color:var(--laranja)}
input::placeholder,textarea::placeholder{color:var(--tinta-fraca)}

.escolha{display:flex;gap:9px}
.opc{flex:1;border:1px solid var(--linha);background:var(--branco);border-radius:var(--r);padding:11px 0;font:400 13.5px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;transition:.15s}
.opc:hover{border-color:var(--tinta-fraca)}
.opc[aria-pressed="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600}
.opc:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.consent{display:flex;gap:10px;align-items:flex-start;margin-top:15px}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--laranja);flex:0 0 16px;display:inline-block}
.consent p{font-size:12.5px;color:var(--tinta-media);line-height:1.55}

.avisoprazo{display:flex;gap:10px;align-items:flex-start;background:var(--alerta-suave);border-radius:var(--r);padding:12px 14px;margin-top:16px}
.avisoprazo p{font-size:12.5px;color:var(--alerta);line-height:1.55}
.avisoprazo b{font-weight:600}

.acao{width:100%;margin-top:18px;background:var(--grafite);color:#fff;border:none;border-radius:var(--r);padding:14px;font:600 14px 'Inter',sans-serif;cursor:pointer;transition:.15s}
.acao:hover{background:var(--grafite-esc)}
.acao:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.acao.secundaria{background:transparent;color:var(--grafite);border:1px solid var(--grafite)}
.acao.secundaria:hover{background:var(--grafite);color:#fff}
.erroinline{color:var(--erro);font-size:12.5px;margin-top:8px;display:none}
.erroinline.on{display:block}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.metrica{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:15px 17px}
.metrica .rot{font-size:12px;color:var(--tinta-media);font-weight:400;margin:0}
.metrica .num{font-family:'Poppins',sans-serif;font-size:27px;font-weight:600;line-height:1.2;margin-top:2px}
.filtros{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtro{border:1px solid var(--linha);background:var(--branco);border-radius:99px;padding:6px 14px;font:400 12.5px 'Inter',sans-serif;color:var(--tinta-media);cursor:pointer}
.filtro:hover{border-color:var(--tinta-fraca)}
.filtro[aria-selected="true"]{background:var(--grafite);border-color:var(--grafite);color:#fff;font-weight:500}
.filtro:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.lista{background:var(--branco);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.linha{display:flex;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--linha)}
.linha:last-child{border-bottom:none}
.linha .info{flex:1;min-width:0}
.linha .nome{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.linha .meta{font-size:12.5px;color:var(--tinta-media);margin-top:2px}
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:5px}
.tag{font-size:11px;padding:3px 9px;border-radius:99px;font-weight:500}
.t-pend{background:var(--alerta-suave);color:var(--alerta)}
.t-conf{background:var(--ok-suave);color:var(--ok)}
.t-fim{background:var(--papel);color:var(--tinta-media)}
.t-urg{background:var(--erro-suave);color:var(--erro)}
.mini{background:var(--grafite);color:#fff;border:none;border-radius:8px;padding:8px 15px;font:600 12.5px 'Inter',sans-serif;cursor:pointer;white-space:nowrap}
.mini:hover{background:var(--grafite-esc)}
.mini.sec{background:transparent;color:var(--tinta-media);border:1px solid var(--linha)}
.mini.sec:hover{background:var(--papel);color:var(--tinta)}
.mini:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.av-lista{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:var(--grafite);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background-size:cover;background-position:center;overflow:hidden}
.foto-picker{display:flex;align-items:center;gap:16px}
.foto-preview{width:64px;height:64px;border-radius:50%;flex:0 0 64px;background:var(--papel);border:1px dashed var(--linha);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--tinta-fraca);font-size:10.5px;text-align:center;line-height:1.3}
.foto-preview img{width:100%;height:100%;object-fit:cover}

.painel-status{background:var(--papel);border:1px solid var(--linha);border-top:none;border-radius:0 0 14px 14px;padding:14px 18px;margin-top:-14px;margin-bottom:0}
.escolha-status{display:flex;gap:8px;flex-wrap:wrap}
.opc-status{border:1px solid var(--linha);background:var(--branco);border-radius:99px;padding:7px 15px;font:400 12.5px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;transition:.15s}
.opc-status:hover{border-color:var(--laranja);color:var(--laranja-esc)}
.opc-status:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.opc-status.atual{background:var(--grafite);border-color:var(--grafite);color:#fff;font-weight:500}

/* ---------- Editor de disponibilidade ---------- */
.dia-edit{min-height:58px;border:1px solid var(--linha);border-radius:8px;background:var(--branco);font:400 14px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:.15s;padding:4px 2px}
.dia-edit:hover{border-color:var(--laranja)}
.dia-edit:focus-visible{outline:2px solid var(--laranja);outline-offset:1px}
.dia-edit.fora{background:transparent;border-color:transparent;color:var(--tinta-fraca);cursor:default}
.dia-edit.tem{background:var(--ok-suave);border-color:var(--ok-linha);color:var(--ok);font-weight:500}
.dia-edit .qt{font-size:10.5px;line-height:1.2;color:var(--ok)}
.dia-edit[aria-pressed="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600}
.dia-edit[aria-pressed="true"] .qt{color:#fff}

.painel-dia{margin-top:18px;border-top:1px solid var(--linha);padding-top:18px}
.faixa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--papel);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.faixa input[type=time]{width:112px;padding:8px 10px;font-size:13px}
.faixa .ate{font-size:12.5px;color:var(--tinta-media)}
.faixa .rm{margin-left:auto;background:transparent;border:1px solid var(--linha);color:var(--tinta-media);border-radius:8px;padding:6px 12px;font:400 12.5px 'Inter',sans-serif;cursor:pointer}
.faixa .rm:hover{border-color:var(--erro);color:var(--erro)}
.copiar{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.copiar button{flex:1;min-width:150px;background:transparent;border:1px dashed var(--linha);border-radius:var(--r);padding:10px;font:400 12.5px 'Inter',sans-serif;color:var(--tinta-media);cursor:pointer}
.copiar button:hover{border-color:var(--laranja);color:var(--laranja-esc)}

.nota{font-size:12.5px;color:var(--tinta-media);margin-top:22px;text-align:center;line-height:1.6}
.nota a{color:var(--grafite)}

/* Campo de senha com "olhinho" pra mostrar/esconder */
.campo-senha{position:relative}
.campo-senha input{padding-right:44px}
.btn-olho{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;
  font-size:17px;color:var(--tinta-media);line-height:1;
}
.btn-olho:hover{color:var(--tinta)}

/* ---------- Navegação da prévia: rolagem horizontal em telas pequenas ---------- */
@media(max-width:700px){
  .previa-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 14px;gap:6px}
  .previa-nav::-webkit-scrollbar{display:none}
  .previa-nav .marca{display:none}
  .aba{flex:0 0 auto;padding:6px 12px;font-size:12.5px}
}

/* ---------- Barra inferior estilo app (só em telas de celular) ---------- */
.barra-inf{display:none}
@media(max-width:700px){
  .previa-nav{display:none}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  .barra-inf{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--branco);border-top:1px solid var(--linha);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 10px rgba(43,43,45,.07);
  }
  .bi-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;padding:6px 2px;border-radius:10px;
    color:var(--tinta-media);font:400 10px 'Inter',sans-serif;cursor:pointer;
  }
  .bi-item .ic{font-size:19px;line-height:1}
  .bi-item[aria-current="true"]{color:var(--laranja-esc)}

  .bi-fundo{display:none;position:fixed;inset:0;background:rgba(43,43,45,.42);z-index:70}
  .bi-fundo.aberta{display:block}
  .bi-bandeja{
    position:fixed;left:0;right:0;bottom:0;z-index:71;
    background:var(--branco);border-radius:18px 18px 0 0;
    padding:8px 10px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .22s ease;
  }
  .bi-bandeja.aberta{transform:translateY(0)}
  .bi-alca{width:36px;height:4px;background:var(--linha);border-radius:99px;margin:5px auto 12px}
  .bi-bandeja button{
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:none;border:none;padding:13px 10px;border-radius:10px;
    font:400 14.5px 'Inter',sans-serif;color:var(--tinta);cursor:pointer;
  }
  .bi-bandeja button:hover{background:var(--papel)}
  .bi-bandeja button .ic{font-size:17px;width:22px;text-align:center;flex-shrink:0}
}

@media(max-width:560px){
  .tela{padding:18px 14px 44px}
  .topo h1{font-size:20px}
  .topo{gap:10px}
  .cartao{padding:16px}
  .linha{flex-wrap:wrap;padding:13px 15px}
  .linha .info{width:100%}
  .linha .mini,.linha .mini.sec{width:100%;text-align:center}

  /* Calendário: células menores, texto de contagem enxuto */
  .grade{gap:4px}
  .dia,.dia-edit{min-height:44px;font-size:12px;padding:2px 1px}
  .dia .qt,.dia-edit .qt{font-size:8.5px}
  .grade .dow{font-size:9px}

  /* Horários e formulários empilham melhor */
  .horas{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
  .metricas{grid-template-columns:repeat(2,1fr)}
  .metrica .num{font-size:23px}

  /* Editor de disponibilidade: faixas de horário não estouram a tela */
  .faixa{gap:7px;padding:9px 10px}
  .faixa input[type=time]{width:92px;font-size:12.5px;padding:7px 8px}
  .faixa .rm{margin-left:0;width:100%;order:3}

  /* Foto do pastor: empilha em vez de ficar espremida do lado */
  .foto-picker{flex-direction:column;align-items:flex-start;gap:10px}

  /* Painel de status: botões maiores para o dedo */
  .escolha-status{gap:6px}
  .opc-status{flex:1 1 calc(50% - 6px);text-align:center;padding:9px 6px}

  .filtro{padding:7px 12px;font-size:12px}
  .quem{font-size:12px}
}

@media(max-width:380px){
  .dia .qt,.dia-edit .qt{display:none}
  .metricas{grid-template-columns:repeat(2,1fr);gap:9px}
}