/* HorizonPonto — mesma família visual do Horizon Gestão: lateral marinho, texto Inter, títulos Plus Jakarta.
   Cor própria do produto: verde-azulado (teal). Âmbar para atenção, vermelho para problema. */
:root {
    --marinho: #0b1324; --marinho-2: #111c33; --marinho-3: #1a2742; --lateral-texto: #cbd5e1; --lateral-sub: #7c8aa5;
    --primaria: #0d9488; --primaria-esc: #0f766e; --primaria-clara: #f0fdfa; --primaria-borda: #99f6e4;
    --indigo: #4f46e5; --indigo-claro: #eef2ff;
    --texto: #0f172a; --sub: #64748b; --sub-2: #94a3b8; --borda: #e2e8f0; --borda-forte: #cbd5e1;
    --fundo: #f6f7fb; --campo: #f8fafc; --branco: #fff;
    --verde: #047857; --verde-fundo: #ecfdf5; --verde-borda: #a7f3d0;
    --ambar: #b45309; --ambar-fundo: #fffbeb; --ambar-borda: #fde68a;
    --vermelho: #b91c1c; --vermelho-fundo: #fef2f2; --vermelho-borda: #fecaca;
    --azul: #1d4ed8; --azul-fundo: #eff6ff; --azul-borda: #bfdbfe;
    --roxo: #7c3aed; --roxo-fundo: #f5f3ff;
    --raio: 14px; --raio-p: 10px; --raio-pp: 7px;
    --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
    --sombra-alta: 0 10px 40px -10px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .06);
    --titulo: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;
    --lateral-l: 252px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 var(--corpo); color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--primaria-esc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 6px; }
.icone { flex: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.sub { color: var(--sub); }
.pequeno { font-size: 12.5px; }
.forte { font-weight: 600; }
.ok-txt { color: var(--verde); } .erro-txt { color: var(--vermelho); } .atencao-txt { color: var(--ambar); }
.oculto { display: none !important; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha.fim { justify-content: flex-end; }
.linha.entre { justify-content: space-between; }
.empurra { margin-left: auto; }
.pilha { display: grid; gap: 16px; }
.pilha.p8 { gap: 8px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.ocupa-2 { grid-column: span 2; } .ocupa-3 { grid-column: span 3; } .ocupa-tudo { grid-column: 1 / -1; }
@media (max-width: 900px) { .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; } .ocupa-2, .ocupa-3 { grid-column: auto; } }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
    font: 600 11px/1 var(--corpo); color: var(--sub); background: #fff; border: 1px solid var(--borda-forte); border-bottom-width: 2px; }
.botao kbd { margin-left: 4px; background: rgba(255,255,255,.18); color: inherit; border-color: rgba(255,255,255,.35); }
.botao:not(.primario):not(.perigo) kbd { background: #f8fafc; color: var(--sub); border-color: var(--borda-forte); }

/* ---------------------------------------------------------------- botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte); background: var(--branco); font-weight: 600; color: var(--texto); white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; text-decoration: none !important; }
.botao:hover { background: #f1f5f9; }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.botao.primario { background: linear-gradient(180deg, #14a397, var(--primaria)); border-color: var(--primaria-esc); color: #fff; box-shadow: 0 1px 2px rgba(15, 118, 110, .35); }
.botao.primario:hover { background: linear-gradient(180deg, var(--primaria), var(--primaria-esc)); }
.botao.perigo { background: var(--vermelho); border-color: #991b1b; color: #fff; }
.botao.perigo:hover { background: #991b1b; }
.botao.leve { border-color: transparent; background: transparent; color: var(--sub); }
.botao.leve:hover { background: #eef2f6; color: var(--texto); }
.botao.pequeno { padding: 6px 10px; font-size: 13px; border-radius: var(--raio-pp); gap: 6px; }
.botao.grande { width: 100%; padding: 12px 16px; font-size: 15px; }
.botao-icone { border: 0; background: none; padding: 7px; border-radius: 8px; display: inline-flex; color: var(--sub); }
.botao-icone:hover { background: #eef1f6; color: var(--texto); }
.botao-icone.perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.link { border: 0; background: none; padding: 0; color: var(--primaria-esc); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- campos */
.form { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo > label, .campo > span.rotulo { font-weight: 600; font-size: 13px; color: #1e293b; }
.campo .ajuda { font-size: 12.5px; color: var(--sub); }
.campo .erro-campo { font-size: 12.5px; color: var(--vermelho); }
.entrada, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
    width: 100%; padding: 9px 11px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: var(--branco);
    font: inherit; color: var(--texto); transition: border-color .15s, box-shadow .15s; min-height: 40px; }
.campo textarea { min-height: 80px; resize: vertical; }
.entrada::placeholder, .campo input::placeholder, .campo textarea::placeholder { color: var(--sub-2); }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(13, 148, 136, .16); }
.campo input:disabled, .campo select:disabled { background: var(--campo); color: var(--sub); }
.campo.invalido input, .campo.invalido select { border-color: #f87171; }
.campo-grupo { display: flex; align-items: stretch; }
.campo-grupo > * { border-radius: 0 !important; }
.campo-grupo > :first-child { border-radius: var(--raio-p) 0 0 var(--raio-p) !important; }
.campo-grupo > :last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0 !important; margin-left: -1px; }
.busca { position: relative; min-width: 220px; }
.busca .icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sub-2); pointer-events: none; }
.busca input { padding-left: 34px !important; }

.opcao { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.opcao input { width: 17px; height: 17px; accent-color: var(--primaria); margin: 0; }
.opcao small { display: block; color: var(--sub); font-size: 12.5px; }

/* interruptor (liga/desliga) */
.chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.chave input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; margin: 0; flex: none; cursor: pointer; }
.chave input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.chave input:checked { background: var(--primaria); }
.chave input:checked::after { transform: translateX(16px); }
.chave span { display: grid; }
.chave small { color: var(--sub); font-size: 12.5px; }

/* escolha segmentada */
.segmentos { display: inline-flex; padding: 3px; gap: 2px; background: #eef1f6; border-radius: 11px; flex-wrap: wrap; }
.segmentos button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--sub); }
.segmentos button.ativo { background: #fff; color: var(--texto); box-shadow: 0 1px 2px rgba(15,23,42,.12); }

/* ---------------------------------------------------------------- cartões, avisos, chips */
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-corpo { padding: 20px; }
.cartao-topo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.cartao-topo h2, .cartao-topo h3 { font-size: 15.5px; }
.cartao-topo .sub { font-size: 13px; }
.cartao-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--borda); background: #fbfcfe; border-radius: 0 0 var(--raio) var(--raio); }
.secao-titulo { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 700; font-size: 14.5px; margin: 6px 0 2px; }
.secao-titulo .sub { font-family: var(--corpo); font-weight: 400; font-size: 13px; }

.aviso { display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid; align-items: flex-start; }
.aviso > .icone { margin-top: 1px; }
.aviso div { display: grid; gap: 2px; }
.aviso strong { font-weight: 600; }
.aviso span { font-size: 13px; }
.aviso.erro { background: var(--vermelho-fundo); border-color: var(--vermelho-borda); color: #7f1d1d; }
.aviso.ok { background: var(--verde-fundo); border-color: var(--verde-borda); color: #064e3b; }
.aviso.atencao { background: var(--ambar-fundo); border-color: var(--ambar-borda); color: #78350f; }
.aviso.info { background: var(--azul-fundo); border-color: var(--azul-borda); color: #1e3a8a; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; line-height: 1.5; }
.chip-ok { background: var(--verde-fundo); color: var(--verde); border-color: var(--verde-borda); }
.chip-atencao { background: var(--ambar-fundo); color: var(--ambar); border-color: var(--ambar-borda); }
.chip-erro { background: var(--vermelho-fundo); color: var(--vermelho); border-color: var(--vermelho-borda); }
.chip-info { background: var(--azul-fundo); color: var(--azul); border-color: var(--azul-borda); }
.chip-neutro { background: #f1f5f9; color: var(--sub); border-color: var(--borda); }
.chip-primaria { background: var(--primaria-clara); color: var(--primaria-esc); border-color: var(--primaria-borda); }
.chip-roxo { background: var(--roxo-fundo); color: var(--roxo); border-color: #ddd6fe; }
.ponto-cor { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

.vazio { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 20px; color: var(--sub); }
.vazio .icone { color: var(--sub-2); margin-bottom: 4px; }
.vazio strong { color: var(--texto); font-family: var(--titulo); font-size: 16px; }
.vazio span { max-width: 480px; }
.vazio .botao { margin-top: 10px; }
.vazio.grande { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 56px 24px; box-shadow: var(--sombra); }

/* números grandes (indicadores) */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.indicador { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); display: grid; gap: 4px; position: relative; overflow: hidden; }
.indicador .rotulo { font-size: 12.5px; color: var(--sub); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.indicador .valor { font-family: var(--titulo); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.indicador .detalhe { font-size: 12.5px; color: var(--sub); }
.indicador.alerta .valor { color: var(--vermelho); }
.indicador.atencao .valor { color: var(--ambar); }
.indicador.bom .valor { color: var(--verde); }
a.indicador { color: inherit; text-decoration: none; transition: border-color .15s, transform .1s; }
a.indicador:hover { border-color: var(--primaria-borda); transform: translateY(-1px); }

/* ---------------------------------------------------------------- tabelas */
.tabela-caixa { overflow: auto; border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabela th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--sub);
    background: #f8fafc; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .1s; }
.tabela tbody tr:hover { background: #f8fafc; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.selecionada { background: var(--primaria-clara); }
.tabela .dir { text-align: right; }
.tabela .centro { text-align: center; }
.tabela .acoes { width: 1%; white-space: nowrap; text-align: right; }
.tabela .nome-sub { display: grid; }
.tabela .nome-sub small { color: var(--sub); font-size: 12.5px; }

/* ---------------------------------------------------------------- abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.abas button:hover { color: var(--texto); }
.abas button.ativa { color: var(--primaria-esc); border-bottom-color: var(--primaria); }

/* ---------------------------------------------------------------- janelas (modal) e gaveta */
.fundo-janela { position: fixed; inset: 0; background: rgba(11, 19, 36, .45); backdrop-filter: blur(2px); z-index: 50; display: grid; place-items: center; padding: 20px; animation: aparece .15s ease-out; }
.janela { background: #fff; border-radius: 16px; box-shadow: var(--sombra-alta); width: min(560px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; animation: sobe .18s ease-out; }
.janela.larga { width: min(860px, 100%); }
.janela.estreita { width: min(420px, 100%); }
.janela-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; }
.janela-topo h2 { font-size: 17px; }
.janela-topo .sub { font-size: 13px; margin-top: 2px; }
.janela-corpo { padding: 4px 20px 18px; overflow: auto; }
.janela-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--borda); background: #fbfcfe; border-radius: 0 0 16px 16px; }
.gaveta-fundo { position: fixed; inset: 0; background: rgba(11, 19, 36, .35); z-index: 50; animation: aparece .15s ease-out; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #fff; z-index: 51; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; animation: entraDireita .2s ease-out; }
.gaveta.larga { width: min(720px, 100%); }
.gaveta-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.gaveta-topo h2 { font-size: 17px; }
.gaveta-corpo { flex: 1; overflow: auto; padding: 18px 20px; }
.gaveta-rodape { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--borda); background: #fbfcfe; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes entraDireita { from { transform: translateX(30px); opacity: 0; } }

/* avisos rápidos (toast) */
.avisos { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--marinho); color: #e2e8f0; box-shadow: var(--sombra-alta); animation: sobe .2s ease-out; }
.toast .icone { color: #5eead4; margin-top: 1px; }
.toast.erro { background: #7f1d1d; }
.toast.erro .icone { color: #fecaca; }
.toast span { flex: 1; }
.toast button { border: 0; background: none; color: inherit; opacity: .7; padding: 0; }

/* carregando */
.esqueleto { background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 50%, #eef1f5 75%); background-size: 200% 100%; animation: brilho 1.2s infinite; border-radius: 8px; min-height: 14px; }
@keyframes brilho { to { background-position: -200% 0; } }
.girando { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- estrutura do app */
.app { display: grid; grid-template-columns: var(--lateral-l) 1fr; min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; background: radial-gradient(420px 300px at 0 0, rgba(20, 184, 166, .14), transparent 70%), linear-gradient(180deg, var(--marinho-2), var(--marinho));
    color: var(--lateral-texto); display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3a57 transparent; }
.marca { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; color: #fff; text-decoration: none !important; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
.marca-texto { display: flex; align-items: baseline; gap: 5px; font-family: var(--titulo); font-size: 18px; letter-spacing: -.01em; }
.marca-texto strong { color: #fff; font-weight: 700; }
.marca-texto em { font-style: normal; color: #5eead4; font-weight: 700; }
.conta-atual { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); color: #e2e8f0; text-decoration: none !important; }
.conta-atual:hover { background: rgba(255,255,255,.08); }
.conta-atual .icone { color: #5eead4; }
.conta-atual div { display: grid; min-width: 0; }
.conta-atual strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-atual small { font-size: 11.5px; color: var(--lateral-sub); }
.menu { display: grid; gap: 1px; }
.menu-titulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-sub); padding: 14px 12px 6px; }
.menu-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px; color: var(--lateral-texto); font-weight: 500; text-decoration: none !important; transition: background .12s, color .12s; }
.menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.ativo { background: linear-gradient(90deg, rgba(20,184,166,.22), rgba(20,184,166,.08)); color: #fff; box-shadow: inset 2px 0 0 #2dd4bf; }
.menu-item.ativo .icone { color: #5eead4; }
.menu-item .icone { color: #8ea0bf; }
.menu-item .contador { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #b91c1c; color: #fff; }
.menu-item .contador.ambar { background: #b45309; }
.menu-kbd { background: transparent !important; color: #7c8aa5 !important; border-color: #2b3a57 !important; opacity: 0; transition: opacity .15s; }
.lateral:hover .menu-kbd, .menu-item.ativo .menu-kbd { opacity: 1; }
.menu-grupo { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 12px; margin-top: 2px; border: 0; border-radius: 9px; background: none; color: var(--lateral-texto); font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.menu-grupo:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-grupo .icone { color: #8ea0bf; }
.menu-grupo .icone:last-child { margin-left: auto; transition: transform .25s; }
.menu-grupo.aberto { color: #fff; }
.menu-grupo.aberto .icone:last-child { transform: rotate(180deg); }
.menu-grupo.tem-ativo .icone:first-child { color: #5eead4; }
.menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.menu-sub.aberto { grid-template-rows: 1fr; }
.menu-sub > div { overflow: hidden; display: grid; gap: 1px; margin-left: 20px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.08); }
.menu-sub .menu-item { padding: 7px 10px; font-size: 13.5px; }
.lateral-pe { margin-top: auto; padding-top: 14px; display: grid; gap: 2px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: rgba(246, 247, 251, .86); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; min-height: 60px; }
.topo.rolou { border-bottom-color: var(--borda); }
.topo .procura { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; color: var(--sub-2); min-width: 280px; cursor: pointer; font-size: 13.5px; }
.topo .procura:hover { border-color: var(--borda-forte); }
.topo .procura kbd { margin-left: auto; }
.usuario { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.avatar.grande { width: 44px; height: 44px; font-size: 15px; }
.usuario-botao { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 6px 4px 4px; border-radius: 999px; }
.usuario-botao:hover { background: #eef1f6; }
.usuario-botao div { display: grid; text-align: left; line-height: 1.25; }
.usuario-botao strong { font-size: 13px; }
.usuario-botao small { color: var(--sub); font-size: 11.5px; }
.menu-flutuante { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta); min-width: 230px; padding: 6px; z-index: 30; animation: sobe .12s ease-out; }
.menu-flutuante a, .menu-flutuante button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--texto); border: 0; background: none; text-align: left; text-decoration: none !important; }
.menu-flutuante a:hover, .menu-flutuante button:hover { background: #f1f5f9; }
.menu-flutuante hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 0; }
.conteudo { padding: 8px 28px 40px; width: 100%; max-width: 1480px; display: grid; gap: 20px; align-content: start; }

.pagina-topo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 10px; }
.pagina-topo .titulos { display: grid; gap: 4px; min-width: 0; }
.pagina-topo h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pagina-topo .sub { font-size: 14px; max-width: 760px; }
.pagina-topo .acoes { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.migalha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); }
.migalha a { color: var(--sub); }
.migalha a:hover { color: var(--texto); }
.barra-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.so-movel { display: none !important; }
.fundo-movel { display: none; }
@media (max-width: 960px) {
    .app { grid-template-columns: 1fr; }
    .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
    .app.menu-aberto .lateral { transform: none; }
    .app.menu-aberto .fundo-movel { display: block; position: fixed; inset: 0; background: rgba(11,19,36,.45); z-index: 55; }
    .so-movel { display: inline-flex !important; }
    .so-pc { display: none !important; }
    .topo { padding: 10px 16px; }
    .conteudo { padding: 8px 16px 32px; }
    .topo .procura { min-width: 0; }
    .usuario-botao div { display: none; }
}

/* ---------------------------------------------------------------- telas de conta (login limpo, fundo animado) */
.conta { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px 56px; overflow: hidden;
    background: linear-gradient(160deg, var(--marinho-2), var(--marinho)); }
.conta-fundo { position: absolute; inset: 0; pointer-events: none; }
.bolha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.bolha.b1 { width: 520px; height: 520px; background: #14b8a6; top: -160px; right: -120px; animation: deriva1 18s ease-in-out infinite alternate; }
.bolha.b2 { width: 420px; height: 420px; background: #f59e0b; bottom: -180px; left: -120px; opacity: .28; animation: deriva2 22s ease-in-out infinite alternate; }
.bolha.b3 { width: 300px; height: 300px; background: #0ea5e9; top: 40%; left: 55%; opacity: .22; animation: deriva3 26s ease-in-out infinite alternate; }
@keyframes deriva1 { to { transform: translate(-140px, 120px) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(160px, -90px) scale(1.1); } }
@keyframes deriva3 { to { transform: translate(-220px, -140px) scale(.85); } }
.conta-relogio { position: absolute; width: min(760px, 120vw); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .09; }
.conta-relogio .aro { fill: none; stroke: #fff; stroke-width: 1; }
.conta-relogio .tracos { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1.5 39.34; }
.conta-relogio .ponteiro { stroke: #5eead4; stroke-linecap: round; transform-origin: 100px 100px; }
.conta-relogio .horas { stroke-width: 4; animation: gira 720s linear infinite; }
.conta-relogio .minutos { stroke-width: 2.5; animation: gira 60s linear infinite; }

.conta-cartao { position: relative; z-index: 1; width: min(400px, 100%); display: grid; gap: 22px; padding: 34px 32px 28px;
    background: rgba(255,255,255,.97); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .65), 0 0 0 1px rgba(255,255,255,.08);
    animation: contaSobe .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes contaSobe { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.conta-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none !important; }
.conta-marca img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(13, 148, 136, .35)); animation: pulsa 3.2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: translateY(-3px); filter: drop-shadow(0 16px 18px rgba(13, 148, 136, .5)); } }
.conta-marca .marca-texto { font-size: 22px; }
.conta-marca .marca-texto strong { color: var(--marinho); }
.conta-marca .marca-texto em { color: var(--primaria); }
.conta-caixa { display: grid; gap: 18px; }
.conta-caixa h2 { font-size: 20px; font-weight: 700; text-align: center; color: var(--texto); }
.conta-caixa .sub { text-align: center; margin-top: -10px; }
.conta-caixa > * { animation: contaSobe .5s cubic-bezier(.2,.8,.2,1) both; }
.conta-caixa > :nth-child(2) { animation-delay: .08s; } .conta-caixa > :nth-child(3) { animation-delay: .14s; }
.conta-caixa .form { gap: 14px; }

/* campo com rótulo que flutua */
.flutua { position: relative; }
.flutua input { width: 100%; height: 52px; padding: 20px 14px 6px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--campo); font: inherit; font-size: 15px; color: var(--texto); transition: border-color .2s, box-shadow .2s, background .2s; }
.flutua input:focus { outline: 0; border-color: var(--primaria); background: #fff; box-shadow: 0 0 0 4px rgba(13, 148, 136, .14); }
.flutua label { position: absolute; left: 15px; top: 16px; font-size: 15px; color: var(--sub); pointer-events: none; transform-origin: left top; transition: transform .18s ease, color .18s; }
.flutua input:focus + label, .flutua input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.76); color: var(--primaria-esc); font-weight: 600; }
.flutua input:-webkit-autofill + label { transform: translateY(-9px) scale(.76); }
.senha-caixa input { padding-right: 46px; }
.senha-caixa button { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); }
.caps { font-size: 12.5px; color: var(--ambar); display: none; margin-top: -6px; }
.caps.ligado { display: block; }

.conta-entrar { position: relative; height: 50px; font-size: 15.5px; overflow: hidden; transition: transform .12s, box-shadow .2s; }
.conta-entrar:hover { box-shadow: 0 10px 24px -10px rgba(13, 148, 136, .8); }
.conta-entrar:active { transform: scale(.985); }
.conta-entrar .giro { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
.enviando .conta-entrar span { display: none; }
.enviando .conta-entrar .giro { display: inline-block; }
.conta-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.conta-linha .opcao { font-size: 13px; color: var(--sub); }
.esqueci summary { list-style: none; cursor: pointer; color: var(--primaria-esc); font-weight: 600; }
.esqueci summary::-webkit-details-marker { display: none; }
.esqueci[open] { flex-basis: 100%; }
.esqueci[open] summary { display: none; }
.esqueci p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--primaria-clara); color: var(--primaria-esc); font-size: 13px; animation: contaSobe .3s ease both; }
.conta-erro { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; font-weight: 600; animation: treme .45s ease both !important; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.conta-pe { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(203, 213, 225, .5); font-size: 12px; z-index: 1; }

.lista-contas { display: grid; gap: 10px; }
.lista-contas a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borda); background: #fff; color: var(--texto); text-decoration: none !important; transition: border-color .15s, transform .1s; }
.lista-contas a:hover { border-color: var(--primaria-borda); transform: translateY(-1px); }
.lista-contas a > .icone:last-child { margin-left: auto; color: var(--sub-2); }
@media (max-width: 520px) {
    .conta { place-items: start center; padding-top: 28px; }
    .conta-cartao { padding: 28px 22px 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .bolha, .conta-relogio .ponteiro, .conta-marca img, .conta-cartao, .conta-caixa > *, .conta-erro { animation: none !important; }
}

/* ================================================================ tratamento (frente principal) */
.seletor-periodo { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 3px; position: relative; }
.seletor-periodo-texto { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-weight: 700; font-family: var(--titulo); min-width: 170px; justify-content: center; }
.seletor-periodo-texto:hover { background: #f1f5f9; }
.seletor-periodo-texto .icone { color: var(--primaria); }

.lista-func { display: grid; }
.func-linha { display: grid; grid-template-columns: 44px minmax(180px, 1.4fr) minmax(0, 2fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #eef1f5; cursor: pointer; transition: background .1s; color: inherit; text-decoration: none !important; }
.func-linha:last-child { border-bottom: 0; }
.func-linha:hover, .func-linha.sel { background: #f8fafc; }
.func-linha.sel { box-shadow: inset 3px 0 0 var(--primaria); }
.func-linha .nome-sub { display: grid; min-width: 0; }
.func-linha .nome-sub strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.func-linha .nome-sub small { color: var(--sub); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.func-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.func-numeros { display: flex; gap: 18px; font-size: 12.5px; color: var(--sub); }
.func-numeros b { display: block; font-size: 14px; color: var(--texto); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .func-linha { grid-template-columns: 40px 1fr; } .func-linha .func-chips { grid-column: 2; } .func-numeros { grid-column: 2; } }

.folha-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.folha-topo .quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.folha-topo .quem h1 { font-size: 21px; font-weight: 800; }
.folha-topo .quem .sub { font-size: 13px; }
.folha-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.folha-total { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; }
.folha-total span { font-size: 11.5px; color: var(--sub); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.folha-total b { font-family: var(--titulo); font-size: 19px; font-variant-numeric: tabular-nums; }
.folha-total.ex b { color: var(--primaria-esc); } .folha-total.at b { color: var(--ambar); } .folha-total.fa b { color: var(--vermelho); } .folha-total.no b { color: var(--roxo); }

.folha-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .folha-grade { grid-template-columns: 1fr; } }
.folha { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.folha th { background: #f8fafc; text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--sub); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.folha td { padding: 8px 8px; border-bottom: 1px solid #f0f2f6; vertical-align: middle; white-space: nowrap; }
.folha td.n { text-align: right; font-variant-numeric: tabular-nums; }
.folha tr { cursor: pointer; }
.folha tbody tr:hover td { background: #fafbfd; }
.folha tr.sel td { background: var(--primaria-clara) !important; }
.folha tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primaria); }
.folha tr.fds td { background: #fbfbfd; }
.folha tr.fds td.dia { color: var(--sub); }
.folha tr.problema td.dia { color: var(--vermelho); }
.folha tr.fora td { opacity: .45; }
.folha td.dia { font-weight: 700; font-family: var(--titulo); }
.folha td.dia small { display: block; font-family: var(--corpo); font-weight: 500; color: var(--sub); font-size: 11.5px; }
.folha .zero { color: #cbd5e1; }
.batidas { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.batida { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; font: 600 12.5px var(--mono); background: #f1f5f9; color: var(--texto); border: 1px solid #e2e8f0; }
.batida.inc { background: var(--azul-fundo); color: var(--azul); border-color: var(--azul-borda); }
.batida.inc::after { content: 'I'; font: 700 9.5px var(--corpo); margin-left: 2px; opacity: .8; }
.batida.pre { background: var(--roxo-fundo); color: var(--roxo); border-color: #ddd6fe; }
.batida.des { text-decoration: line-through; color: var(--sub-2); background: #fff; border-style: dashed; }
.batida.falta-par { background: var(--vermelho-fundo); color: var(--vermelho); border: 1px dashed #fca5a5; font-family: var(--corpo); font-weight: 600; }
.marcas-dia { display: flex; gap: 4px; }
.prevista { color: var(--sub); font-size: 12px; font-family: var(--mono); }

.painel-dia { min-width: 0; position: sticky; top: 76px; max-height: calc(100dvh - 92px); overflow: auto; }
.painel-dia h3 { font-size: 16px; }
.explicacao { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.explicacao li { display: flex; gap: 8px; font-size: 13px; color: #334155; line-height: 1.45; }
.explicacao li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primaria); margin-top: 7px; flex: none; }
.acoes-dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acoes-dia .botao { min-width: 0; padding-left: 10px; padding-right: 8px; }
.acoes-dia .botao { justify-content: flex-start; }
.acoes-dia .botao kbd { margin-left: auto; }
.lista-batidas-dia { display: grid; gap: 6px; }
.lista-batidas-dia > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-batidas-dia .hora { font: 700 15px var(--mono); }
.lista-batidas-dia .des .hora { text-decoration: line-through; color: var(--sub-2); }
.lista-batidas-dia small { color: var(--sub); font-size: 12px; }
.trat-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; }
.trat-item:last-child { border-bottom: 0; }
.trat-item .icone { color: var(--primaria); margin-top: 2px; }
.sugestao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, var(--primaria-clara), #fff); border: 1px solid var(--primaria-borda); }
.sugestao .icone { color: var(--primaria); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sub); align-items: center; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.sugestao .botao { margin-left: auto; }

/* ================================================================ espelho */
.grade-espelho { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grade-espelho { grid-template-columns: 1fr; } }
.espelho-previa { position: sticky; top: 76px; }
.folha-mini { aspect-ratio: 1 / 1.25; max-width: 230px; margin: 4px auto; background: #fff; border: 1px solid var(--borda); border-radius: 6px; box-shadow: 0 10px 30px -12px rgba(15,23,42,.25); padding: 14px 14px; display: grid; align-content: start; gap: 5px; transform: rotate(-1.5deg); }
.fm-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 8px; color: var(--sub); }
.fm-topo b { color: var(--primaria); font-size: 9px; letter-spacing: .04em; }
.fm-quem { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 3px; padding: 5px; margin-bottom: 3px; }
.fm-quem span, .fm-totais span, .fm-ass span { height: 5px; border-radius: 3px; background: #cbd5e1; }
.fm-linha { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 2px 0; border-bottom: 1px solid #f1f5f9; }
.fm-linha i { height: 4px; border-radius: 2px; background: #e2e8f0; }
.fm-linha i.inc { background: #93c5fd; }
.fm-linha i.des { background: repeating-linear-gradient(90deg, #cbd5e1 0 3px, transparent 3px 5px); }
.fm-totais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border: 1px solid #eef1f5; border-radius: 3px; padding: 6px 5px; margin-top: 4px; }
.fm-totais span { height: 8px; background: #99f6e4; }
.fm-ass { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.fm-ass span { height: 1px; background: #94a3b8; }

/* ================================================================ início */
.barra-progresso { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.barra-progresso span { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, var(--primaria)); border-radius: 99px; transition: width .4s; }
.jornada { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px 18px 18px; }
@media (max-width: 1000px) { .jornada { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .jornada { grid-template-columns: 1fr; } }
.jornada-passo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; color: inherit; text-decoration: none !important; transition: border-color .15s, transform .15s; background: #fff; }
.jornada-passo:hover { border-color: var(--primaria-borda); transform: translateY(-1px); }
.jornada-passo strong { font-size: 13.5px; }
.jornada-passo small { color: var(--sub); font-size: 12px; line-height: 1.4; }
.jornada-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12.5px var(--titulo); background: #f1f5f9; color: var(--sub); margin-bottom: 4px; }
.jornada-passo.feito { background: #f8fafc; }
.jornada-passo.feito strong { color: var(--sub); }
.jornada-passo.feito .jornada-num { background: var(--primaria); color: #fff; }
.jornada-passo.proximo { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }
.jornada-passo.proximo .jornada-num { background: var(--primaria-clara); color: var(--primaria-esc); }
.grade-inicio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grade-inicio { grid-template-columns: 1fr; } }
a.indicador { color: inherit; text-decoration: none !important; transition: transform .15s, box-shadow .15s; }
a.indicador:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(15,23,42,.25); }
.atalho-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none !important; transition: border-color .15s; }
.atalho-card:hover { border-color: var(--primaria-borda); }
.atalho-card > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.atalho-card small { color: var(--sub); font-size: 12.5px; }
.atalho-card > .icone:last-child { color: var(--sub-2); }
.atalho-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; }

/* ================================================================ totais */
.eventos-soma { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.evento-cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; border-top: 3px solid #cbd5e1; }
.evento-cartao span { font-size: 11px; color: var(--sub); }
.evento-cartao b { font: 800 20px var(--titulo); font-variant-numeric: tabular-nums; }
.evento-cartao small { color: var(--sub); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento-cartao.ex { border-top-color: var(--primaria); } .evento-cartao.at { border-top-color: var(--ambar); }
.evento-cartao.fa { border-top-color: var(--vermelho); } .evento-cartao.no { border-top-color: var(--roxo); }

/* ================================================================ ajuda */
.regra-ajuda summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.regra-ajuda summary::-webkit-details-marker { display: none; }
.regra-ajuda[open] summary { padding-bottom: 10px; }
.regra-ajuda p { color: #334155; font-size: 14px; }
.exemplo { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--primaria-clara); color: var(--primaria-esc); font-size: 13.5px; }
.exemplo .icone { margin-top: 2px; flex: none; }
/* ================================================================ FRENTE CADASTROS B (horários, escalas, regras, motivos, feriados, eventos)
   Prefixo cb-. A barra do dia (.barra-dia) é componente reutilizável: Components/Telas/Cadastros/BarraDia.razor */
.barra-dia { display: grid; gap: 3px; }
.barra-dia-trilho { position: relative; height: 22px; border-radius: 7px; background: repeating-linear-gradient(90deg, #f1f5f9 0 calc(100% / 24 - 1px), #e8edf3 calc(100% / 24 - 1px) calc(100% / 24)); border: 1px solid var(--borda); overflow: hidden; }
.barra-dia.compacta .barra-dia-trilho { height: 12px; border-radius: 5px; }
.barra-dia-periodo { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); min-width: 2px; }
.barra-dia.compacta .barra-dia-periodo { top: 1px; bottom: 1px; border-radius: 3px; }
.barra-dia-noite { position: absolute; top: 0; bottom: 0; background: rgba(79, 70, 229, .10); }
.barra-dia-guia { position: absolute; top: 0; bottom: 0; width: 1px; background: #cbd5e1; }
.barra-dia-batida { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--texto); box-shadow: 0 0 0 1.5px #fff; }
.barra-dia-regua { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--sub-2); font-variant-numeric: tabular-nums; }

.cb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cb-cartao { display: grid; gap: 12px; padding: 16px 18px; text-align: left; border-left: 4px solid var(--cor, var(--primaria)); transition: border-color .15s, transform .1s, box-shadow .15s; font: inherit; color: inherit; width: 100%; align-content: start; }
.cb-cartao:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.cb-cartao.inativo { opacity: .6; }
.cb-titulo { font-family: var(--titulo); font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-codigo { background: color-mix(in srgb, var(--cor, var(--primaria)) 12%, #fff); color: var(--cor, var(--primaria)); border-color: color-mix(in srgb, var(--cor, var(--primaria)) 30%, #fff); font-family: var(--mono); }
.cb-horas { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-horas.grande { font-family: var(--titulo); font-size: 18px; color: var(--primaria-esc); }
.cb-lei { font-size: 10.5px; padding: 1px 7px; font-weight: 600; vertical-align: 1px; margin-left: 4px; }
.cb-bloco { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: #fbfcfe; }
.cb-cores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-cor { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borda-forte); padding: 0; }
.cb-cor.ativa { box-shadow: 0 0 0 2px var(--texto); }
.cb-cor-livre { width: 34px; height: 30px; padding: 0; border: 1px solid var(--borda-forte); border-radius: 8px; background: #fff; cursor: pointer; }
.cb-periodo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--raio-p); background: #fff; border: 1px solid var(--borda); }
.cb-periodo.conflito { border-color: #f87171; background: var(--vermelho-fundo); }
.cb-periodo-num { font-weight: 700; color: var(--sub); width: 26px; }
.cb-hora { display: grid; gap: 2px; }
.cb-hora small { font-size: 11px; color: var(--sub); font-weight: 600; }
.cb-hora input, .cb-mini-entrada { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda-forte); font: inherit; font-variant-numeric: tabular-nums; background: #fff; color: var(--texto); min-height: 34px; }
.cb-hora input:focus, .cb-mini-entrada:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(13, 148, 136, .16); }
.cb-sufixo { display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--borda-forte); background: var(--campo); color: var(--sub); font-size: 13px; }
.perigo-txt { color: var(--vermelho) !important; }
.perigo-txt:hover { background: var(--vermelho-fundo) !important; }

/* escolha em cartões (tipo de escala, modo de tolerância, compensação...) */
.cb-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cb-opcao { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: #fff; font: inherit; color: inherit; position: relative; transition: border-color .15s, box-shadow .15s; }
.cb-opcao:hover { border-color: var(--primaria-borda); }
.cb-opcao.ativa { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(13, 148, 136, .14); background: var(--primaria-clara); }
.cb-opcao strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cb-opcao strong .icone { color: var(--primaria-esc); }
.cb-opcao span { font-size: 12.5px; color: var(--sub); }
.cb-opcao .cb-exemplo { font-family: var(--mono); font-size: 11.5px; color: var(--texto); background: rgba(15,23,42,.04); padding: 4px 7px; border-radius: 6px; margin-top: 4px; }
.cb-opcao.grande { padding: 16px; gap: 6px; }
.cb-opcao.grande strong { font-size: 15px; }

/* escalas */
.cb-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cb-dia { display: grid; gap: 8px; padding: 10px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: #fff; align-content: start; border-top: 4px solid var(--cor, var(--borda-forte)); min-width: 0; }
.cb-dia.folga { background: #f8fafc; }
.cb-dia.dsr { background: var(--ambar-fundo); border-top-color: #f59e0b; }
.cb-dia-nome { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.cb-dia select { width: 100%; padding: 6px; border-radius: 8px; border: 1px solid var(--borda-forte); font: inherit; font-size: 12.5px; background: #fff; min-width: 0; }
.cb-dia .sub { font-size: 11.5px; }
.cb-ciclo { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cb-tira { display: flex; gap: 3px; }
.cb-tira span { flex: 1; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; }
.cb-tira span.folga { background: #e2e8f0; color: var(--sub); }
.cb-tira span.dsr { background: #fde68a; color: #92400e; }
.cb-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cb-cal-cab { font-size: 11px; font-weight: 700; color: var(--sub); text-align: center; text-transform: uppercase; padding: 2px 0; }
.cb-cal-dia { min-height: 54px; border-radius: 8px; padding: 5px 6px; font-size: 11.5px; display: grid; align-content: start; gap: 2px; border: 1px solid var(--borda); background: #fff; border-left: 4px solid var(--cor, var(--borda)); min-width: 0; }
.cb-cal-dia b { font-size: 12px; }
.cb-cal-dia.folga { background: #f8fafc; color: var(--sub); }
.cb-cal-dia.dsr { background: var(--ambar-fundo); border-left-color: #f59e0b; color: #92400e; }
.cb-cal-dia.hoje { outline: 2px solid var(--primaria); outline-offset: -1px; }
.cb-cal-dia .mono { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-cal-semana-total { grid-column: 1 / -1; display: none; }
@media (max-width: 700px) { .cb-semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-cal-dia { min-height: 44px; padding: 3px; } .cb-cal-dia .mono { display: none; } }

/* regras: editor + prévia fixa */
.cb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.cb-previa { position: sticky; top: 76px; display: grid; gap: 12px; max-height: calc(100dvh - 92px); overflow: auto; }
.cb-previa .cartao-corpo { display: grid; gap: 12px; padding: 16px; }
.cb-previa-topo { background: linear-gradient(135deg, #0f766e, #0d9488); color: #fff; border-radius: var(--raio) var(--raio) 0 0; padding: 14px 16px; display: grid; gap: 2px; }
.cb-previa-topo h3 { font-size: 15px; display: flex; gap: 8px; align-items: center; }
.cb-previa-topo span { font-size: 12.5px; color: #ccfbf1; }
.cb-batidas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-batida { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--borda-forte); border-radius: 8px; padding: 2px 2px 2px 6px; }
.cb-batida input { border: 0; font: inherit; font-size: 13px; width: 78px; padding: 3px 0; background: transparent; font-variant-numeric: tabular-nums; }
.cb-batida input:focus { outline: 0; }
.cb-batida .botao-icone { padding: 3px; }
.cb-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cb-numero { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 10px; display: grid; gap: 1px; background: #fff; }
.cb-numero small { font-size: 11.5px; color: var(--sub); font-weight: 600; }
.cb-numero b { font-family: var(--titulo); font-size: 18px; font-variant-numeric: tabular-nums; }
.cb-numero.ok b { color: var(--verde); } .cb-numero.ruim b { color: var(--vermelho); } .cb-numero.atencao b { color: var(--ambar); } .cb-numero.roxo b { color: var(--roxo); }
.cb-numero.zero b { color: var(--sub-2); }
.cb-explicacao { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cb-explicacao li { display: flex; gap: 8px; font-size: 13px; padding: 7px 9px; border-radius: 8px; background: var(--azul-fundo); color: #1e3a8a; }
.cb-explicacao li .icone { margin-top: 2px; }
.cb-secoes-nav { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 60px; z-index: 5; padding: 8px 0; background: var(--fundo); }
.cb-secoes-nav a { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: 12.5px; font-weight: 600; color: var(--sub); text-decoration: none !important; display: inline-flex; gap: 6px; align-items: center; }
.cb-secoes-nav a:hover { color: var(--texto); border-color: var(--borda-forte); }
.cb-secao { scroll-margin-top: 120px; }
.cb-secao > .cartao-topo .icone { color: var(--primaria-esc); }
.cb-secao .cartao-corpo { display: grid; gap: 16px; }
.cb-faixa { display: grid; grid-template-columns: auto 120px auto 100px auto minmax(140px, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: #fff; font-size: 13px; }
.cb-faixa input, .cb-faixa select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda-forte); font: inherit; font-size: 13px; background: #fff; min-width: 0; width: 100%; }
.cb-num-campo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-num-campo input { width: 84px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--borda-forte); font: inherit; font-variant-numeric: tabular-nums; }
.cb-num-campo input[type=time] { width: 110px; }
.cb-linha-opcao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.cb-linha-opcao:last-child { border-bottom: 0; }
.cb-linha-opcao > div:first-child { display: grid; gap: 2px; }
.cb-linha-opcao strong { font-size: 13.5px; }
.cb-linha-opcao .ajuda { font-size: 12.5px; color: var(--sub); }
.cb-regra-cartao { display: grid; gap: 10px; padding: 16px 18px; text-align: left; font: inherit; color: inherit; width: 100%; }
.cb-regra-cartao:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
@media (max-width: 1180px) { .cb-editor { grid-template-columns: 1fr; } .cb-previa { position: static; max-height: none; } }
@media (max-width: 700px) { .cb-faixa { grid-template-columns: 1fr 1fr; } .cb-linha-opcao { grid-template-columns: 1fr; } }

/* motivos */
.cb-grupo-titulo { display: flex; align-items: center; gap: 10px; margin: 6px 0 -4px; }
.cb-grupo-titulo h2 { font-size: 16px; }
.cb-grupo-titulo .icone { color: var(--primaria-esc); }
.cb-motivo { display: grid; gap: 8px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; width: 100%; align-content: start; }
.cb-motivo:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.cb-motivo.inativo { opacity: .55; }
.cb-motivo .linha { gap: 6px; }
.cb-motivo-limite { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--texto); }
.cb-motivo-limite .icone { color: var(--sub-2); }

/* feriados */
.cb-feriados { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.cb-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cb-mes { padding: 10px 12px; }
.cb-mes h3 { font-size: 13px; text-transform: capitalize; margin-bottom: 6px; }
.cb-mes-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; text-align: center; }
.cb-mes-grade .cab { color: var(--sub-2); font-weight: 700; font-size: 10px; }
.cb-mes-grade button { border: 0; background: none; padding: 3px 0; border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--texto); }
.cb-mes-grade button:hover { background: #eef1f6; }
.cb-mes-grade button.dom { color: var(--sub-2); }
.cb-mes-grade button.nacional { background: var(--vermelho); color: #fff; font-weight: 700; }
.cb-mes-grade button.facultativo { background: var(--ambar-fundo); color: var(--ambar); box-shadow: inset 0 0 0 1px var(--ambar-borda); font-weight: 700; }
.cb-mes-grade button.facultativo.considerado { background: #f59e0b; color: #fff; }
.cb-mes-grade button.local { background: var(--indigo); color: #fff; font-weight: 700; }
.cb-mes-grade button.nao-considerado { text-decoration: line-through; }
.cb-mes-grade button.hoje { box-shadow: inset 0 0 0 2px var(--primaria); }
.cb-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--sub); }
.cb-legenda span { display: inline-flex; gap: 6px; align-items: center; }
.cb-legenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cb-fer-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #eef1f5; }
.cb-fer-item:last-child { border-bottom: 0; }
.cb-fer-data { width: 46px; flex: none; display: grid; text-align: center; line-height: 1.1; padding: 4px 0; border-radius: 8px; background: #f1f5f9; }
.cb-fer-data b { font-size: 16px; font-family: var(--titulo); }
.cb-fer-data small { font-size: 10.5px; text-transform: uppercase; color: var(--sub); font-weight: 700; }
.cb-fer-item > div:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.cb-fer-item small { color: var(--sub); font-size: 12px; }
.cb-fer-item.clicavel { cursor: pointer; }
.cb-fer-item.clicavel:hover { background: #f8fafc; }
@media (max-width: 1180px) { .cb-feriados { grid-template-columns: 1fr; } }

/* eventos */
.cb-rubrica { width: 140px; padding: 6px 9px; border-radius: 8px; border: 1px dashed var(--borda-forte); font: inherit; font-family: var(--mono); font-size: 13px; background: #fff; }
.cb-rubrica:hover { border-style: solid; }
.cb-rubrica:focus { outline: 0; border: 1px solid var(--primaria); box-shadow: 0 0 0 3px rgba(13, 148, 136, .16); }
.cb-rubrica.salvo { border-color: var(--verde-borda); background: var(--verde-fundo); }
.cb-fluxo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-fluxo-passo { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--borda); font-size: 13px; }
.cb-fluxo-passo .icone { color: var(--primaria-esc); }
.gaveta.cb-gaveta-xl { width: min(1040px, 100%); }
.campo .cb-cores input.cb-cor-livre { width: 34px; min-height: 30px; height: 30px; padding: 0 2px; border-radius: 8px; }
/* Confirmar aberto de dentro de uma gaveta: a janela fica por cima da gaveta (antes ficava atrás, z-index 50 < 51) */
.gaveta ~ .fundo-janela, .gaveta-fundo ~ .fundo-janela { z-index: 60; }
/* ================================================================ frente: IMPORTAÇÃO DAS BATIDAS
   (importar arquivo do relógio, histórico, batidas sem funcionário, relógios) */

/* jornada em passos (1 escolher → 2 conferir → 3 pronto) */
.imp-passos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.imp-passo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--branco); border: 1px solid var(--borda); color: var(--sub); font-weight: 600; font-size: 13px; }
.imp-passo b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; color: var(--sub); font-size: 12px; }
.imp-passo.atual { border-color: var(--primaria-borda); color: var(--primaria-esc); background: var(--primaria-clara); }
.imp-passo.atual b { background: var(--primaria); color: #fff; }
.imp-passo.feito { color: var(--verde); }
.imp-passo.feito b { background: var(--verde-fundo); color: var(--verde); }
.imp-passos .seta { color: var(--sub-2); }

/* área de arrastar e soltar */
.imp-soltar { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 56px 24px; border: 2px dashed var(--borda-forte); border-radius: 18px;
    background: radial-gradient(600px 200px at 50% 0, rgba(13, 148, 136, .07), transparent 70%), var(--branco); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.imp-soltar:hover, .imp-soltar:focus-within { border-color: var(--primaria); }
.imp-soltar.arrastando { border-color: var(--primaria); background: var(--primaria-clara); transform: scale(1.005); }
.imp-soltar input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.imp-soltar .imp-icone { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); margin-bottom: 6px; }
.imp-soltar strong { font-family: var(--titulo); font-size: 19px; }
.imp-soltar .linha { justify-content: center; margin-top: 6px; }
.imp-soltar.lendo { cursor: progress; }

/* tipos de arquivo aceitos */
.imp-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.imp-tipo { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: #fbfcfe; }
.imp-tipo .linha { gap: 8px; font-weight: 600; }
.imp-tipo .mono { color: var(--sub); white-space: pre; overflow-x: auto; display: block; font-size: 11.5px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 6px 8px; margin-top: 4px; }
@media (max-width: 900px) { .imp-tipos { grid-template-columns: 1fr; } }

/* arquivo escolhido */
.imp-arquivo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.imp-arquivo .imp-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--indigo-claro); color: var(--indigo); }
.imp-arquivo .titulo { font-weight: 700; font-family: var(--titulo); font-size: 15px; word-break: break-all; }

/* indicador com faixa colorida à esquerda */
.indicador.imp-faixa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--borda-forte); }
.indicador.imp-faixa.bom::before { background: var(--verde); }
.indicador.imp-faixa.atencao::before { background: var(--ambar); }
.indicador.imp-faixa.alerta::before { background: var(--vermelho); }
.indicador.imp-faixa.primaria::before { background: var(--primaria); }
.indicador .valor.imp-menor { font-size: 19px; line-height: 1.35; padding-top: 4px; }

/* lista de pessoas reconhecidas / desconhecidas */
.imp-pessoas { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-pessoa { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font-size: 13px; }
.imp-pessoa .ini { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--primaria-clara); color: var(--primaria-esc); }
.imp-pessoa small { color: var(--sub); font-variant-numeric: tabular-nums; }
.imp-desconhecido { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ambar-borda); background: var(--ambar-fundo); border-radius: var(--raio-p); }
.imp-desconhecido .ini { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ambar); border: 1px solid var(--ambar-borda); }

/* lista de avisos do arquivo */
.imp-avisos { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.imp-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: #f8fafc; }
.imp-aviso.grave { background: var(--ambar-fundo); color: #78350f; }
.imp-aviso .icone { margin-top: 2px; flex: none; }
.imp-aviso .linha-n { margin-left: auto; color: var(--sub); font-size: 12px; white-space: nowrap; }

/* resultado */
.imp-pronto { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 24px; }
.imp-pronto .imp-icone { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-fundo); color: var(--verde); border: 1px solid var(--verde-borda); }
.imp-pronto h2 { font-size: 24px; font-weight: 800; }
.imp-pronto .linha { justify-content: center; margin-top: 8px; }

/* cartões de relógio */
.imp-relogios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.imp-relogio { text-align: left; display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); cursor: pointer; transition: border-color .15s, transform .1s; }
.imp-relogio:hover, .imp-relogio:focus-visible { border-color: var(--primaria-borda); transform: translateY(-1px); }
.imp-relogio .topo-r { display: flex; gap: 12px; align-items: flex-start; }
.imp-relogio .imp-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; }
.imp-relogio .imp-icone.tipo-A { background: var(--indigo-claro); color: var(--indigo); }
.imp-relogio .imp-icone.tipo-P { background: var(--roxo-fundo); color: var(--roxo); }
.imp-relogio h3 { font-size: 15px; }
.imp-relogio .numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.imp-relogio .numeros div { display: grid; }
.imp-relogio .numeros b { font-family: var(--titulo); font-size: 16px; font-variant-numeric: tabular-nums; }
.imp-relogio .numeros small { color: var(--sub); font-size: 11.5px; }

/* escolha do tipo de relógio (cartões de opção) */
.imp-opcoes { display: grid; gap: 8px; }
.imp-opcao { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: #fff; }
.imp-opcao:hover { border-color: var(--borda-forte); }
.imp-opcao.ativo { border-color: var(--primaria); background: var(--primaria-clara); box-shadow: 0 0 0 1px var(--primaria) inset; }
.imp-opcao .imp-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f1f5f9; color: var(--sub); flex: none; }
.imp-opcao.ativo .imp-icone { background: var(--primaria); color: #fff; }
.imp-opcao span { display: grid; gap: 2px; }
.imp-opcao small { color: var(--sub); font-size: 12.5px; }

/* busca de funcionário na gaveta de vincular */
.imp-escolha { display: grid; gap: 4px; max-height: 46vh; overflow: auto; margin-top: 4px; }
.imp-escolha button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: none; }
.imp-escolha button:hover { background: #f8fafc; }
.imp-escolha button.selecionado { background: var(--primaria-clara); border-color: var(--primaria-borda); }
.imp-escolha .ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #f1f5f9; color: var(--sub); flex: none; }
.imp-escolha button.selecionado .ini { background: var(--primaria); color: #fff; }
.imp-escolha .nome-sub { display: grid; min-width: 0; }
.imp-escolha .nome-sub small { color: var(--sub); font-size: 12px; }
.imp-id { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 600px) {
    .imp-arquivo > .botao { width: 100%; justify-content: center; }
    .imp-arquivo .chip { white-space: normal; }
    .imp-passos { gap: 6px; }
    .imp-passos .seta { display: none; }
    .imp-soltar { padding: 40px 16px; }
    .cartao-topo:has(.imp-aviso), .imp-cartao-topo { flex-wrap: wrap; }
    .secao-titulo { flex-wrap: wrap; }
    .imp-desconhecido { grid-template-columns: auto 1fr; }
    .imp-desconhecido > .chip { grid-column: 2; justify-self: start; }
}
/* ================================================================ CADASTROS A (empresas, funcionários, usuários, atividades) */
.ca-grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ca-cartao { display: grid; gap: 10px; text-align: left; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 16px 18px; transition: border-color .15s, transform .1s, box-shadow .15s; color: var(--texto); width: 100%; }
button.ca-cartao:hover, .ca-cartao.clicavel:hover { border-color: var(--primaria-borda); transform: translateY(-1px); }
.ca-cartao.inativa { opacity: .7; }
.ca-cartao-cab { display: flex; gap: 12px; align-items: flex-start; }
.ca-cartao-cab > div { display: grid; min-width: 0; flex: 1; }
.ca-cartao-cab strong { font-family: var(--titulo); font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-cartao-cab small { color: var(--sub); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-selo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; border: 1px solid var(--primaria-borda); }
.ca-selo.roxo { background: var(--roxo-fundo); color: var(--roxo); border-color: #ddd6fe; }
.ca-cartao-pe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--sub); }
.ca-cartao-pe .icone { color: var(--sub-2); }
.ca-dado { display: inline-flex; align-items: center; gap: 5px; }

/* escolhas em cartão (tipo de documento, papel) */
.ca-escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ca-escolha { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 13px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: var(--branco); }
.ca-escolha:hover { border-color: var(--primaria-borda); }
.ca-escolha.ativa { border-color: var(--primaria); background: var(--primaria-clara); box-shadow: 0 0 0 3px rgba(13, 148, 136, .12); }
.ca-escolha > div { display: grid; gap: 2px; }
.ca-escolha strong { font-size: 13.5px; }
.ca-escolha small { color: var(--sub); font-size: 12.5px; line-height: 1.4; }
.ca-escolha .icone { color: var(--primaria-esc); margin-top: 1px; }

/* lista de funcionários */
.ca-pessoa { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ca-pessoa > div { display: grid; min-width: 0; }
.ca-pessoa strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-pessoa small { color: var(--sub); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.ca-cinza { background: linear-gradient(135deg, #94a3b8, #64748b); }
.ca-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.ca-barra select { padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: #fff; font: inherit; min-height: 38px; max-width: 220px; }
.ca-barra .busca { flex: 1 1 240px; }
@media (max-width: 700px) { .ca-esconde-movel { display: none; } .ca-barra select { max-width: none; flex: 1 1 140px; } }

/* linha do tempo da escala */
.ca-tempo { display: grid; gap: 0; position: relative; }
.ca-tempo-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.ca-tempo-item::before { content: ''; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--borda); }
.ca-tempo-item:last-child::before { display: none; }
.ca-tempo-ponto { width: 14px; height: 14px; border-radius: 50%; margin: 4px 0 0 4px; background: #cbd5e1; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda-forte); }
.ca-tempo-item.atual .ca-tempo-ponto { background: var(--primaria); box-shadow: 0 0 0 1px var(--primaria), 0 0 0 5px rgba(13, 148, 136, .14); }
.ca-tempo-item.futura .ca-tempo-ponto { background: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.ca-tempo-corpo { display: grid; gap: 2px; }
.ca-tempo-corpo strong { font-weight: 600; }
.ca-tempo-corpo small { color: var(--sub); font-size: 12.5px; }

/* prévia da semana */
.ca-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ca-dia { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 6px; display: grid; gap: 3px; text-align: center; background: #fff; min-width: 0; }
.ca-dia b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--sub); }
.ca-dia span { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-dia span.ca-dia-nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; min-height: 2.6em; }
.ca-dia small { font-size: 11px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-dia.folga { background: #f8fafc; }
.ca-dia.folga span { color: var(--sub); font-weight: 500; }
.ca-dia.dsr { background: var(--azul-fundo); border-color: var(--azul-borda); }
.ca-dia.dsr span { color: var(--azul); }
@media (max-width: 600px) { .ca-semana { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* caixa com destaque (senha gerada, mudança de escala) */
.ca-caixa { border: 1px solid var(--borda); background: #fbfcfe; border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 12px; }
.ca-senha { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--primaria-borda); background: var(--primaria-clara); }
.ca-senha code { flex: 1; font: 700 20px/1.2 var(--mono); letter-spacing: .06em; color: var(--primaria-esc); word-break: break-all; }

/* regras da senha */
.ca-regras { display: grid; gap: 6px; font-size: 13px; }
.ca-regras div { display: flex; gap: 8px; align-items: center; color: var(--sub); }
.ca-regras div.ok { color: var(--verde); }

/* seletor de funcionário */
.ca-seletor { position: relative; }
.ca-seletor-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta);
    max-height: 300px; overflow: auto; padding: 5px; animation: sobe .12s ease-out; }
.ca-seletor-lista button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 8px; background: none; }
.ca-seletor-lista button:hover, .ca-seletor-lista button.sel { background: var(--primaria-clara); }
.ca-seletor-lista .avatar { width: 28px; height: 28px; font-size: 11px; }
.ca-seletor-lista .vazio-p { padding: 10px; color: var(--sub); font-size: 13px; }
.ca-seletor-escolhido { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: #fff; min-height: 40px; }
.ca-seletor-escolhido .avatar { width: 28px; height: 28px; font-size: 11px; }

/* registro de atividades */
.ca-atividades { display: grid; }
.ca-dia-titulo { padding: 10px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sub); background: #f8fafc; border-bottom: 1px solid var(--borda); }
.ca-atividade { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #eef1f5; align-items: start; }
.ca-atividade .avatar { width: 32px; height: 32px; font-size: 12px; }
.ca-atividade-texto { display: grid; gap: 3px; min-width: 0; }
.ca-atividade-texto > span { line-height: 1.45; overflow-wrap: anywhere; }
.ca-atividade-texto small { color: var(--sub); font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca-detalhe { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--borda); font-size: 12.5px; }
.ca-detalhe dt { color: var(--sub); }
.ca-detalhe dd { margin: 0; word-break: break-word; }
.ca-paginas { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 20px; flex-wrap: wrap; }
/* janela de confirmação aberta de dentro de uma gaveta: fica por cima dela */
.ca-sobre { position: relative; z-index: 60; }
/* listas no celular: a tabela rola dentro do cartão em vez de alargar a página */
.ca-lista { min-width: 0; }
.ca-so-movel { display: none !important; }
@media (max-width: 700px) { .ca-so-movel { display: block !important; } .tabela .ca-pessoa strong { white-space: normal; } }

/* ================================================================ central em cartões (redesenho 18/10) */
.situacao { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(15,23,42,.04); animation: sobe .35s ease both; }
.situacao-anel { --p: 0; --cor: var(--ambar); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cor) calc(var(--p) * 1%), #eef1f5 0); position: relative; }
.situacao-anel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.situacao-anel span { position: relative; font-weight: 800; font-size: 15px; color: var(--texto); }
.situacao.ok .situacao-anel { --cor: #10b981; }
.situacao-texto { display: grid; gap: 3px; }
.situacao-texto strong { font-size: 17px; font-family: var(--titulo); }
.situacao-texto span { color: var(--sub); font-size: 14px; }
.situacao.ok .situacao-texto strong { color: #047857; }
.situacao-numeros { display: flex; gap: 6px; }
.situacao-numeros div { display: grid; gap: 1px; min-width: 92px; padding: 8px 12px; border-radius: 12px; background: #f8fafc; text-align: center; }
.situacao-numeros b { font-size: 18px; font-variant-numeric: tabular-nums; }
.situacao-numeros small { font-size: 11.5px; color: var(--sub); }
.situacao-numeros .erro { background: #fef2f2; } .situacao-numeros .erro b { color: #b91c1c; }
.situacao-numeros .atencao { background: var(--ambar-fundo); } .situacao-numeros .atencao b { color: var(--ambar); }
.central-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 14px; }

.func-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.func-cartao { --cor: #10b981; --fundo-cor: #ecfdf5; position: relative; display: grid; gap: 12px; padding: 16px 16px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); color: inherit; text-decoration: none !important; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s; animation: sobe .4s ease both; animation-delay: var(--atraso, 0ms); }
.func-cartao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor); }
.func-cartao:hover, .func-cartao.sel { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15,23,42,.28); border-color: color-mix(in srgb, var(--cor) 45%, var(--borda)); }
.func-cartao.sel { outline: 2px solid var(--primaria); outline-offset: 2px; }
.func-cartao.erro { --cor: #ef4444; --fundo-cor: #fef2f2; }
.func-cartao.atencao { --cor: #f59e0b; --fundo-cor: var(--ambar-fundo); }
.func-cartao.roxo { --cor: #8b5cf6; --fundo-cor: #f5f3ff; }
.func-cartao.info { --cor: #0ea5e9; --fundo-cor: #f0f9ff; }
.func-cartao.neutro { --cor: #94a3b8; --fundo-cor: #f8fafc; }
.func-cabeca { display: flex; gap: 12px; align-items: center; min-width: 0; }
.func-cabeca .avatar { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--cor) 55%, transparent); }
.func-cabeca .nome-sub { display: grid; min-width: 0; }
.func-cabeca strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.func-cabeca small { color: var(--sub); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.func-situacao { display: flex; gap: 8px; align-items: center; padding: 8px 11px; border-radius: 10px; background: var(--fundo-cor); color: color-mix(in srgb, var(--cor) 75%, #0f172a); font-weight: 600; font-size: 13.5px; }
.func-pe { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--sub); border-top: 1px dashed #eef1f5; padding-top: 10px; }
.func-pe b { color: var(--texto); font-variant-numeric: tabular-nums; margin-left: 2px; }
.func-abrir { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--primaria-esc); font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.func-cartao:hover .func-abrir, .func-cartao.sel .func-abrir { opacity: 1; transform: none; }
.central-legenda { margin-top: 14px; justify-content: flex-end; }
@media (max-width: 900px) {
    .situacao { grid-template-columns: auto 1fr; }
    .situacao-numeros { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); }
    .func-abrir { opacity: 1; transform: none; }
}

/* folha: situação do dia em palavras (redesenho 18/10) */
.situacao-dia { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pilula { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; background: #f1f5f9; color: #475569; }
.pilula.ok { background: var(--verde-fundo); color: var(--verde); }
.pilula.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.pilula.atencao { background: var(--ambar-fundo); color: var(--ambar); }
.pilula.extra { background: #ccfbf1; color: #0f766e; }
.pilula.roxo { background: var(--roxo-fundo); color: var(--roxo); }
.pilula.ajuste { background: #e0f2fe; color: #0369a1; }
.folha tr.problema td { background: #fffafa; }
.folha td.forte { font-weight: 600; }
.sugestao { align-items: flex-start; padding: 12px 14px; }
.sugestao > div { flex: 1 1 calc(100% - 40px) !important; }
.sugestao .botao { margin-left: 0; flex: 1 1 100%; justify-content: center; }
a.situacao { color: inherit; text-decoration: none !important; transition: box-shadow .18s, transform .18s; }
a.situacao:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(15,23,42,.3); }
.situacao-texto small { margin-top: 2px; }
@media (max-width: 700px) {
    .central-filtros > * { flex: 1 1 100%; width: 100% !important; }
    .central-filtros .segmentos { display: flex; }
    .central-filtros .segmentos button { flex: 1; justify-content: center; }
    .central-filtros .busca { margin-left: 0; }
}
.evento-cartao .evento-nome { color: var(--texto); font-weight: 600; font-size: 12.5px; }
.evento-cartao .mono { font-size: 10.5px; color: var(--sub-2); }
.eventos-soma { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ================================================================ Fase 2: pedidos do app (RH) */
.pedidos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.pedido-cartao { --cor: #f59e0b; position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); overflow: hidden; animation: sobe .35s ease both; transition: box-shadow .18s, transform .18s; }
.pedido-cartao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor); }
.pedido-cartao.aprovada { --cor: #10b981; } .pedido-cartao.recusada { --cor: #ef4444; } .pedido-cartao.cancelada { --cor: #cbd5e1; opacity: .8; }
.pedido-cartao.sel { outline: 2px solid var(--primaria); outline-offset: 2px; }
.pedido-cartao:hover { box-shadow: 0 14px 30px -16px rgba(15,23,42,.3); }
.pedido-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pedido-quem .nome-sub { display: grid; min-width: 0; flex: 1; }
.pedido-quem strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pedido-quem small { color: var(--sub); font-size: 12.5px; }
.pedido-data { display: grid; text-align: center; padding: 5px 10px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--borda); line-height: 1.1; }
.pedido-data b { font-family: var(--titulo); font-size: 16px; } .pedido-data small { font-size: 11px; color: var(--sub); }
.pedido-oque { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #f8fafc; }
.pedido-oque strong { display: block; font-size: 14.5px; }
.pedido-oque p { margin: 4px 0 0; color: var(--sub); font-size: 13.5px; line-height: 1.45; }
.pedido-tipo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; }
.pedido-anexos { display: flex; gap: 8px; flex-wrap: wrap; }
.pedido-anexo { width: 88px; height: 88px; border-radius: 12px; border: 1px solid var(--borda); overflow: hidden; display: grid; place-items: center; text-align: center; gap: 2px; color: var(--sub); background: #fff; text-decoration: none !important; }
.pedido-anexo img { width: 100%; height: 100%; object-fit: cover; }
.pedido-anexo small { font-size: 10.5px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pedido-pe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pedido-pe > small:first-child { color: var(--sub); margin-right: auto; }
.pedido-resposta { flex-basis: 100%; color: var(--sub); }
.pedido-dia { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid #bae6fd; background: linear-gradient(180deg, #f0f9ff, #fff); }
.pedido-dia-topo { display: flex; align-items: center; gap: 6px; color: #0369a1; }
.pedido-dia textarea { width: 100%; }
.menu-item .contador { animation: pulsaContador 2s ease-in-out infinite; }
@keyframes pulsaContador { 50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, .25); } }

/* ficha do funcionário: aba App */
.app-acesso { display: grid; gap: 16px; }
.app-acesso-topo { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--primaria-clara), #fff); border: 1px solid var(--primaria-borda); }
.app-acesso-topo strong { display: block; font-size: 15.5px; }
.app-acesso-topo > div > span { color: var(--sub); font-size: 13.5px; }
.app-acesso-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primaria); color: #fff; flex: none; }
.app-acesso-situacao { display: flex; gap: 10px; align-items: center; }
.app-codigo { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px; border-radius: 14px; border: 2px dashed var(--primaria-borda); background: #fff; animation: sobe .3s ease both; }
.app-codigo b { font: 800 38px var(--mono); letter-spacing: .12em; color: var(--marinho); }
.app-codigo span { color: var(--sub); font-size: 13.5px; max-width: 420px; }
.app-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-passos div { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: #f8fafc; font-size: 12.5px; color: var(--sub); }
.app-passos b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--primaria); color: #fff; font-size: 12px; flex: none; }

/* ================================================================ Fase 2: app do funcionário (/app) — celular primeiro */
.pt { min-height: 100dvh; background: var(--fundo); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.pt-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
    background: linear-gradient(160deg, var(--marinho-2), var(--marinho)); color: #fff; }
.pt-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none !important; min-width: 0; }
.pt-marca img { width: 38px; height: 38px; object-fit: contain; }
.pt-marca span { display: grid; min-width: 0; line-height: 1.2; }
.pt-marca strong { font-family: var(--titulo); font-size: 16px; }
.pt-marca small { color: #94a3b8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-weight: 700; text-decoration: none !important; flex: none; }
.pt-avatar.grande { width: 72px; height: 72px; font-size: 26px; }
.pt-conteudo { max-width: 640px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.pt-abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); }
.pt-abas a { display: grid; justify-items: center; gap: 3px; padding: 9px 4px 10px; color: var(--sub); font-size: 11.5px; font-weight: 600; text-decoration: none !important; }
.pt-abas a.ativa { color: var(--primaria-esc); }
.pt-abas a.ativa .icone { transform: translateY(-1px); }
.pt-titulo { font-size: 22px; margin: 2px 0 0; }
.pt-sub { color: var(--sub); font-size: 14px; margin: -6px 0 0; }
.pt-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; animation: sobe .3s ease both; }
.pt-aviso a { font-weight: 700; color: inherit; text-decoration: underline !important; }
.pt-aviso.ok { background: var(--verde-fundo); color: var(--verde); }
.pt-aviso.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.pt-aviso.atencao { background: var(--ambar-fundo); color: #92400e; }
.pt-aviso.info { background: #f0f9ff; color: #0369a1; }
.pt-mes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-mes strong { font-family: var(--titulo); font-size: 19px; }
.pt-seta { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--borda); color: var(--texto); }
.pt-seta.apagada { visibility: hidden; }
.pt-resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pt-resumo div { display: grid; gap: 1px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); }
.pt-resumo div:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, var(--marinho-2), var(--marinho)); color: #fff; border: 0; }
.pt-resumo div:first-child small, .pt-resumo div:first-child span { color: #94a3b8; }
.pt-resumo small { font-size: 12px; color: var(--sub); font-weight: 600; }
.pt-resumo b { font: 800 22px var(--titulo); font-variant-numeric: tabular-nums; }
.pt-resumo div:first-child b { font-size: 30px; }
.pt-resumo span { font-size: 12.5px; }
.pt-resumo .ex b { color: #0f766e; } .pt-resumo .at b { color: var(--ambar); } .pt-resumo .fa b { color: var(--vermelho); }
.pt-dias { display: grid; gap: 8px; }
.pt-dia { background: #fff; border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; }
.pt-dia.problema { border-color: #fecaca; box-shadow: inset 4px 0 0 #ef4444; }
.pt-dia.folga { background: #fafbfd; }
.pt-dia summary { list-style: none; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; padding: 11px 12px; cursor: pointer; }
.pt-dia summary::-webkit-details-marker { display: none; }
.pt-data { display: grid; justify-items: center; line-height: 1.05; grid-row: span 2; }
.pt-data b { font: 800 20px var(--titulo); } .pt-data small { font-size: 11px; color: var(--sub); text-transform: capitalize; }
.pt-data.mini b { font-size: 15px; }
.pt-batidas { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-width: 0; }
.pt-batidas em { color: var(--sub); font-style: normal; font-size: 13px; }
.pt-sit { display: flex; gap: 4px; flex-wrap: wrap; }
.pt-dia-corpo { display: grid; gap: 8px; padding: 0 14px 14px; border-top: 1px dashed #eef1f5; padding-top: 12px; animation: aparece .2s ease; }
.pt-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pt-linha span { color: var(--sub); } .pt-linha b { text-align: right; }
.pt-explica { margin: 0; padding-left: 18px; color: var(--sub); font-size: 13px; line-height: 1.5; }
.pt-botao { width: 100%; justify-content: center; min-height: 44px; }
.pt-legenda { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--sub); font-size: 12px; }
.pt-vazio { text-align: center; color: var(--sub); padding: 24px; }
.pt-vazio.grande { display: grid; gap: 8px; justify-items: center; padding: 40px 20px; background: #fff; border: 1px solid var(--borda); border-radius: 16px; }
.pt-vazio.grande .icone { color: var(--primaria); } .pt-vazio.grande strong { color: var(--texto); font-size: 16px; }
.pt-tipos { display: grid; gap: 10px; }
.pt-tipo { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); color: var(--texto); text-decoration: none !important; transition: transform .15s, box-shadow .15s; animation: sobe .3s ease both; }
.pt-tipo:nth-child(2) { animation-delay: .05s; } .pt-tipo:nth-child(3) { animation-delay: .1s; }
.pt-tipo:active { transform: scale(.98); }
.pt-tipo > span:nth-child(2) { display: grid; flex: 1; }
.pt-tipo strong { font-size: 16px; } .pt-tipo small { color: var(--sub); font-size: 13px; }
.pt-tipo-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; }
.pt-tipo-icone.pequeno { width: 34px; height: 34px; border-radius: 10px; }
.pt-trocar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); color: var(--texto); text-decoration: none !important; }
.pt-trocar small { margin-left: auto; color: var(--primaria-esc); font-weight: 600; }
.pt-form { display: grid; gap: 14px; }
.pt-campo { display: grid; gap: 6px; }
.pt-campo > span { font-weight: 600; font-size: 14px; }
.pt-campo > small, .pt-campo small { color: var(--sub); font-size: 12.5px; }
.pt-campo input, .pt-campo select, .pt-campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--texto); }
.pt-campo textarea { min-height: 90px; resize: vertical; }
.pt-campo input:focus, .pt-campo select:focus, .pt-campo textarea:focus { outline: 0; border-color: var(--primaria); box-shadow: 0 0 0 4px rgba(13,148,136,.14); }
.pt-horas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pt-horas label { display: grid; gap: 4px; }
.pt-foto input[type=file] { padding: 10px; background: #f8fafc; border-style: dashed; }
.pt-ref { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-ref div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f1f5f9; }
.pt-ref small { font-size: 11.5px; color: var(--sub); } .pt-ref b { font-size: 14px; font-variant-numeric: tabular-nums; word-spacing: 4px; }
.pt-pedidos { display: grid; gap: 10px; }
.pt-pedido { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); animation: sobe .3s ease both; }
.pt-pedido header { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.pt-pedido header .pt-data { grid-row: span 2; }
.pt-pedido header strong { font-size: 14.5px; }
.pt-pedido header .pilula { justify-self: start; }
.pt-pedido p { margin: 0; color: var(--sub); font-size: 13.5px; }
.pt-pedido footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pt-pedido footer small { color: var(--sub-2); font-size: 12px; }
.pt-pedido.cancelada { opacity: .65; }
.pt-anexo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--primaria-esc); }
.pt-resposta { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; font-size: 13.5px; }
.pt-resposta small { color: var(--sub); font-size: 11.5px; }
.pt-pedido.recusada .pt-resposta { background: var(--vermelho-fundo); }
.pt-pedido.aprovada .pt-resposta { background: var(--verde-fundo); }
.pt-espelhos { display: grid; gap: 12px; }
.pt-espelho { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); animation: sobe .3s ease both; }
.pt-espelho header { display: flex; gap: 12px; align-items: center; }
.pt-espelho header > span:last-child { display: grid; }
.pt-espelho header strong { font-size: 16px; } .pt-espelho header small { color: var(--sub); font-size: 13px; }
.pt-espelho-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ambar-fundo); color: var(--ambar); flex: none; }
.pt-espelho.assinado .pt-espelho-icone { background: var(--verde-fundo); color: var(--verde); }
.pt-espelho.contestado .pt-espelho-icone { background: var(--vermelho-fundo); color: var(--vermelho); }
.pt-discordo summary { cursor: pointer; color: var(--sub); font-size: 13.5px; text-align: center; padding: 6px; }
.pt-discordo[open] { display: grid; gap: 8px; }
.pt-discordo textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 12px; font: inherit; font-size: 15px; }
.pt-obs { margin: 0; color: var(--sub); font-size: 13.5px; }
.pt-legal { color: var(--sub-2); font-size: 11.5px; text-align: center; }
.pt-perfil { display: grid; justify-items: center; gap: 4px; padding: 12px 0; text-align: center; }
.pt-perfil strong { font-family: var(--titulo); font-size: 19px; margin-top: 6px; } .pt-perfil small { color: var(--sub); }
.pt-bloco { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); }
.pt-bloco h2 { font-size: 16px; margin: 0; }
.pt-opcao { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); color: var(--texto); text-decoration: none !important; }
.pt-opcao > span:nth-child(2) { display: grid; flex: 1; } .pt-opcao small { color: var(--sub); font-size: 12px; }
.pt-opcao.atual { border-color: var(--primaria-borda); background: var(--primaria-clara); }
.pt-sair { width: 100%; justify-content: center; color: var(--vermelho); }
/* login do app (usa o mesmo cartão do login do RH) */
.pt-boas { display: grid; gap: 4px; text-align: center; }
.pt-boas strong { font-family: var(--titulo); font-size: 20px; } .pt-boas span { color: var(--sub); font-size: 14px; }
.pt-primeiro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--primaria-clara); border: 1px solid var(--primaria-borda); color: var(--primaria-esc); text-decoration: none !important; }
.pt-primeiro > span { display: grid; flex: 1; } .pt-primeiro strong { font-size: 13.5px; } .pt-primeiro small { font-size: 12.5px; opacity: .85; }
.pt-codigo { letter-spacing: .3em; font-family: var(--mono) !important; }
@media (min-width: 700px) { .pt-resumo { grid-template-columns: repeat(4, 1fr); } .pt-abas { max-width: 640px; margin: 0 auto; border: 1px solid var(--borda); border-radius: 18px 18px 0 0; } }

/* ---------------------------------------------------------------- relógios: coletor (busca automática) */
.coletor-convite { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; margin-bottom: 18px;
    border-radius: var(--raio); border: 1px solid var(--primaria-borda); background: linear-gradient(120deg, var(--primaria-clara), #fff 70%); }
.coletor-convite-texto { display: flex; gap: 14px; align-items: flex-start; }
.coletor-convite-texto strong { display: block; font-size: 15px; margin-bottom: 3px; }
.coletor-convite-texto > div > span { color: var(--sub); font-size: 13.5px; line-height: 1.5; }
.coletor-convite-icone { width: 64px; height: 64px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 12px rgba(37, 99, 235, .3)); }
.coletor-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.coletor-passos li { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.coletor-passos b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--primaria-borda); color: var(--primaria-esc); font-size: 12px; flex: none; }
@media (max-width: 900px) { .coletor-convite { grid-template-columns: 1fr; } }

.coletores { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 18px; }
.coletor-cartao { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--raio);
    background: var(--branco); border: 1px solid var(--borda); box-shadow: var(--sombra); border-left: 4px solid #cbd5e1; }
.coletor-cartao.online { border-left-color: var(--verde); }
.coletor-cartao.offline { border-left-color: var(--vermelho); }
.coletor-cartao.pendente { border-left-color: var(--ambar); }
.coletor-icone { width: 44px; height: 44px; object-fit: contain; flex: none; filter: grayscale(.85); opacity: .6; }
.coletor-cartao.online .coletor-icone { filter: none; opacity: 1; }
.instalar-coletor-img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.coletor-info { display: grid; min-width: 0; }
.coletor-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coletor-info small, .coletor-sit small { color: var(--sub); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coletor-sit { display: grid; justify-items: end; gap: 3px; }
.coletor-acoes { display: flex; gap: 6px; align-items: center; }
.ponto-vivo { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 2px; animation: pulsaVivo 1.8s ease-in-out infinite; }
@keyframes pulsaVivo { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); } }
.ponto-aba { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); display: inline-block; margin-left: 4px; }

.relogio-busca { display: grid; gap: 4px; justify-items: start; }
.relogio-erro { color: var(--vermelho); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.relogio-estado { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--borda); background: #f8fafc; display: grid; gap: 8px; }
.relogio-estado.ok { border-color: var(--verde-borda); background: var(--verde-fundo); }
.relogio-estado.erro { border-color: var(--vermelho-borda); background: var(--vermelho-fundo); }
.relogio-estado-topo { display: flex; gap: 8px; align-items: center; }
.relogio-estado.ok .relogio-estado-topo { color: var(--verde); }
.relogio-estado.erro .relogio-estado-topo { color: var(--vermelho); }
.relogio-estado-topo small { margin-left: auto; color: var(--sub); }
.relogio-estado p { margin: 0; font-size: 13px; line-height: 1.5; }
.relogio-estado dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.relogio-estado dt { font-size: 11.5px; color: var(--sub); }
.relogio-estado dd { margin: 0; font-weight: 600; font-size: 13.5px; }
.txt-atencao { color: var(--ambar); } .txt-erro { color: var(--vermelho); }

.instalar-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.instalar-passos li { display: flex; gap: 12px; }
.instalar-passos li > b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primaria); color: #fff; font-size: 13px; flex: none; }
.instalar-passos li > div { display: grid; gap: 5px; justify-items: start; }
.instalar-passos span { color: var(--sub); font-size: 13px; line-height: 1.5; }
.instalar-codigo { font: 700 34px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 6px; padding: 10px 18px; border-radius: 12px;
    background: #0b1324; color: #5eead4; box-shadow: inset 0 0 0 1px rgba(94,234,212,.25); }
.giro-pequeno { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--borda); border-top-color: var(--primaria); display: inline-block; vertical-align: -2px; margin-right: 6px; animation: giraPequeno .8s linear infinite; }
@keyframes giraPequeno { to { transform: rotate(360deg); } }

/* painel do relógio: conversa dos dois lados (funcionários, digitais, configuração) */
.pilula.info { background: var(--azul-fundo); color: var(--azul); }
.txt-ok { color: var(--verde); }
.rp-situacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rp-sit-item { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0; }
.rp-sit-item > div { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.rp-sit-item small { color: var(--sub); font-size: 12px; }
.rp-sit-item strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rp-sit-img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.rp-sit-img.apagado { filter: grayscale(.85); opacity: .6; }
.rp-sit-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primaria-clara); color: var(--primaria-esc); flex: none; }
.rp-esperando { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--raio); background: var(--azul-fundo); border: 1px solid var(--azul-borda); color: var(--texto); margin-bottom: 12px; }
.rp-esperando.parado { background: var(--ambar-fundo); border-color: var(--ambar-borda); color: var(--texto); }
.rp-esperando.parado .icone { color: var(--ambar); }
.rp-esperando > div { display: grid; gap: 2px; }
.rp-esperando span { color: var(--sub); font-size: 13px; }
.rp-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rp-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-filtro { border: 1px solid var(--borda); background: var(--branco); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--sub); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.rp-filtro b { color: var(--texto); }
.rp-filtro.ativo { border-color: var(--primaria); background: var(--primaria-clara); color: var(--primaria-esc); }
.rp-filtro.s-novo b { color: var(--azul); } .rp-filtro.s-demitido b { color: var(--vermelho); } .rp-filtro.s-falta b, .rp-filtro.s-diferente b { color: var(--ambar); } .rp-filtro.s-ok b { color: var(--verde); }
.rp-lista { display: grid; gap: 8px; }
.rp-pessoa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--branco); border: 1px solid var(--borda); border-left: 4px solid var(--borda-forte); border-radius: var(--raio-p); }
.rp-pessoa.s-novo { border-left-color: var(--azul); } .rp-pessoa.s-demitido { border-left-color: var(--vermelho); }
.rp-pessoa.s-falta, .rp-pessoa.s-diferente { border-left-color: var(--ambar); } .rp-pessoa.s-ok { border-left-color: var(--verde); }
.rp-pessoa-info { display: grid; gap: 2px; min-width: 0; }
.rp-pessoa-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-pessoa-info small { font-size: 12px; color: var(--sub); }
.rp-pessoa-marcas { display: flex; gap: 6px; }
.rp-pessoa-marcas .chip { display: inline-flex; gap: 4px; align-items: center; }
.rp-pessoa-acoes { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 150px; }
.rp-dica { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--raio); background: var(--primaria-clara); border: 1px solid var(--primaria-borda); }
.rp-dica .icone { color: var(--primaria-esc); flex: none; margin-top: 2px; }
.rp-dica > div { display: grid; gap: 3px; } .rp-dica span { color: var(--sub); font-size: 13px; line-height: 1.5; }
.rp-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rp-cartao { display: grid; gap: 10px; align-content: start; justify-items: start; padding: 16px 18px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.rp-cartao header { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.rp-cartao header .icone { color: var(--primaria); }
.rp-cartao p { margin: 0; }
.rp-cartao small { font-size: 12.5px; line-height: 1.5; }
.rp-cartao .grade-2, .rp-cartao .chave { width: 100%; }
.rp-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; width: 100%; }
.rp-dl dt { font-size: 12px; color: var(--sub); } .rp-dl dd { margin: 2px 0 0; font-size: 13.5px; }
.rp-pedidos { display: grid; gap: 8px; }
.rp-pedido { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.rp-pedido > .pilula { flex: none; min-width: 92px; justify-content: center; }
.rp-pedido > div { display: grid; gap: 2px; } .rp-pedido small { font-size: 12px; color: var(--sub); }
@media (max-width: 900px) {
    .rp-situacao, .rp-config { grid-template-columns: 1fr; }
    .rp-pessoa { grid-template-columns: 1fr auto; }
    .rp-pessoa-marcas { order: 3; } .rp-pessoa-acoes { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; }
}
.rp-atalho { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--raio); border: 1px solid var(--primaria-borda); background: var(--primaria-clara); color: var(--texto); text-decoration: none !important; }
.rp-atalho:hover { border-color: var(--primaria); }
.rp-atalho > span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .rp-atalho small { color: var(--sub); font-size: 12.5px; }