/* =====================================================================
   Tá Limpo! - componentes do layout v2 (mobile primeiro)
   Mesma paleta do sistema (pg.php / w3hwr.css). Prefixo tl- para nao
   colidir com as classes do W3.CSS. Modelo aprovado: pasta v2 em docs/layouts
   ===================================================================== */
/* Tema escuro (padrao) e claro (modelo aprovado: docs/layouts/v8-2026-10-09). O tema vem do atributo
   data-tema="claro" no <html> (config/pwa.php). Use sempre as variaveis: nenhuma cor fixa nos componentes. */
:root {
	--tl-fundo: #06182C;
	--tl-cartao: #0D2F4F;
	--tl-cartao-2: #12385d;
	--tl-linha: rgba(255,255,255,.08);
	--tl-texto: #CCCCCC;
	--tl-forte: #FFFFFF;
	--tl-suave: #8fa3b8;
	--tl-ciano: #00D4FF;
	--tl-ambar: #F6A803;
	--tl-indigo: #3f51b5;
	--tl-azul: #1E6DB5;
	--tl-laranja: #ff9800;
	--tl-azul-st: #2196F3;
	--tl-verde: #4CAF50;
	--tl-vermelho: #f44336;
	--tl-cinza: #9e9e9e;
	--tl-teal: #009688;
	--tl-txt-perigo: #ff8a80;
	--tl-txt-ok: #7fd483;
	--tl-txt-info: #6cb8ff;
	--tl-txt-laranja: #ffb547;
	--tl-txt-alerta: #ffcf6b;
	--tl-txt-instrucao: #ffd27a;
	--tl-txt-destaque: #7fe6ff;
	--tl-txt-neutro: #cfcfcf;
	--tl-txt-suave-destaque: #b9c9db;
	--tl-borda-campo: #23476b;
	--tl-flutuante: #0f2a47;
	--tl-grad-destaque: #13467a;
	--tl-grad-kpi: #0f3d64;
	--tl-rodape: rgba(6,24,44,.96);
	--tl-sobre: rgba(255,255,255,.06);
	--tl-sombra: none;
	--tl-menu: #0D2F4F;
}
html { color-scheme: dark; }
html[data-tema="claro"] {
	--tl-fundo: #EEF3F8;
	--tl-cartao: #FFFFFF;
	--tl-cartao-2: #E6EEF6;
	--tl-linha: rgba(13,47,79,.12);
	--tl-texto: #3A4D61;
	--tl-forte: #0D2F4F;
	--tl-suave: #647A90;
	--tl-ciano: #0A7FB0;
	--tl-ambar: #A86400;
	--tl-indigo: #3f51b5;
	--tl-azul: #1E6DB5;
	--tl-laranja: #E07B00;
	--tl-azul-st: #1E88E5;
	--tl-verde: #3E9E48;
	--tl-vermelho: #E53935;
	--tl-cinza: #8C99A6;
	--tl-teal: #00897B;
	--tl-txt-perigo: #C62828;
	--tl-txt-ok: #2E7D32;
	--tl-txt-info: #1565C0;
	--tl-txt-laranja: #B85C00;
	--tl-txt-alerta: #8A5A00;
	--tl-txt-instrucao: #7A5200;
	--tl-txt-destaque: #0A6E96;
	--tl-txt-neutro: #4E5E6E;
	--tl-txt-suave-destaque: #4E6276;
	--tl-borda-campo: #C3D1DF;
	--tl-flutuante: #FFFFFF;
	--tl-grad-destaque: #DCEEFB;
	--tl-grad-kpi: #E0F3FB;
	--tl-rodape: rgba(255,255,255,.96);
	--tl-sobre: rgba(13,47,79,.06);
	--tl-sombra: 0 1px 3px rgba(13,47,79,.10);
	--tl-menu: #FFFFFF;
}
html[data-tema="claro"] { color-scheme: light; }

/* o w3hwr.css nao usa border-box: sem isto, largura 100% + padding passa da borda */
[class*="tl-"], [class*="tl-"] *, [class*="tl-"] *::before, [class*="tl-"] *::after { box-sizing: border-box; }

/* ---------- camadas: topo, menu lateral e fundo escurecido do pg.php ficam sempre acima ----------
   do conteudo (abas fixas, barra do rodape, menus e avisos usam z-index ate 10).
   !important porque o pg.php define o z-index direto no elemento. */
.w3-top     { z-index: 40 !important; }
#mySidebar  { z-index: 39 !important; }
#myOverlay  { z-index: 38 !important; }

/* ---------- casca do sistema no celular: menos espaco desperdicado ---------- */
@media (max-width: 600px) {
	.w3-main > header { padding-top: 4px !important; }
	.w3-main > .w3-container.w3-section { padding-left: 12px; padding-right: 12px; margin-top: 8px; }
}

/* ---------- titulo da pagina ---------- */
.tl-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.tl-titulo h2 { color: var(--tl-ciano); font-size: 21px; margin: 0; font-weight: 600; }
.tl-sub { color: var(--tl-suave); font-size: 13px; }

/* ---------- botoes ---------- */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
	padding: 10px 14px; font-weight: 600; font-size: 15px; cursor: pointer; color: #fff !important; background: var(--tl-azul);
	min-height: 44px; text-decoration: none; font-family: inherit; position: relative; z-index: 2; }
.tl-btn:hover { filter: brightness(1.1); }
.tl-btn.verde { background: var(--tl-verde); }
.tl-btn.vermelho { background: var(--tl-vermelho); }
.tl-btn.indigo { background: var(--tl-indigo); }
.tl-btn.contorno { background: transparent; border: 1px solid var(--tl-linha); color: var(--tl-texto) !important; }
.tl-btn.pequeno { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.tl-btn.bloco { width: 100%; }
.tl-btn.grande { min-height: 56px; font-size: 18px; border-radius: 14px; }
.tl-btn[disabled] { opacity: .75; cursor: default; filter: none; }

/* ---------- abas ---------- */
.tl-abas { position: sticky; top: 43px; z-index: 3; background: var(--tl-fundo); display: flex; gap: 6px;
	padding: 10px 0; border-bottom: 1px solid var(--tl-linha); margin-bottom: 12px; }
.tl-aba { flex: 1; background: var(--tl-cartao); color: var(--tl-texto); border: 1px solid transparent; border-radius: 10px;
	padding: 8px 4px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; font-family: inherit; }
.tl-aba b { display: block; font-size: 18px; color: var(--tl-forte); }
.tl-aba.ativa { border-color: var(--tl-ciano); background: var(--tl-cartao-2); }
.tl-aba.ativa b { color: var(--tl-ciano); }
.tl-painel { display: none; }
.tl-painel.ativo { display: block; }
@media (min-width: 993px) { .tl-abas { max-width: 640px; } }

/* ---------- cabecalho de dia ---------- */
.tl-dia { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 8px; color: var(--tl-ambar);
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tl-dia:first-child { margin-top: 4px; }
.tl-dia small { color: var(--tl-suave); font-weight: 500; text-transform: none; letter-spacing: 0; }
.tl-dia.atrasado { color: var(--tl-vermelho); }

/* cartoes: uma coluna no celular, grade no computador */
.tl-grade { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 993px) { .tl-grade { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }

/* ---------- cartao de servico ---------- */
.tl-cartao { background: var(--tl-cartao); border-radius: 14px; padding: 12px; display: flex; gap: 12px;
	border-left: 4px solid var(--tl-cinza); position: relative; }
.tl-cartao:hover { background: var(--tl-cartao-2); }
.tl-cartao.st-agendado   { border-left-color: var(--tl-laranja); }
.tl-cartao.st-andamento  { border-left-color: var(--tl-azul-st); }
.tl-cartao.st-concluido  { border-left-color: var(--tl-verde); }
.tl-cartao.st-cancelado  { border-left-color: var(--tl-vermelho); opacity: .85; }
.tl-cartao.st-disponivel { border-left-color: var(--tl-cinza); }
/* o cartao inteiro abre o servico (o link do nome se estende sobre o cartao) */
.tl-cartao a.tl-abre { color: var(--tl-forte); text-decoration: none; }
.tl-cartao a.tl-abre::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }

.tl-hora { flex: 0 0 58px; text-align: center; border-right: 1px solid var(--tl-linha); padding-right: 10px; }
.tl-hora .ini { display: block; font-size: 19px; font-weight: 700; color: var(--tl-forte); line-height: 1.1; }
.tl-hora .fim { display: block; font-size: 13px; color: var(--tl-suave); }
.tl-hora .dur { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--tl-suave); background: var(--tl-sobre); border-radius: 6px; padding: 1px 6px; }

.tl-info { flex: 1; min-width: 0; }
.tl-info .cliente { color: var(--tl-forte); font-weight: 600; font-size: 15px; margin: 0; }
.tl-info .local { font-size: 13px; color: var(--tl-suave); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tl-acoes { display: flex; gap: 8px; margin-top: 10px; }
.tl-valor { text-align: right; flex: 0 0 auto; }
.tl-valor b { display: block; color: var(--tl-forte); font-size: 15px; }
.tl-valor small { color: var(--tl-suave); font-size: 12px; }
.tl-real { font-size: 12px; color: var(--tl-suave); margin-top: 4px; }
.tl-real .fora { color: var(--tl-txt-perigo); }

/* ---------- etiquetas ---------- */
.tl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; line-height: 1.6; }
.tl-chip.agendado   { background: rgba(255,152,0,.16);   color: var(--tl-txt-laranja); }
.tl-chip.andamento  { background: rgba(33,150,243,.18);  color: var(--tl-txt-info); }
.tl-chip.concluido  { background: rgba(76,175,80,.18);   color: var(--tl-txt-ok); }
.tl-chip.cancelado  { background: rgba(244,67,54,.18);   color: var(--tl-txt-perigo); }
.tl-chip.disponivel { background: rgba(158,158,158,.18); color: var(--tl-txt-neutro); }
.tl-chip.alerta     { background: rgba(244,67,54,.18);   color: var(--tl-txt-perigo); }
.tl-chip.neutro     { background: var(--tl-sobre); color: var(--tl-texto); font-weight: 500; }
.tl-pessoa { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tl-texto); }
.tl-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--tl-azul); color: #fff; font-size: 11px; font-weight: 700;
	display: inline-grid; place-items: center; flex: 0 0 auto; }
.tl-avatar.g { width: 38px; height: 38px; font-size: 14px; }

/* ---------- vazio ---------- */
.tl-vazio { background: var(--tl-cartao); border-radius: 14px; padding: 22px 14px; text-align: center; color: var(--tl-suave); }
.tl-vazio i { display: block; font-size: 26px; margin-bottom: 6px; opacity: .6; }

/* ---------- filtro ---------- */
.tl-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; align-items: center; }
.tl-filtro select, .tl-filtro input[type=date] { flex: 1; min-width: 140px; background: var(--tl-cartao); color: var(--tl-texto);
	border: 1px solid var(--tl-linha); border-radius: 10px; padding: 10px; font: inherit; font-size: 14px; color-scheme: dark; }

/* ---------- navegador de data ---------- */
.tl-nav-data { display: flex; align-items: center; gap: 8px; background: var(--tl-cartao); border-radius: 14px; padding: 6px; margin-bottom: 12px; }
.tl-nav-data a.seta { background: var(--tl-cartao-2); color: var(--tl-forte); width: 44px; height: 44px; border-radius: 10px;
	display: grid; place-items: center; font-size: 18px; text-decoration: none; flex: 0 0 auto; }
.tl-nav-data .data { flex: 1; text-align: center; position: relative; }
.tl-nav-data .data b { display: block; color: var(--tl-forte); font-size: 16px; }
.tl-nav-data .data small { color: var(--tl-suave); font-size: 12px; }
.tl-nav-data .data input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.tl-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tl-resumo div { background: var(--tl-cartao); border-radius: 12px; padding: 10px 6px; text-align: center; }
.tl-resumo b { display: block; color: var(--tl-ciano); font-size: 20px; }
.tl-resumo small { color: var(--tl-suave); font-size: 12px; }
@media (min-width: 993px) { .tl-nav-data, .tl-resumo { max-width: 640px; } }

/* ---------- prestador (bloco que abre e fecha) ---------- */
.tl-prest { background: var(--tl-cartao); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.tl-prest > summary { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; }
.tl-prest > summary::-webkit-details-marker { display: none; }
.tl-prest .nome { flex: 1; min-width: 0; }
.tl-prest .nome b { display: block; color: var(--tl-forte); }
.tl-prest .nome small { color: var(--tl-suave); font-size: 13px; }
.tl-prest .seta { color: var(--tl-suave); transition: transform .2s; }
.tl-prest[open] .seta { transform: rotate(180deg); }
.tl-barra-st { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; background: var(--tl-sobre); }
.tl-barra-st i { display: block; }
.tl-prest-corpo { padding: 0 12px 6px; border-top: 1px solid var(--tl-linha); }
.tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tl-linha); position: relative; }
.tl-item:last-child { border-bottom: 0; }
.tl-item .tl-hora { flex-basis: 52px; }
.tl-item a.tl-abre { color: var(--tl-forte); text-decoration: none; }
.tl-item a.tl-abre::after { content: ''; position: absolute; inset: 0; }

/* ---------- prestador: em andamento ---------- */
.tl-saudacao { margin: 2px 0 14px; }
.tl-saudacao h2 { color: var(--tl-ciano); font-size: 21px; margin: 0; font-weight: 600; }
.tl-destaque { background: linear-gradient(160deg, var(--tl-grad-destaque), var(--tl-cartao)); border: 1px solid var(--tl-azul-st); border-radius: 16px; padding: 14px; margin-bottom: 8px; }
.tl-destaque .rotulo { color: var(--tl-txt-info); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tl-cronometro { font-size: 40px; font-weight: 700; color: var(--tl-forte); line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.tl-destaque .cliente { color: var(--tl-forte); font-weight: 600; margin: 0; }
.tl-destaque .local { color: var(--tl-txt-suave-destaque); font-size: 13px; margin: 2px 0 12px; }
.tl-linha-feito { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--tl-linha); font-size: 14px; }
.tl-linha-feito b { color: var(--tl-forte); font-weight: 600; }
.tl-linha-feito span { color: var(--tl-suave); white-space: nowrap; }
@media (min-width: 993px) { .tl-destaque { max-width: 640px; } }

/* ---------- pagina do servico (prestador) ---------- */
.tl-voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--tl-suave) !important; font-size: 14px; margin-bottom: 10px; text-decoration: none; }
.tl-cab-servico { background: var(--tl-cartao); border-radius: 16px; padding: 16px; text-align: center; margin-bottom: 12px; }
.tl-cab-servico .quando { color: var(--tl-suave); font-size: 14px; margin-top: 8px; }
.tl-cab-servico .intervalo { color: var(--tl-forte); font-size: 30px; font-weight: 700; line-height: 1.15; }
.tl-bloco { background: var(--tl-cartao); border-radius: 14px; padding: 4px 14px; margin-bottom: 12px; }
.tl-campo { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tl-linha); }
.tl-campo:last-child { border-bottom: 0; }
.tl-campo .ic { width: 22px; color: var(--tl-ciano); text-align: center; padding-top: 2px; }
.tl-campo .rot { font-size: 12px; color: var(--tl-suave); text-transform: uppercase; letter-spacing: .04em; }
.tl-campo .val { color: var(--tl-forte); }
.tl-campo .val small { display: block; color: var(--tl-texto); font-size: 14px; }
.tl-instrucao { background: rgba(246,168,3,.12); border: 1px solid rgba(246,168,3,.35); color: var(--tl-txt-instrucao); border-radius: 12px;
	padding: 10px 12px; font-size: 14px; margin-bottom: 12px; display: flex; gap: 10px; }
.tl-aviso { background: var(--tl-cartao); border-left: 4px solid var(--tl-azul-st); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
@media (min-width: 993px) { .tl-servico { max-width: 640px; } }

/* barra fixa no rodape (botao de check-in/out) */
.tl-rodape-acao { position: fixed; left: 0; right: 0; bottom: 0; background: var(--tl-rodape); border-top: 1px solid var(--tl-linha);
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
.tl-rodape-acao .dica { text-align: center; font-size: 12px; color: var(--tl-suave); margin-top: 6px; }
.tl-espaco-rodape { height: 110px; }
@media (min-width: 993px) { .tl-rodape-acao { left: 300px; } .tl-rodape-acao > * { max-width: 640px; margin-left: auto; margin-right: auto; } }

/* aviso em janela inferior (no lugar do confirm) */
.tl-veu { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 45; }   /* acima do topo e do menu (38-40) */
.tl-veu.aberto { display: block; }
.tl-folha { position: absolute; left: 0; right: 0; bottom: 0; background: var(--tl-flutuante); border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
.tl-folha h3 { margin: 0 0 6px; color: var(--tl-txt-laranja); font-size: 18px; }
.tl-folha p { margin: 0 0 10px; font-size: 15px; color: var(--tl-texto); }
.tl-folha .tl-acoes { flex-direction: column; margin-top: 14px; }
@media (min-width: 993px) { .tl-folha { left: 50%; right: auto; width: 460px; transform: translateX(-50%); bottom: 40px; border-radius: 20px; } }

/* dados de pagamento do prestador com botao de copiar (Pagamentos) */
.tl-conta .meio small.tl-dados-pag { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-dados-pag span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-copiar { flex: 0 0 auto; background: rgba(0,212,255,.14); color: var(--tl-ciano); border: 1px solid rgba(0,212,255,.35); border-radius: 8px;
	padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; line-height: 1.4; }
.tl-copiar:hover { background: rgba(0,212,255,.25); }
.tl-copiar.copiado { background: rgba(76,175,80,.25); color: var(--tl-txt-ok); border-color: rgba(76,175,80,.5); }

/* observacao do servico em destaque (prestador: acima do botao de check-out) */
.tl-obs-servico { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: rgba(0,212,255,.10); border: 1px solid rgba(0,212,255,.35);
	color: var(--tl-forte); border-radius: 12px; padding: 10px 12px; margin: 10px 0 12px; font-size: 15px; }
.tl-obs-servico i { color: var(--tl-ciano); margin-top: 3px; }
.tl-obs-servico b { display: block; font-size: 11px; color: var(--tl-ciano); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }

/* resumo para enviar (recebimentos / pagamentos): texto pronto + copiar + WhatsApp */
.tl-folha .sub-folha { font-size: 13px; color: var(--tl-suave); margin: -2px 0 10px; }
.tl-folha textarea.tl-texto-resumo { width: 100%; height: 42vh; max-height: 360px; resize: none; background: var(--tl-fundo); color: var(--tl-forte);
	border: 1px solid var(--tl-linha); border-radius: 12px; padding: 12px; font: 14px/1.5 inherit; font-family: inherit; white-space: pre-wrap; }
.tl-folha .botoes-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tl-folha .botoes-resumo .fechar { grid-column: 1 / -1; }
.tl-btn.whatsapp { background: #25D366; }
.tl-btn.copiado { background: var(--tl-verde); }

/* =====================================================================
   COMPONENTES DAS DEMAIS TELAS (modelo v4): busca, listas, fichas, formularios
   ===================================================================== */
.tl-busca { display: flex; gap: 8px; margin-bottom: 10px; }
.tl-busca .campo-busca { flex: 1; position: relative; }
.tl-busca .campo-busca i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tl-suave); }
.tl-busca input, .tl-busca select { width: 100%; background: var(--tl-cartao); color: var(--tl-forte); border: 1px solid var(--tl-linha);
	border-radius: 12px; padding: 12px 12px 12px 36px; font: inherit; font-size: 15px; min-height: 46px; }
.tl-busca select { padding-left: 10px; width: auto; flex: 0 0 auto; color: var(--tl-texto); font-size: 14px; }
.tl-contagem { color: var(--tl-suave); font-size: 13px; margin: 0 2px 8px; }

/* lista de registros (clientes, prestadores) */
.tl-lista { background: var(--tl-cartao); border-radius: 14px; overflow: hidden; }
.tl-linha { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--tl-linha); position: relative; }
.tl-linha:last-child { border-bottom: 0; }
.tl-linha:hover { background: var(--tl-cartao-2); }
.tl-linha .meio { flex: 1; min-width: 0; }
.tl-linha .meio b { display: block; color: var(--tl-forte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-linha .meio small { display: block; color: var(--tl-suave); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-linha .fim { text-align: right; color: var(--tl-suave); font-size: 13px; flex: 0 0 auto; }
.tl-linha a.tl-abre { color: inherit; text-decoration: none; }
.tl-linha a.tl-abre::after { content: ''; position: absolute; inset: 0; }
.tl-linha .seta { color: var(--tl-suave); }
.tl-mais { text-align: center; margin-top: 10px; }

/* cabecalho de registro (cliente, prestador) */
.tl-ficha { background: var(--tl-cartao); border-radius: 16px; padding: 16px; margin-bottom: 12px; text-align: center; }
.tl-ficha .tl-avatar.gg { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 8px; display: grid; }
.tl-ficha h3 { color: var(--tl-forte); font-size: 20px; margin: 0; font-weight: 600; }
.tl-ficha .doc { color: var(--tl-suave); font-size: 14px; margin-top: 2px; }
.tl-ficha .tl-chips { justify-content: center; }
.tl-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.tl-atalhos a { background: var(--tl-cartao-2); border-radius: 12px; padding: 10px 4px; color: var(--tl-texto); text-decoration: none; font-size: 12px; }
.tl-atalhos a i { display: block; font-size: 20px; color: var(--tl-ciano); margin-bottom: 4px; }
.tl-atalhos a.off { opacity: .35; pointer-events: none; }

.tl-secao { color: var(--tl-ambar); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 18px 2px 8px;
	display: flex; justify-content: space-between; align-items: center; }
.tl-secao a { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* numeros em destaque */
.tl-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tl-numeros div { background: var(--tl-cartao); border-radius: 12px; padding: 10px 6px; text-align: center; }
.tl-numeros b { display: block; color: var(--tl-ciano); font-size: 18px; }
.tl-numeros small { color: var(--tl-suave); font-size: 12px; }

/* local de servico */
.tl-local { background: var(--tl-cartao); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.tl-local .topo-local { display: flex; justify-content: space-between; gap: 8px; }
.tl-local b { color: var(--tl-forte); }
.tl-local small { display: block; color: var(--tl-suave); font-size: 13px; }

/* barra de acoes da pagina: principal + menu de outras acoes */
.tl-barra-acoes { display: flex; gap: 8px; margin-bottom: 12px; }
.tl-barra-acoes .tl-btn { flex: 1; }
.tl-menu-acoes { position: relative; }
.tl-menu-acoes > summary { list-style: none; }
.tl-menu-acoes > summary::-webkit-details-marker { display: none; }
.tl-menu-acoes .itens { position: absolute; right: 0; top: 50px; z-index: 6; background: var(--tl-flutuante); border: 1px solid var(--tl-linha);
	border-radius: 12px; min-width: 220px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.tl-menu-acoes .itens a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; color: var(--tl-texto); text-decoration: none; border-bottom: 1px solid var(--tl-linha); }
.tl-menu-acoes .itens a:last-child { border-bottom: 0; }
.tl-menu-acoes .itens a.perigo { color: var(--tl-txt-perigo); }

/* formularios */
.tl-form .grupo { background: var(--tl-cartao); border-radius: 14px; padding: 12px 14px 4px; margin-bottom: 12px; }
.tl-form .grupo h4 { color: var(--tl-ambar) !important; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 10px; }
.tl-form label { display: block; font-size: 13px; color: var(--tl-suave); margin-bottom: 4px; }
.tl-form label .obr { color: var(--tl-ambar); }
.tl-form .campo { margin-bottom: 12px; }
.tl-form input, .tl-form select, .tl-form textarea { width: 100%; background: var(--tl-fundo); color: var(--tl-forte); border: 1px solid var(--tl-borda-campo);
	border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 16px; min-height: 46px; color-scheme: dark; }
.tl-form input:focus, .tl-form select:focus, .tl-form textarea:focus { outline: none; border-color: var(--tl-ciano); }
.tl-form .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-form .tres { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
/* itens de grade podem encolher (senao campos de data/hora passam da largura no celular) */
.tl-form .duas > *, .tl-form .tres > * { min-width: 0; }
/* hora : minutos (selects separados, minutos de 15 em 15) */
.tl-horamin { display: flex; align-items: center; gap: 4px; }
.tl-horamin select { flex: 1; min-width: 0; padding-left: 8px; padding-right: 4px; text-align: center; }
.tl-horamin span { color: var(--tl-suave); font-weight: bold; }
/* rotulo numa coluna, hora : minutos na outra, na mesma linha */
.tl-form .tl-linha-hora { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
.tl-form .tl-linha-hora label { margin: 0; }
.tl-form .ajuda { font-size: 12px; color: var(--tl-suave); margin-top: 4px; }
.tl-form .ok { color: var(--tl-txt-ok); font-size: 12px; margin-top: 4px; }
.tl-form .erro { color: var(--tl-txt-perigo); font-size: 12px; margin-top: 4px; }
.tl-form input.valido { border-color: var(--tl-verde); }
.tl-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 12px; }
.tl-interruptor span b { display: block; color: var(--tl-forte); font-weight: 600; }
.tl-interruptor span small { color: var(--tl-suave); font-size: 12px; }
.tl-interruptor input { width: 48px; height: 28px; min-height: 0; appearance: none; -webkit-appearance: none; background: var(--tl-borda-campo); border-radius: 999px; position: relative; cursor: pointer; border: 0; padding: 0; flex: 0 0 auto; }
.tl-interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.tl-interruptor input:checked { background: var(--tl-verde); }
.tl-interruptor input:checked::after { left: 23px; }

/* escolha de prestador (distribuir) */
.tl-opcao { display: flex; align-items: center; gap: 12px; background: var(--tl-cartao); border: 2px solid transparent; border-radius: 14px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.tl-opcao input { display: none; }
.tl-opcao.marcada { border-color: var(--tl-ciano); background: var(--tl-cartao-2); }
.tl-opcao .meio { flex: 1; min-width: 0; }
.tl-opcao .meio b { display: block; color: var(--tl-forte); }
.tl-opcao .meio small { color: var(--tl-suave); font-size: 13px; }
.tl-opcao .valor-h { color: var(--tl-forte); font-weight: 600; white-space: nowrap; }

/* menu de acoes: itens que sao formularios (POST) com o mesmo visual dos links */
.tl-menu-acoes .itens form { margin: 0; }
.tl-menu-acoes .itens button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; background: none; border: 0;
	border-bottom: 1px solid var(--tl-linha); color: var(--tl-texto); font: inherit; text-align: left; cursor: pointer; }
.tl-menu-acoes .itens button.perigo { color: var(--tl-txt-perigo); }
.tl-menu-acoes .itens a:hover, .tl-menu-acoes .itens button:hover { background: var(--tl-cartao-2); }
.tl-form .grupo .tl-pessoa { margin-bottom: 8px; }
.tl-form .msg-cp { font-size: 12px; margin-top: 4px; color: var(--tl-suave); }
@media (min-width: 993px) {
	.tl-ficha, .tl-barra-acoes, .tl-numeros, .tl-form, .tl-local-lista, .tl-detalhe { max-width: 640px; }
	.tl-lista, .tl-busca { max-width: 760px; }
}

/* =====================================================================
   Componentes do layout v6 (financeiro): visao geral, recebimentos,
   pagamentos e valores do servico. Modelo aprovado: docs/layouts/v6-*
   ===================================================================== */
/* indicadores (visao geral): 2 colunas no celular, 4 no computador */
.tl-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (min-width: 993px) { .tl-kpis { grid-template-columns: repeat(4, 1fr); } }
.tl-kpi { background: var(--tl-cartao); border-radius: 14px; padding: 12px; position: relative; }
.tl-kpi .rot { font-size: 12px; color: var(--tl-suave); text-transform: uppercase; letter-spacing: .04em; }
.tl-kpi b { display: block; color: var(--tl-forte); font-size: 21px; margin-top: 2px; white-space: nowrap; }
.tl-kpi small { display: block; font-size: 12px; color: var(--tl-suave); margin-top: 2px; }
.tl-kpi .sobe { color: var(--tl-txt-ok); }
.tl-kpi .desce { color: var(--tl-txt-perigo); }
.tl-kpi.destaque { background: linear-gradient(135deg, var(--tl-grad-kpi), var(--tl-cartao)); border: 1px solid rgba(0,212,255,.25); }
.tl-kpi.destaque b { color: var(--tl-ciano); }
.tl-kpi.largo { grid-column: 1 / -1; }
.tl-kpi a.tl-abre { color: inherit; text-decoration: none; }
.tl-kpi a.tl-abre::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }

/* contagem do dia por situacao */
.tl-hoje { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.tl-hoje div { background: var(--tl-cartao); border-radius: 12px; padding: 8px 4px; text-align: center; border-top: 3px solid var(--tl-cinza); }
.tl-hoje b { display: block; font-size: 20px; color: var(--tl-forte); }
.tl-hoje small { font-size: 11px; color: var(--tl-suave); }
.tl-hoje .agendado  { border-top-color: var(--tl-laranja); }
.tl-hoje .andamento { border-top-color: var(--tl-azul-st); }
.tl-hoje .concluido { border-top-color: var(--tl-verde); }
.tl-hoje .disponivel { border-top-color: var(--tl-cinza); }

/* barra empilhada: quanto do faturamento e custo e quanto e margem */
.tl-margem { margin-top: 10px; }
.tl-margem .barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--tl-sobre); }
.tl-margem .custo { background: var(--tl-ambar); }
.tl-margem .lucro { background: var(--tl-verde); }
.tl-margem .legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--tl-suave); margin-top: 4px; gap: 8px; flex-wrap: wrap; }
.tl-margem .legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }

/* grafico de colunas (6 meses) feito so com CSS */
.tl-grafico { background: var(--tl-cartao); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.tl-grafico .colunas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 150px; align-items: end; border-bottom: 1px solid var(--tl-linha); }
.tl-grafico .mes { display: flex; gap: 3px; align-items: end; justify-content: center; height: 100%; position: relative; }
.tl-grafico .mes span { width: 40%; max-width: 18px; border-radius: 4px 4px 0 0; }
.tl-grafico .fat { background: var(--tl-ciano); }
.tl-grafico .cus { background: var(--tl-ambar); }
.tl-grafico .mes.parcial span { opacity: .55; }
.tl-grafico .rotulos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--tl-suave); margin-top: 4px; }
.tl-grafico .legenda { display: flex; gap: 14px; font-size: 12px; color: var(--tl-suave); margin-bottom: 10px; flex-wrap: wrap; }
.tl-grafico .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* lista de alertas */
.tl-alertas { background: var(--tl-cartao); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.tl-alerta { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--tl-linha); position: relative; }
.tl-alerta:last-child { border-bottom: 0; }
.tl-alerta .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; font-size: 16px; }
.tl-alerta .ic.vermelho { background: rgba(244,67,54,.18); color: var(--tl-txt-perigo); }
.tl-alerta .ic.ambar    { background: rgba(246,168,3,.16); color: var(--tl-txt-alerta); }
.tl-alerta .ic.azul     { background: rgba(33,150,243,.18); color: var(--tl-txt-info); }
.tl-alerta .meio { flex: 1; min-width: 0; }
.tl-alerta .meio b { display: block; color: var(--tl-forte); font-weight: 600; font-size: 14px; }
.tl-alerta .meio small { display: block; color: var(--tl-suave); font-size: 12px; }
.tl-alerta .seta { color: var(--tl-suave); }
.tl-alerta a.tl-abre { color: inherit; text-decoration: none; }
.tl-alerta a.tl-abre::after { content: ''; position: absolute; inset: 0; }

/* ranking com barra proporcional */
.tl-ranking { background: var(--tl-cartao); border-radius: 14px; padding: 4px 12px; margin-bottom: 12px; }
.tl-ranking .item { padding: 10px 0; border-bottom: 1px solid var(--tl-linha); }
.tl-ranking .item:last-child { border-bottom: 0; }
.tl-ranking .topo { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.tl-ranking .topo span { color: var(--tl-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ranking .topo b { color: var(--tl-forte); white-space: nowrap; }
.tl-ranking .topo small { color: var(--tl-suave); font-weight: 400; }
.tl-ranking .barra { height: 6px; border-radius: 999px; background: var(--tl-sobre); margin-top: 6px; overflow: hidden; }
.tl-ranking .barra i { display: block; height: 100%; border-radius: 999px; background: var(--tl-ciano); }
.tl-ranking.horas .barra i { background: var(--tl-azul-st); }

/* duas colunas no computador (visao geral) */
.tl-colunas { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 993px) { .tl-colunas { grid-template-columns: 1fr 1fr; } }

/* recebimentos / pagamentos: um cartao por cliente ou prestador */
.tl-conta { background: var(--tl-cartao); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.tl-conta > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; }
.tl-conta > summary::-webkit-details-marker { display: none; }
.tl-conta .meio { flex: 1; min-width: 0; }
.tl-conta .meio b { display: block; color: var(--tl-forte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-conta .meio small { display: block; color: var(--tl-suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-conta .total { text-align: right; flex: 0 0 auto; }
.tl-conta .total b { display: block; color: var(--tl-forte); font-size: 16px; }
.tl-conta .total small { font-size: 12px; color: var(--tl-suave); }
.tl-conta .total small.atraso { color: var(--tl-txt-perigo); }
.tl-conta[open] > summary { border-bottom: 1px solid var(--tl-linha); background: var(--tl-cartao-2); }
.tl-conta .itens-conta { padding: 0 12px; }
.tl-conta .rodape-conta { display: flex; gap: 8px; padding: 10px 12px 12px; flex-wrap: wrap; }
.tl-conta .rodape-conta .tl-btn { flex: 1; }

/* item marcavel (servico dentro da conta) */
.tl-marca { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--tl-linha); cursor: pointer; }
.tl-marca:last-child { border-bottom: 0; }
.tl-marca input { width: 22px; height: 22px; accent-color: var(--tl-verde); flex: 0 0 auto; margin: 0; }
.tl-marca .meio { flex: 1; min-width: 0; font-size: 14px; }
.tl-marca .meio b { color: var(--tl-forte); font-weight: 600; }
.tl-marca .meio small { display: block; color: var(--tl-suave); font-size: 12px; }
.tl-marca .meio small.atraso { color: var(--tl-txt-perigo); }
.tl-marca .v { text-align: right; color: var(--tl-forte); font-weight: 600; white-space: nowrap; font-size: 14px; }
.tl-marca .v small { display: block; color: var(--tl-suave); font-weight: 400; font-size: 12px; }

/* resumo de valores do servico: cobrado x pago x margem */
.tl-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tl-valores div { background: var(--tl-cartao); border-radius: 12px; padding: 10px 8px; text-align: center; }
.tl-valores .rot { font-size: 11px; color: var(--tl-suave); text-transform: uppercase; letter-spacing: .04em; }
.tl-valores b { display: block; font-size: 17px; color: var(--tl-forte); margin: 2px 0; }
.tl-valores small { display: block; font-size: 11px; color: var(--tl-suave); }
.tl-valores .cobrado b { color: var(--tl-ciano); }
.tl-valores .margem b { color: var(--tl-txt-ok); }
.tl-valores .margem.negativa b { color: var(--tl-txt-perigo); }
.tl-chip.recebido { background: rgba(0,212,255,.14); color: var(--tl-txt-destaque); }
.tl-chip.pagar    { background: rgba(246,168,3,.16); color: var(--tl-txt-alerta); }

/* aviso visivel so para a empresa */
.tl-privado { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tl-suave); }
.tl-desfazer { background: none; border: 0; padding: 0; color: var(--tl-ciano); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.tl-marca .meio a { color: var(--tl-forte); text-decoration: none; }

/* filtro de periodo (recebimentos / pagamentos): De | Ate | Filtrar */
.tl-periodo { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.tl-periodo label { font-size: 12px; color: var(--tl-suave); min-width: 0; }
.tl-periodo input { display: block; width: 100%; margin-top: 3px; background: var(--tl-cartao); color: var(--tl-forte); border: 1px solid var(--tl-linha);
	border-radius: 10px; padding: 8px; font: inherit; font-size: 15px; min-height: 40px; color-scheme: dark; }
.tl-periodo .tl-btn { min-height: 40px; }
.tl-btn.desligado { opacity: .45; pointer-events: none; }

/* tabela informativa (relatorios): rola na horizontal dentro do cartao no celular */
.tl-tabela { background: var(--tl-cartao); border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tl-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.tl-tabela th, .tl-tabela td { padding: 10px 10px; text-align: right; border-bottom: 1px solid var(--tl-linha); }
.tl-tabela th:first-child, .tl-tabela td:first-child { text-align: left; position: sticky; left: 0; background: var(--tl-cartao); }
.tl-tabela th { color: var(--tl-ambar); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; cursor: default; }
.tl-tabela td { color: var(--tl-forte); }
.tl-tabela td a { color: var(--tl-ciano); text-decoration: none; }
.tl-tabela td.neg { color: var(--tl-txt-perigo); }
.tl-tabela tbody tr:hover td { background: var(--tl-cartao-2); }
.tl-tabela tfoot td { font-weight: 700; color: var(--tl-ciano); border-bottom: 0; border-top: 2px solid var(--tl-linha); }
.tl-tabela .txt { text-align: left; }

/* contato da ficha: rotulo de cada numero (WhatsApp / Ligacoes) */
.tl-rot-fone { display: inline-block; min-width: 72px; font-size: 12px; color: var(--tl-suave); }

/* ---------- tema claro: cartoes com sombra leve para separar do fundo ---------- */
.tl-cartao, .tl-kpi, .tl-conta, .tl-alertas, .tl-lista, .tl-bloco, .tl-tabela, .tl-ranking, .tl-grafico, .tl-form .grupo,
.tl-hoje > div, .tl-valores > div, .tl-numeros > div, .tl-local, .tl-ficha, .tl-vazio, .tl-servico .tl-cab-servico, .tl-destaque { box-shadow: var(--tl-sombra); }

/* ---------- botao claro/escuro (topo do sistema e login) ---------- */
.tl-bt-tema { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
	color: #fff; font-size: 16px; cursor: pointer; display: inline-grid; place-items: center; padding: 0; vertical-align: middle; }
.tl-bt-tema:hover { background: rgba(255,255,255,.25); }
html:not([data-tema="claro"]) .tl-bt-tema .fa-moon-o, html[data-tema="claro"] .tl-bt-tema .fa-sun-o { display: none; }
.tl-bt-tema.flutuante { position: fixed; top: 12px; right: 12px; z-index: 50; background: var(--tl-indigo); border-color: transparent; }

/* ---------- tela de login (index.php) ---------- */
.tl-login { background: var(--tl-cartao); color: var(--tl-texto); box-shadow: var(--tl-sombra), 0 10px 30px rgba(0,0,0,.25); }
.tl-login label { color: var(--tl-texto); }
.tl-login-acoes { display: flex; align-items: center; gap: 10px; }
.tl-login-acoes .w3-button { flex: 1; border-radius: 8px; padding: 8px 16px; }
.tl-bt-tema.no-login { width: 42px; height: 42px; flex: 0 0 42px; background: var(--tl-indigo); border-color: transparent; font-size: 18px; }