/* Escala da Sara Itapema: claro e leve, logo real (chama laranja) e o laranja do Arena só nos destaques. */
:root {
  --fundo: #FAF6F2; --branco: #FFFFFF; --chama: #F55B25; --chama-escura: #B8321A; --tinta: #2B1611; --texto: #4E3B33;
  --cinza: #8F7F75; --linha: #EDE3DA; --pessego: #FDEBDF; --pessego-forte: #F9C9AC; --ok: #17803F; --ok-fundo: #E3F4EA; --erro: #B42318;
  --grad: linear-gradient(135deg, #F8A04C 0%, #F55B25 48%, #D9301C 100%);
  --t: 'Poppins', 'Helvetica Neue', Arial, sans-serif; --f: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0 }
html, body { background: var(--fundo); color: var(--texto); font-family: var(--f); font-size: 16px; -webkit-font-smoothing: antialiased }
body { min-height: 100vh }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; -webkit-tap-highlight-color: transparent }
[hidden] { display: none !important }
.ic-pq { width: 13px !important; height: 13px !important }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* campos e botões */
.campo { width: 100%; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; font-size: 16px; outline: none; min-height: 48px }
.campo:focus { border-color: var(--chama); box-shadow: 0 0 0 3px rgba(245, 91, 37, .15) }
select.campo { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F7F75' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px }
label.r { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); text-align: left }
label.r em { font-style: normal; font-weight: 400; color: var(--cinza) }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--linha); background: var(--branco); border-radius: 12px; padding: 10px 16px; font-weight: 500; font-size: 15px; white-space: nowrap; min-height: 44px; color: var(--tinta) }
.bt:hover { border-color: var(--pessego-forte) }
.bt.pri { background: var(--grad); border: 0; color: #fff; font-weight: 600 }
.bt.pri:disabled { opacity: .6; cursor: default }
.bt.pq { padding: 7px 12px; font-size: 14px; min-height: 38px }
.bt.txt { border: 0; background: transparent; color: var(--chama-escura); padding: 8px 6px }
.bt.perigo { color: var(--erro) }
.erro { color: var(--erro); font-size: 14px; min-height: 20px }
.dica { color: var(--cinza); font-size: 14px; line-height: 1.45 }

/* entrada */
.portao { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px }
.portao form { width: 100%; max-width: 380px; display: grid; gap: 16px; text-align: center }
.portao img { width: 88px; height: 88px; border-radius: 24px; margin: 0 auto 4px; box-shadow: 0 18px 40px -18px rgba(185, 50, 26, .6) }
.portao h1 { font-family: var(--t); font-weight: 600; font-size: 26px; color: var(--tinta); letter-spacing: -.01em }
.portao p { color: var(--cinza); margin-top: -8px }
.portao .bt.pri { width: 100%; min-height: 50px; font-size: 16px }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(250, 246, 242, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha) }
.topo-in { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.marca { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0 }
.marca img { width: 40px; height: 40px; border-radius: 11px; flex: none }
.marca b { font-family: var(--t); font-weight: 600; font-size: 18px; color: var(--tinta); display: block; line-height: 1.2 }
.marca span { font-size: 13px; color: var(--cinza); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.abas { display: flex; gap: 4px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 4px; overflow-x: auto; scrollbar-width: none }
.abas::-webkit-scrollbar { display: none }
.abas button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-weight: 500; color: var(--texto); white-space: nowrap; min-height: 38px }
.abas button.on { background: var(--grad); color: #fff }

main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 80px; display: grid; gap: 20px }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.cab h1 { font-family: var(--t); font-weight: 300; font-size: 32px; color: var(--chama-escura); letter-spacing: -.02em; line-height: 1.15 }
.mesnav { display: flex; align-items: center; gap: 6px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 4px }
.mesnav button { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: var(--tinta) }
.mesnav button:hover { background: var(--pessego) }
.mesnav b { font-family: var(--t); font-weight: 600; font-size: 16px; color: var(--tinta); min-width: 168px; text-align: center }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; display: grid; gap: 14px }
.cartao h2 { font-family: var(--t); font-weight: 600; font-size: 18px; color: var(--tinta) }
.cartao .cab2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.cartao .cab2 .acoes { display: flex; gap: 8px; flex-wrap: wrap }

/* adicionar pessoa */
.add { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: end }

/* linha do tempo (modelo da escala do Arena): em pé no celular */
.sub { color: var(--cinza); font-size: 15px; margin-top: 4px }
.lt-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--texto) }
.lt-leg span { display: inline-flex; align-items: center; gap: 6px }
.lt-leg span::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--cor) }
.t-manha { --cor: #F39C2C } .t-noite { --cor: #B8321A } .t-sab { --cor: #8F7F75 } .t-ev { --cor: #7A3FB0 }
.lt-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.lt-setas { display: flex; gap: 6px }
.lt-par { overflow-x: auto; cursor: grab; padding: 4px 2px 10px; scrollbar-width: thin }
.lt-par.arrastando { cursor: grabbing; user-select: none }
.lt-fila { display: flex; gap: 16px; position: relative; width: max-content; min-width: 100% }
.lt-fila::before { content: ''; position: absolute; left: 0; right: 0; top: 47px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #F8A04C, #F55B25, #D9301C); opacity: .35 }
.no { width: 248px; display: grid; gap: 10px; align-content: start; position: relative }
.no-dt { font-family: var(--t); font-size: 14px; color: var(--cinza); height: 28px; display: flex; align-items: baseline; gap: 6px }
.no-dt b { font-size: 20px; font-weight: 600; color: var(--tinta) }
.no-pt { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--branco); box-shadow: 0 0 0 2px var(--cor); background: var(--cor); position: relative; z-index: 1; margin-left: 6px }
.no-card { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 6px; display: grid; gap: 6px; align-content: start; min-height: 120px }
.no.prox .no-card { border: 2px solid var(--chama); box-shadow: 0 16px 40px -24px rgba(245, 91, 37, .7) }
.no.prox .no-dt::after { content: 'Próximo'; font-family: var(--f); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--chama); border-radius: 6px; padding: 3px 7px; margin-left: 4px; align-self: center }
.no.passou { opacity: .55 }
.cu { width: 100%; border: 0; background: transparent; text-align: left; border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start }
.cu + .cu { border-top: 1px dashed var(--linha); border-radius: 0 0 10px 10px }
button.cu:hover { background: #FFF8F3 }
.cu-acao { font-size: 13px; font-weight: 600; color: var(--chama-escura) }
.cu .dep { display: grid; gap: 4px }
.cu .dep > b { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chama) }
.tp { width: fit-content; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--cor); border-radius: 6px; padding: 3px 8px }
.falta { color: var(--cinza); font-size: 14px }
.gv-sub { margin-top: -4px }
.aviso { background: var(--pessego); color: var(--chama-escura); border-radius: 12px; padding: 12px 14px; font-size: 14px }
.bt.destaque { border-color: var(--chama); color: var(--chama-escura); font-weight: 600 }

/* equipe */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.pessoa { border: 1px solid var(--linha); background: var(--branco); border-radius: 14px; padding: 12px 14px; text-align: left; display: grid; gap: 3px }
.pessoa:hover { border-color: var(--pessego-forte) }
.pessoa b { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere }
.pessoa span { font-size: 13px; color: var(--cinza); display: flex; align-items: center; gap: 5px }
.pessoa em { font-style: normal; font-size: 13px; color: var(--chama-escura) }
.vazio { padding: 28px 16px; text-align: center; color: var(--cinza); display: grid; gap: 6px }
.vazio b { color: var(--tinta); font-family: var(--t); font-weight: 600 }

/* ADM: escala geral */
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chips span { font-size: 14px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 99px; padding: 4px 11px; color: var(--tinta) }
.filtro { max-width: 260px }

/* ADM: departamentos e lembretes */
.lista { display: grid; gap: 10px }
.item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; background: var(--branco) }
.item b { font-family: var(--t); font-weight: 600; color: var(--tinta); font-size: 16px }
.item span { color: var(--cinza); font-size: 14px }
.item .acoes { display: flex; gap: 6px; flex-wrap: wrap }
.item.off { opacity: .6 }
.novo { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 10px; align-items: end }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px }
.numero { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px }
.numero b { display: block; font-family: var(--t); font-size: 28px; font-weight: 600; color: var(--tinta); line-height: 1.1 }
.numero span { color: var(--cinza); font-size: 14px }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 99px; padding: 4px 10px; background: var(--ok-fundo); color: var(--ok) }
.selo.mal { background: #FDECEA; color: var(--erro) }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px }
.tabela th { text-align: left; color: var(--cinza); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linha) }
.tabela td { padding: 10px; border-bottom: 1px solid var(--linha); color: var(--tinta) }
.tabela-caixa { overflow-x: auto }
.st { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: var(--fundo); color: var(--cinza); white-space: nowrap }
.st.enviado { background: var(--ok-fundo); color: var(--ok) }
.st.falhou { background: #FDECEA; color: var(--erro) }
.st.pendente { background: var(--pessego); color: var(--chama-escura) }

/* gaveta lateral */
.gv-form { display: grid; gap: 16px }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap }
.veu { position: fixed; inset: 0; background: rgba(43, 22, 17, .35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s }
.veu.on { opacity: 1; pointer-events: auto }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--fundo); z-index: 41; transform: translateX(100%); transition: transform .25s ease, visibility .25s; display: flex; flex-direction: column; visibility: hidden }
.gaveta.on { transform: none; visibility: visible; box-shadow: -20px 0 60px -30px rgba(43, 22, 17, .5) }
.gv-cab { padding: 18px 20px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--branco) }
.gv-cab b { font-family: var(--t); font-weight: 600; font-size: 20px; color: var(--tinta) }
.gv-cab button { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center }
.gv-corpo { padding: 20px; overflow: auto; display: grid; gap: 16px; align-content: start; flex: 1 }
.gv-pe { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); display: flex; gap: 8px; justify-content: space-between; background: var(--branco) }
.chave { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--tinta); cursor: pointer }
.chave input { width: 22px; height: 22px; accent-color: var(--chama) }

.servem { display: grid; gap: 10px }
.servem h3 { font-family: var(--t); font-size: 15px; font-weight: 600; color: var(--tinta); display: flex; align-items: baseline; gap: 8px }
.chips.grandes span { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; padding: 5px 6px 5px 12px; background: var(--branco) }
.chips.grandes button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; color: var(--cinza) }
.chips.grandes button:hover { background: var(--pessego); color: var(--erro) }
.chips.grandes .ic { width: 15px; height: 15px }
.chips.toque button { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; border: 1px dashed var(--pessego-forte); background: var(--branco); border-radius: 99px; padding: 6px 12px 6px 8px; color: var(--chama-escura); min-height: 36px }
.chips.toque .ic { width: 15px; height: 15px }
.colocar { display: grid; gap: 10px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 14px }
.gv-dep { font-family: var(--t); color: var(--tinta); margin-left: 6px }
.completo { display: grid; gap: 10px }
.cp-dep { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px }
.cp-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.cp-cab b { font-family: var(--t); font-weight: 600; color: var(--tinta) }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(43, 22, 17, .45); display: none; place-items: center; padding: 16px }
.modal.on { display: grid }
.md-caixa { width: 100%; max-width: 380px; background: var(--branco); border-radius: 18px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 30px 80px -30px rgba(43, 22, 17, .6) }
.md-caixa h2 { font-family: var(--t); font-weight: 600; font-size: 19px; color: var(--tinta) }
.md-acoes { display: flex; gap: 8px; justify-content: flex-end }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: calc(100% - 32px); text-align: center }
.toast.on { opacity: 1; transform: translate(-50%, 0) }
.carregando { padding: 60px 16px; text-align: center; color: var(--cinza) }

@media (max-width: 720px) {
  .topo-in { padding: 10px 16px; gap: 10px }
  .abas { width: 100%; order: 3 }
  #bt-voltar { order: 1 }
  .abas button { flex: 1; padding: 8px 2px; font-size: 14px }
  main { padding: 16px 16px 72px; gap: 16px }
  .cab h1 { font-size: 26px }
  .mesnav { width: 100% ; justify-content: space-between }
  .mesnav b { min-width: 0 }
  .cartao { padding: 16px; border-radius: 16px }
  .add, .novo { grid-template-columns: 1fr }
  .add .bt, .novo .bt { width: 100% }
  .lt-nav { display: none }
  .lt-par { overflow: visible; cursor: auto; padding: 0 }
  .lt-fila { flex-direction: column; width: auto; padding-left: 26px; gap: 18px }
  .lt-fila::before { left: 10px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, #F8A04C, #F55B25, #D9301C) }
  .no { width: auto }
  .no-dt { height: auto }
  .no-pt { position: absolute; left: -27px; top: 2px; margin: 0 }
  .equipe { grid-template-columns: 1fr }
  .filtro { max-width: none }
}