@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
input:focus, button:focus, textarea:focus, select:focus { outline: none; }
input, select, textarea, button { font-family: "Montserrat", sans-serif; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-text-size-adjust: 100%; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* BASE */
html, body { min-height: 100%; }
body { font-family: "Montserrat", sans-serif; font-size: 16px; color: #fff; font-weight: 400; background-color: #222531; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* Adiciona classe quando aberto via App Tela Inicial */
body.app-fullscreen { padding-top: env(safe-area-inset-top); }

#tudo { max-width: 480px; padding: 30px; margin: 0 auto; }


/* TELA LOGIN */
.login { display: flex; flex-direction: column; gap: 40px; }
.login .logo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.login .logo .imagem { width: 200px; height: 200px; padding: 25px; border: 6px solid #323645; border-radius: 50%; background: #222531; box-shadow: 0 4px 32px rgba(0,0,0,0.2); }
.login .logo .imagem img { height: 100%; width: auto; }
.login .logo h1 { font-size: 24px; }
.login .logo h1 span { font-weight: 400; }

.login .info { color: #00EAE4; text-align: center; }
.login .info span { font-weight: 700; }

.login form { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.login form input { width: 100%; height: 50px; border-radius: 25px; border: 0; padding: 0 20px; color: #fff; background: #323645; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition:.2s; }
.login form input:focus { filter: brightness(1.1) }
.login form input::placeholder { color: #fff; opacity: 1; }

.login form .nao-digitavel { opacity: .5; cursor:not-allowed; }

.btn-login { width: 100%; height: 50px; padding: 0 20px; font-size: 14px; background: #00EAE4;	color: #222531; font-weight: 600; border:none; border-radius: 25px;	cursor:pointer; transition:.2s; }
.btn-login:hover { filter: brightness(1.1) }

.erro-retorno { width: 100%; padding: 20px; border-radius: 8px; font-weight: 600; text-align: center; color: #222531; background: #FF6384; }
.erro-cpf, .erro-data { display: none; color: #FF6384; font-size: 14px; }
.campo-extra-form { position: absolute; left: -9999px; }

/* HEADER */
header { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding: 0 0 30px 0; margin-bottom: 30px; border-bottom: 4px solid #323645; }
header .foto-user { display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; overflow: hidden; border: 2px solid #323645; border-radius: 50%; }
header .foto-user img { width: 100%; height: 100%; object-fit: cover; }
header .foto-user [data-lucide] { width: 50px; height: 50px; stroke-width: 1; color: #fff; }
header .info h2 { font-size: 18px; }
header .info h2 span { font-weight: 400; }
header .info p { font-size: 14px; color: #00EAE4; }

header .info .hora-atual { display: flex; gap: 5px; font-size: 16px; font-weight: 500; letter-spacing: 1px; margin-top: 4px; }
header .info .hora-atual [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
header .info .hora-atual span { font-weight: 500; }

.container-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.container-titulo h1.titulo { margin: 0; }
.container-titulo a { font-size: 0; }
.container-titulo a [data-lucide] { width: 30px; height: 30px; stroke-width: 1; color: #00EAE4; }

.container-dados { display: flex; gap: 15px; align-items: stretch; margin-bottom: 20px; }

.info-dados { flex: 1; padding: 20px; border-radius: 32px; background: #323645; box-shadow: 0 4px 32px rgba(0,0,0,0.2); }
.info-dados h2 { margin-bottom: 5px; font-size: 11px; font-weight: 500; opacity: .50; }
.info-dados p { font-size: 14px; margin-bottom: 5px; }
.info-dados p:last-child { margin-bottom: 0; }

.info-dados p.destaque { color: #00EAE4; }
.info-dados p.azul { color: #00EAE4; }
.info-dados p.vermelho { color: #FF6384; }
.info-dados p.verde { color: #28D180; }
.info-dados p.amarelo { color: #FFCD56; }
.info-dados p span { font-weight: 500; }


h1.titulo { font-size: 24px; margin-bottom: 30px; }
h1.titulo span { font-weight: 400; }

a.titulo { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: #fff; text-decoration: none; margin-bottom: 30px; }
a.titulo h1 { font-size: 24px; }
a.titulo span { font-weight: 400; }

a.titulo span.link-botao { display: flex; align-items: center; gap: 6px; border: 1px solid #00EAE4; border-radius: 16px; padding: 6px 12px; font-size: 14px; background: #222531; }
a.titulo [data-lucide] { width: 20px; height: 20px; stroke-width: 1; color: #fff; }

.menu { display: flex; gap: 8px; justify-content: space-around; flex-wrap: wrap; width: 100%; }
.menu a { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; border-radius: 50%; background: #7D8AB2; box-shadow: 0 2px 16px rgba(0,0,0,0.2); }
.menu a.ativo { background: #9966FF; }
.menu a [data-lucide] { width: 60%; height: auto; stroke-width: 1.5; }
.menu a .contador { position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; color: #fff; background: #FF3A2F; border-radius: 10px; padding: 0 5px; font-weight: 600; font-size: 12px; }

/* CARD CLIENTE INFO */
.card-cliente { display: flex; gap: 20px; color: #fff; text-decoration: none; padding: 20px; border-radius: 32px; border: 1px solid #323645; background: #323645; box-shadow: 0 4px 32px rgba(0,0,0,0.2); transition:.2s; }
.card-cliente .foto-cliente { display: flex; justify-content: center; align-items: center; width: 80px; min-width: 80px; height: 80px; overflow: hidden; border-radius: 50%; background: #222531; }
.card-cliente .foto-cliente img { width: 100%; height: 100%; object-fit: cover; }
.card-cliente .foto-cliente [data-lucide] { width: 50px; height: 50px; stroke-width: 1; color: #fff; }

.card-cliente .dados { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; font-size: 14px; }
.card-cliente .dados h3 { font-weight: 600; font-size: 18px; }

.cliente-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; font-size: 14px; padding: 20px; border-radius: 32px; margin-top: 20px; border: 1px solid #323645; background: #2A2E3D; color: #fff; }


/* LISTA PROFISSIONAIS */
.lista-cards { display: flex; flex-direction: column; gap: 30px; }
.card { display: flex; gap: 20px; color: #fff; text-decoration: none; padding: 20px; border-radius: 32px; border: 1px solid #323645; background: #323645; box-shadow: 0 4px 32px rgba(0,0,0,0.2); transition:.2s; }
.card:hover { filter: brightness(1.1); border-color: #00EAE4; }
.card .foto-card { width: 80px; min-width: 80px; height: 80px; overflow: hidden; border-radius: 50%; }
.card .foto-card img { width: 100%; height: 100%; object-fit: cover; }

.card .dados { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.card .dados h3 { font-weight: 600; font-size: 16px; }
.card .dados h3 span { font-weight: 400; }

.card .dados .status { font-size: 14px; color: #22B573; font-weight: 600; }
.card .dados .status.amarelo { color: #FFCD56; }
.card .dados .status.vermelho { color: #FF6384; }

.card .dados .instrucao { font-size: 14px; color: #7D8AB2; }
.card .dados .botao { display: block; padding: 8px 16px; margin-top: 10px; font-size: 14px; font-weight: 600; color: #222531; border-radius: 16px; background: #00EAE4; }


/* Foto de perfil circular estilo app moderno */
.foto-perfil { display: flex; justify-content: center; }

.preview-foto {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 6px dashed #43485B;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #43485B;
	cursor: pointer;
	overflow: hidden;
	background-color: #1B1D26;
	transition: all 0.3s ease;
	margin-bottom: 20px;
}

.preview-foto [data-lucide] { width: 80px; height: 80px; stroke-width: 1; }

.preview-foto:hover {
	border-color: #00EAE4;
	color: #00EAE4;
}

.preview-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* crop automático */
}

/* ========================== */
/* TIMELINE - AGENDA CLIENTE  */
/* ========================== */

.timeline { display:flex; flex-direction:column; gap:20px; }

.slot { display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; padding:16px; border-radius:16px; border:1px solid #323645; background:#2A2E3D; font-size:14px; color:#fff; }

.slot .horario { z-index: 1; }
.slot .info { flex:1; margin-left:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }

.slot.livre { border-color:#00EAE4; }
.slot.atendendo { position: relative; overflow: hidden; border-color:#F7931E; font-weight: 500; }
.slot.reservado { border-color:#FFCD56; }
.slot.finalizado { border-color:#999; opacity:0.7; }
.slot.bloqueado { border-color:#FF6384; color:#FF6384; }
.slot.almoco { border-color:#FF6384; color:#FF6384; }
.slot.fechado { border-color:#FF6384; color:#fff; }

.slot.livre-dinamico { border: 1px dashed #00EAE4; background: rgba(0,234,228,0.05); }
.slot.atendimento-agora { border: 1px dashed #28D180; background: rgba(40,209,128,0.05); }

.slot.atendendo .progresso { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: rgba(247,147,30,0.2); transition: all 1s linear;	z-index: 0; }

.slot .acoes { display: flex; gap: 8px; z-index: 1; }
.slot .acoes a { font-size: 0; }
.slot .acoes a [data-lucide] { width: 28px; height: 28px; stroke-width: 1; }
.slot .acoes a.iniciar [data-lucide] { color: #FFCD56; }
.slot .acoes a.excluir [data-lucide] { color: #FF6384; }
.slot .acoes a.editar-almoco [data-lucide] { color: #FF6384; }
.slot .acoes a.agendar [data-lucide] { color: #00EAE4; }
.slot .acoes a.editar [data-lucide] { color: #FFF; }
.slot .acoes a.finalizar [data-lucide] { color: #F7931E; }
.slot .acoes a.atendimento-imediato [data-lucide] { color: #28D180; }

.slot .acoes button.finalizar { display: flex; border: 0; background: none; padding: 0; cursor: pointer; }
.slot .acoes button.finalizar [data-lucide] { width: 28px; height: 28px; stroke-width: 1; color: #F7931E; }

.form-timeline select { width: 100%; margin-bottom: 20px; padding: 16px; border-radius: 16px; font-size: 14px; border: 0; color: #fff; background: #43485B; }
.form-timeline .botoes { display: flex; justify-content: space-between; align-items: flex-end; }

.form-timeline button { border: none; padding: 8px 16px; border-radius: 16px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all .2s; }
.form-timeline button.iniciar-atendimento { background: #FFCD56; color: #222531; }
.form-timeline button.atender-agora { background: #28D180; color: #fff; }
.form-timeline button.salvar-horario { background: #FF6384; color: #fff; }
.form-timeline button:hover { filter:brightness(1.1); }

.form-timeline a { display: flex; align-items: flex-end; }
.form-timeline a [data-lucide] { width: 28px; height: 28px; stroke-width: 1; color: #717B99; }

.slot .detalhes { flex-basis: 100%; max-height: 0; overflow: hidden; transition: all 0.3s ease; }
.slot .detalhes .hora-inicio-fim { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.slot .detalhes .hora-inicio-fim input { padding: 8px 16px; border-radius: 16px; font-size: 14px; border: 0; color: #fff; background: #43485B; }

/* Icone input tipo time */
.slot .detalhes .hora-inicio-fim input[type="time"]::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1); opacity: 1; }


.slot.aberto .detalhes { padding: 20px 0 5px 0;	max-height: 500px;	opacity: 1; }
.slot.aberto { background: #323645; }

.slot .detalhes-resumo { width: 100%; z-index: 1; }
.slot .detalhes-resumo select { width: 100%; margin: 10px 0 20px 0; padding-bottom: 8px; font-size: 14px; border: 0; border-bottom: 1px dashed #F7931E; color: #F7931E; background: none; 	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F7931E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 18px; }


.slot .detalhes-resumo button.finalizar { display: flex; gap: 10px; border: 0; font-size: 14px; font-weight: 500; color: #fff; background: #F7931E; padding: 8px 16px; border-radius: 16px; cursor: pointer; transition: all .2s; }
.slot .detalhes-resumo button:hover { filter:brightness(1.1); }
.slot .detalhes-resumo button.finalizar [data-lucide] { width: 16px; height: 16px; stroke-width: 2; color: #fff; }



/* Botão Agendar */
.btn-agendar { font-size:14px; padding:8px 16px; border:none; border-radius:16px; font-weight:600; background:#00EAE4; color:#222531; cursor:pointer; text-decoration: none; transition:.2s; }
.btn-agendar:hover { filter:brightness(1.1); }

.btn-cancelar {
	font-size:14px; padding:8px 16px; border:none; border-radius:16px;
	font-weight:600; background:#FF6384; color:#fff;
	cursor:pointer; text-decoration:none; transition:.2s;
}
.btn-cancelar:hover { filter:brightness(1.1); }


/* Card do barbeiro no topo */
.card.barbeiro { margin-bottom:30px; background:#323645; border-radius:32px; border:1px solid #323645; padding:20px; display:flex; gap:20px; align-items:center; }
.card.barbeiro .foto-card { width:80px; height:80px; border-radius:50%; overflow:hidden; }
.card.barbeiro img { width:100%; height:100%; object-fit:cover; }
.card.barbeiro .dados h3 { font-size:16px; }
.card.barbeiro .dados .status { font-weight:600; font-size:14px; }

.retorno { color:#222531; text-align:center; padding:16px; border-radius:16px; font-weight:500; margin-bottom:20px; }
.retorno.sucesso { background:#00EAE4; }
.retorno.erro { background:#FF6384; }

.aviso-geral { display: flex; gap: 12px; align-items: center; color:#222531; padding:16px; border-radius:16px; font-size: 14px; font-weight:500; text-decoration: none; margin:20px 0; background: #FFCD56; }
.aviso-geral [data-lucide] { width: 64px; height: 64px; stroke-width: 1.5; }

.aviso-agendamento { padding:16px; border-radius:16px; border:1px solid #FFCD56; background:#2A2E3D; text-align:center; color:#FFCD56; margin-bottom:20px; font-size:14px; }

/* Form Geral */
.info-gerais { color: #00EAE4; margin-bottom: 20px; line-height: 1.5; }
.info-gerais span { font-weight: 700; }

.form-geral {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 32px;
    background: #323645;
    box-shadow: 0 4px 32px rgba(0,0,0,0.2);

    /* ESSENCIAIS PARA A ANIMAÇÃO */
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}

.form-geral.oculto {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
	padding: 0;
}

.form-geral.aberto {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 20px;
	padding: 20px;
}



.form-geral input, .form-geral select { width: 100%; height: 50px; border-radius: 25px; border: 1px solid #7D8AB2; padding: 0 20px; font-size: 16px; color: #fff; background: #323645; transition:.3s; }
.form-geral input:focus, .form-geral select:focus { border-color: #00EAE4; filter: brightness(1.1); }
.form-geral input::placeholder { color: #fff; opacity: .75; }

.form-geral input[type="time"]::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1); opacity: 1; }

.form-geral button { width: 100%; height: 50px; padding: 0 20px; font-size: 14px; background: #00EAE4;	color: #222531; font-weight: 600; border:none; border-radius: 25px;	cursor:pointer; transition:.2s; }
.form-geral button:hover { filter: brightness(1.1) }


/* Lista Funcões Básicas */
.lista-geral { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.lista-geral .linha { display:flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid #323645; background: #2A2E3D; font-size: 14px; color:#fff; }
.lista-geral .linha.destaque { border: 1px dashed #606A7F; box-shadow: 0 2px 16px rgba(0,0,0,0.2); }
.lista-geral .complemento { font-size: 12px; }
.lista-geral .complemento.dia2 { color: #9966FF; }
.lista-geral .complemento.dia3 { color: #3BB2F4; }
.lista-geral .complemento.dia4 { color: #28D180; }
.lista-geral .complemento.dia5 { color: #FFCD56; }
.lista-geral .complemento.dia6 { color: #FF6384; }

.lista-geral .complemento.verde { color: #28D180; }
.lista-geral .complemento.amarelo { color: #FFCD56; }
.lista-geral .complemento.vermelho { color: #FF6384; }

.lista-geral .acoes { display: flex; align-items: center; gap: 8px; margin-left: 30px; }
.lista-geral .acoes a { font-size: 0; }
.lista-geral .acoes a [data-lucide] { width: 24px; height: 24px; stroke-width: 1; }
.lista-geral .acoes a.editar [data-lucide] { color: #FFCD56; }
.lista-geral .acoes a.excluir [data-lucide] { color: #FF6384; }
.lista-geral .acoes a.info [data-lucide] { color: #92A2CC; }

.lista-geral .complemento2 { font-size: 12px; opacity: .75; }
.lista-geral .status { display: flex; align-items: center; gap: 8px; margin-left: 30px; }
.lista-geral .status [data-lucide] { width: 24px; height: 24px; stroke-width: 1.5; }
.lista-geral .status.verde { color: #28D180; }
.lista-geral .status.amarelo { color: #FFCD56; }

.lista-geral h3 { font-size: 20px; color: #00EAE4; margin: 0; }
.lista-geral h3 span { font-weight: 400; }

/* SCORE - LISTA CLIENTES */
.lista-score { display:flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.lista-score .linha { display:flex; flex-wrap: wrap; gap: 0 15px; justify-content: flex-start; align-items: center; padding: 16px; border-radius: 32px; border: 1px solid #323645; background: #2A2E3D; font-size: 14px; color:#fff; }
.lista-score .score { display: flex; justify-content: center; align-items: center; min-width: 48px; min-height: 48px; border-radius: 50%; font-size: 18px; font-weight: 600; }
.lista-score .dados { font-weight: 600; flex: 1; }
.lista-score .dados .info { font-size: 12px; font-weight: 400; opacity: .75; }
.lista-score .dados .info span { font-weight: 600; }

.lista-score .prova-score { flex-basis: 100%; font-size: 12px; font-weight: 600; color: #fff; }
.lista-score .prova-score p { margin-top: 5px; }
.lista-score .prova-score span { font-weight: 400; opacity: .75; }
.lista-score .prova-score a { color: #00EAE4; text-decoration: underline; margin-top: 2px; }


/* Prova do score escondida por padrão */
.prova-score {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .35s ease, opacity .3s ease;
	margin-top: 0;
}

/* Quando a linha estiver aberta */
.linha.aberta .prova-score {
	max-height: 500px; /* suficiente para caber o conteúdo */
	opacity: 1;
	margin-top: 15px;
}

.cor-verde { color: #28D180; }
.cor-vermelho { color: #FF6384; }
.bg-vermelho { background: #FF6384; }
.cor-laranja { color: #FF9F40; }
.bg-laranja { background: #FF9F40; }
.cor-amarelo { color: #FFCD56; }
.bg-amarelo { background: #E8B54F; }
.cor-azul { color: #3BB2F4; }
.bg-azul { background: #3BB2F4; }
.cor-destaque { color: #00EAE4; }
.bg-destaque { background: #00EAE4; }


/* RESUMO DO DIA */
.resumo-dia { display: flex; flex-direction: column; margin-top: 30px; }

.resumo-dia h3 { grid-column: 1 / -1; margin-bottom: 10px; font-size: 16px; font-weight: 600; }
.resumo-dia h4 { font-size: 20px; color: #FFCD56; margin-bottom: 10px; }
.resumo-dia h4 span { font-weight: 400; }

.indicadores { padding: 30px; border-radius: 32px; margin-bottom: 20px; background: #323645; box-shadow: 0 4px 32px rgba(0,0,0,0.2); }
.indicadores p { font-size: 14px; line-height: 2; }
.indicadores p.destaque { color: #00EAE4; }
.indicadores p.azul { color: #00EAE4; }
.indicadores p.vermelho { color: #FF6384; }
.indicadores p.verde { color: #28D180; }
.indicadores p.amarelo { color: #FFCD56; }
.indicadores p span { opacity: 1; }


.servicos { padding: 30px; border-radius: 32px; margin-bottom: 30px; border: 1px solid #323645; background: #2A2E3D; font-size: 14px; color: #fff; display: grid; grid-template-columns: max-content 1fr; row-gap: 6px; }
.servicos > div { display: contents; }
.servicos .nome-servico { grid-column: 1; padding-right: 30px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.servicos .dados-servico { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.atendimentos-hoje { margin-bottom: 20px; }
.linha-atendimento { display: flex; padding: 10px 0; border-bottom: 1px solid #3a3f4f; color: #fff; font-size: 14px; }
.linha-atendimento .coluna { display: flex; flex-direction: column; width: 33.33%; padding-right: 10px; }
.linha-atendimento .coluna span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-atendimento .coluna.hora { }
.linha-atendimento .destaque { color: #00EAE4; }

.titulo-resumo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.titulo-resumo h2 { font-size: 24px; color: #00EAE4; margin: 0; display: flex; align-items: baseline; }
.titulo-resumo h2 span { font-weight: 400; }

.form-resumo-select select {
	max-width: 150px;
	color: #fff;
	border: 1px solid #00EAE4;
	border-radius: 16px;
	padding: 6px 12px;
	font-size: 14px;
	outline: none;
	background: #222531;
}


/* FILTROS PAINEL */
.filtros-painel { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }

/* garante que todos inputs/select/botão tenham o mesmo tamanho */
.filtros-painel > * { flex: 1; min-width: 150px; }

.filtros-painel input, .filtros-painel select { height: 50px; border-radius: 25px; border: 1px solid #7D8AB2; padding: 0 16px; font-size: 14px; color: #fff; background: #323645; transition:.3s; }
.filtros-painel input:focus, .filtros-painel select:focus { border-color: #00EAE4; filter: brightness(1.1); }
.filtros-painel input::placeholder { color: #fff; opacity: .75; }
.filtros-painel input[type="date"]::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1); opacity: 1; }

.filtros-painel button { height: 50px; padding: 0 20px; font-size: 14px; background: #00EAE4;	color: #222531; font-weight: 600; border:none; border-radius: 25px;	cursor:pointer; transition:.2s; text-transform: uppercase; }
.filtros-painel button:hover { filter: brightness(1.1) }

h4.painel { font-size: 20px; color: #FFCD56; margin-bottom: 10px; }
h4.painel span { font-weight: 400; }
h5.painel { font-size: 14px; font-weight: 500; color: #28D180; margin-bottom: 5px; }

.painel-bloco-dia { margin-bottom: 20px; }

.grafico-bloco { margin-bottom: 20px; padding: 30px; background: #323645; border-radius: 32px; }

.indicadores h3, .servicos h3, .grafico-bloco h3 { font-size: 16px; margin-bottom: 10px; }

.filtros-link { list-style: none; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.filtros-link a { display: flex; align-items: center; color: #00EAE4; text-decoration: none; }
.filtros-link a.ativo { color: #FFCD56; }
.filtros-link a [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }


/* ===================== */
/* BARRA DE META DIÁRIA  */
/* ===================== */

.meta-bar-container {
	margin: -20px 0 20px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.meta-info-top {
	text-align: right;
	font-size: 12px;
	color: #7D8AB2;
}

.meta-bar {
	position: relative;
	width: 100%;
	height: 32px;
	background: #323645;
	border-radius: 16px;
	overflow: visible; /* permite a seta "sair" para baixo da barra */
}

.meta-bar-real {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;
	transition: width 1.2s ease;
}


.meta-real-text {
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	opacity: 0;                   /* começa invisível */
	transition: opacity .4s ease; /* fade suave */
}


.meta-marco {
	position: absolute;
	top: 100%;                 /* começa logo abaixo da barra */
	margin-top: 3px;           /* distância da barra */
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;   /* 8px de largura total */
	border-right: 4px solid transparent;
	border-bottom: 5px solid #fff;        /* ponta para CIMA */
	transition: left .6s ease;
	pointer-events: none;
}



.meta-percentuais {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #7D8AB2;
	padding: 0 4px;
}


@media (max-width: 480px) {	}
@media (max-width: 412px) {	#tudo { padding: 20px; } }
@media (max-width: 320px) {	}