/* Estilo Turno (discadora.online). So vale no site publico e nas telas de entrar/criar conta. As cores dos estados do
   operador (livre, tocando, em ligacao, qualificando, em pausa) sao a linguagem visual do site inteiro. */
.estilo-turno {
	--papel: #FAFAF8;
	--branco: #FFFFFF;
	--grafite: #1F2226;
	--tinta: #1F2226;
	--tinta-suave: #5B6068;
	--coral: #D9361F;
	--coral-forte: #B92A15;
	--girassol: #F2B01E;
	--menta: #23876A;
	--cinza: #F0F0EC;
	--nevoa: #F0F0EC;
	--linha: #E1E1DB;
	--acento: #D9361F;
	--acento-forte: #B92A15;
	--sobre-acento: #FFFFFF;
	--acento-claro: #FBE1DC;
	--escuro: #1F2226;
	--sobre-escuro: #FFFFFF;
	--fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
	--fonte-texto: "Instrument Sans", system-ui, sans-serif;
	--raio-botao: 999px;
}
html:has(.estilo-turno) { overflow-x: clip; }
.estilo-turno.site-publico { background: var(--papel); color: var(--grafite); font-family: var(--fonte-texto); font-size: 1.0625rem; overflow-x: clip; }
.estilo-turno h1, .estilo-turno h2, .estilo-turno h3 { font-family: var(--fonte-titulo); letter-spacing: -.03em; }
.estilo-turno :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.dt-largura { width: min(100% - 2rem, 72rem); margin-inline: auto; }

/* botoes */
.dt-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; font: 600 1rem/1 var(--fonte-texto); text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.dt-botao-coral { background: var(--coral); color: #FFFFFF; }
.dt-botao-coral:hover { background: var(--coral-forte); }
.dt-botao-branco { background: #FFFFFF; color: var(--grafite); }
.dt-botao-branco:hover { background: var(--cinza); }
.dt-link { color: var(--grafite); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--coral); }

/* marca e topo */
.dt-marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--grafite); font: 800 1.1875rem/1 var(--fonte-titulo); letter-spacing: -.03em; white-space: nowrap; }
.dt-marca svg { width: 2.125rem; height: 2.125rem; flex: none; }
.dt-marca-fundo { fill: var(--grafite); }
.dt-marca-anel { stroke: var(--papel); }
.dt-marca-ponto { fill: var(--coral); }
.estilo-turno .dt-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem max(1rem, (100% - 72rem) / 2); background: rgb(250 250 248 / .94); border-bottom: 1px solid var(--linha); }
.estilo-turno .dt-menu { display: flex; align-items: center; gap: 1.5rem; }
.estilo-turno .dt-menu a:not(.botao) { color: var(--tinta-suave); font-weight: 500; text-decoration: none; white-space: nowrap; }
.estilo-turno .dt-menu a:not(.botao):hover { color: var(--grafite); }
.estilo-turno .dt-menu .dt-botao { min-height: 2.625rem; }
@media (width < 60rem) {
	.estilo-turno .dt-menu { background: var(--papel); }
	.estilo-turno .dt-menu a:not(.botao) { color: var(--grafite); }
	.estilo-turno .dt-menu .dt-botao { min-height: 3.25rem; }
}

/* hero: a tela do operador */
.dt-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.dt-hero-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dt-hero h1 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem); line-height: .98; font-weight: 800; max-width: 14ch; }
.dt-hero-texto p { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.55; color: var(--tinta-suave); max-width: 40ch; }
.dt-acoes { display: flex; align-items: center; gap: 1.75rem; margin-top: 2.25rem; }
.dt-tela { margin: 0; padding: 1.5rem; border-radius: 22px; background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 24px 48px -32px rgb(31 34 38 / .45); }
.dt-tela-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--linha); }
.dt-tela-campanha { font-size: .9375rem; color: var(--tinta-suave); min-width: 0; }
.dt-situacao { display: grid; flex: none; }
.dt-sit { grid-area: 1 / 1; justify-self: end; padding: .375rem .875rem; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; opacity: 0; }
.dt-sit-livre { background: var(--menta); color: #FFFFFF; }
.dt-sit-tocando { background: var(--girassol); color: var(--grafite); }
.dt-sit-ligacao { background: var(--coral); color: #FFFFFF; }
.dt-sit-qualificando { background: var(--grafite); color: #FFFFFF; opacity: 1; }
.dt-contato { display: flex; align-items: center; gap: .875rem; padding: 1.5rem 0; }
.dt-avatar { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cinza); color: var(--grafite); flex: none; }
.dt-avatar svg { width: 1.5rem; height: 1.5rem; }
.dt-contato b { display: block; font: 800 1.375rem/1.1 var(--fonte-titulo); }
.dt-contato small { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.dt-qualificar { display: flex; flex-wrap: wrap; gap: .5rem; }
.dt-q { padding: .5rem .875rem; border-radius: 999px; border: 1px solid var(--linha); font-size: .9375rem; white-space: nowrap; }
.dt-q-escolhida { background: var(--grafite); border-color: var(--grafite); color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
	.dt-sit-livre { animation: dt-fase 1.1s ease both .3s; }
	.dt-sit-tocando { animation: dt-fase 1.1s ease both 1.4s; }
	.dt-sit-ligacao { animation: dt-fase 1.3s ease both 2.5s; }
	.dt-sit-qualificando { animation: dt-entra .3s ease both 3.8s; }
	.dt-q-escolhida { animation: dt-escolhe .3s ease both 4.1s; }
	@keyframes dt-fase { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
	@keyframes dt-entra { from { opacity: 0; } to { opacity: 1; } }
	@keyframes dt-escolhe { from { background: transparent; border-color: var(--linha); color: var(--grafite); } to { background: var(--grafite); border-color: var(--grafite); color: #FFFFFF; } }
}

/* secoes */
.dt-secao { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.dt-secao-cinza { background: var(--cinza); }
.dt-secao h2, .dt-final h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); line-height: 1.02; font-weight: 800; max-width: 18ch; }
.dt-texto { margin-top: 1rem; color: var(--tinta-suave); font-size: 1.125rem; line-height: 1.55; max-width: 34ch; }
.dt-lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

/* estados do operador */
.dt-estados { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.dt-estados li { display: grid; align-content: start; gap: .5rem; padding: 1.25rem; border-radius: 18px; min-width: 0; }
.dt-estados b { font: 800 1.25rem/1.1 var(--fonte-titulo); white-space: nowrap; }
.dt-estados span { line-height: 1.45; font-size: .9375rem; }
.dt-estado-livre { background: var(--menta); color: #FFFFFF; }
.dt-estado-tocando { background: var(--girassol); color: var(--grafite); }
.dt-estado-ligacao { background: var(--coral); color: #FFFFFF; }
.dt-estado-qualificando { background: var(--grafite); color: #FFFFFF; }
.dt-estado-pausa { background: var(--branco); color: var(--grafite); border: 1px solid var(--linha); }

/* o dia do supervisor (sequencia real) */
.dt-turno { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dt-turno li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--linha); }
.dt-turno li:last-child { border-bottom: 1px solid var(--linha); }
.dt-turno b { font: 800 1.5rem/1 var(--fonte-titulo); color: var(--coral); }
.dt-turno p { line-height: 1.55; font-size: 1.0625rem; }

/* ritmo */
.dt-ritmo { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.dt-op { display: grid; justify-items: center; gap: .625rem; padding: 1.25rem .5rem; border-radius: 18px; background: var(--branco); border: 1px solid var(--linha); min-width: 0; }
.dt-op-pessoa { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #FFFFFF; }
.dt-op-pessoa svg { width: 1.5rem; height: 1.5rem; }
.dt-op-livre .dt-op-pessoa { background: var(--menta); }
.dt-op-ligacao .dt-op-pessoa { background: var(--coral); }
.dt-op-pausa .dt-op-pessoa { background: var(--linha); color: var(--grafite); }
.dt-op-linhas { display: flex; gap: .375rem; min-height: 2rem; }
.dt-op-fone { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--girassol); color: var(--grafite); }
.dt-op-fone svg { width: 1rem; height: 1rem; }
.dt-op small { color: var(--tinta-suave); font-size: .8125rem; white-space: nowrap; }

/* destinos da campanha */
.dt-destinos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.dt-destinos li { padding: .75rem 1.125rem; border-radius: 999px; border: 1.5px solid var(--grafite); font-weight: 600; white-space: nowrap; }
.dt-destinos li:last-child { background: var(--grafite); color: #FFFFFF; }

/* relatorios */
.dt-relatorios { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.dt-relatorios div { padding: 1.5rem; border-radius: 18px; background: var(--branco); min-width: 0; }
.dt-relatorios dt { display: flex; align-items: center; gap: .625rem; font: 800 1.25rem/1.1 var(--fonte-titulo); }
.dt-relatorios dt svg { width: 1.375rem; height: 1.375rem; color: var(--coral); flex: none; }
.dt-relatorios dd { margin: .625rem 0 0; color: var(--tinta-suave); line-height: 1.5; }

/* preco: cardapio com pontilhado */
.dt-cardapio { display: grid; gap: .25rem; }
.dt-cardapio h3 { margin: 1.75rem 0 .5rem; font-size: 1.375rem; font-weight: 800; }
.dt-item { display: flex; align-items: baseline; gap: .75rem; padding: .625rem 0; font-size: 1.125rem; }
.dt-item span { flex: 0 1 auto; min-width: 0; }
.dt-item::after { content: ""; order: 1; flex: 1 1 2rem; border-bottom: 2px dotted var(--linha); translate: 0 -.3rem; }
.dt-item b { order: 2; font: 800 1.5rem/1 var(--fonte-titulo); white-space: nowrap; }
.dt-item-sub { font-size: 1rem; color: var(--tinta-suave); }
.dt-item-sub b { font-size: 1.125rem; color: var(--grafite); }
.dt-item-destaque b { color: var(--coral); }
.dt-nota { margin-top: .5rem; color: var(--tinta-suave); font-size: .9375rem; }
.dt-cardapio .dt-botao { justify-self: start; margin-top: 1.75rem; }

/* duvidas */
.dt-duvidas details { border-bottom: 1px solid var(--linha); }
.dt-duvidas details:first-child { border-top: 1px solid var(--linha); }
.dt-duvidas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-weight: 600; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.dt-duvidas summary::-webkit-details-marker { display: none; }
.dt-duvidas summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--branco); border: 1px solid var(--linha); font-weight: 600; }
.dt-duvidas details[open] summary::after { content: "−"; background: var(--grafite); border-color: var(--grafite); color: #FFFFFF; }
.dt-duvidas p { padding: 0 0 1.25rem; color: var(--tinta-suave); line-height: 1.65; }

/* chamada final */
.dt-final { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--grafite); color: #FFFFFF; }
.dt-final h2 { color: #FFFFFF; }
.dt-final-grade { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* rodape */
.estilo-turno .dt-rodape { background: var(--papel); color: var(--grafite); border-top: 1px solid var(--linha); padding: 0; }
.dt-rodape-grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 2.5rem 0; }
.dt-rodape-grade p { margin-top: .875rem; color: var(--tinta-suave); }
.dt-rodape nav { display: grid; align-content: start; gap: .625rem; }
.dt-rodape nav a { color: var(--tinta-suave); text-decoration: none; white-space: nowrap; }
.dt-rodape nav a:hover { color: var(--grafite); }
.dt-rodape-final { padding: 1.25rem 0 1.75rem; border-top: 1px solid var(--linha); color: var(--tinta-suave); font-size: .875rem; }

/* blog e paginas internas */
.estilo-turno .pagina { width: min(100% - 2rem, 72rem); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.estilo-turno .pagina-topo h1 { font-size: clamp(2.5rem, 1.4rem + 3.5vw, 4rem); font-weight: 800; }
.estilo-turno .pagina-topo p { color: var(--tinta-suave); max-width: 52ch; }
.estilo-turno .posts a { background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; }
.estilo-turno .posts a:hover { border-color: var(--grafite); }
.estilo-turno .post-categoria { background: var(--cinza); color: var(--grafite); }
.estilo-turno .posts strong { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -.02em; }
.estilo-turno .artigo h1 { font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.375rem); font-weight: 800; line-height: 1.02; }
.estilo-turno .artigo-conteudo { font-size: 1.125rem; line-height: 1.72; }
.estilo-turno .artigo-conteudo h2 { font-weight: 800; }
.estilo-turno .artigo-conteudo a { text-decoration-color: var(--coral); }
.estilo-turno .artigo-chamada { background: var(--grafite); color: #FFFFFF; border-radius: 22px; }
.estilo-turno .migalhas a { color: var(--coral-forte); }
.estilo-turno .botao-acento { background: var(--coral); color: #FFFFFF; }
.estilo-turno .botao-acento:hover { background: var(--coral-forte); }
.estilo-turno .artigo-chamada .botao-acento { background: #FFFFFF; color: var(--grafite); }
.estilo-turno .campo input:focus, .estilo-turno .campo select:focus, .estilo-turno .campo textarea:focus { border-color: var(--grafite); box-shadow: 0 0 0 4px var(--acento-claro); }

/* entrar e criar conta */
.acesso.estilo-turno { background: var(--papel); font-family: var(--fonte-texto); }
.acesso.estilo-turno .acesso-lado { background: var(--grafite); color: #FFFFFF; }
.acesso.estilo-turno .acesso-lado h1 { font-family: var(--fonte-titulo); letter-spacing: -.03em; color: #FFFFFF; }
.acesso.estilo-turno .acesso-lado p { color: rgb(255 255 255 / .78); }
.acesso.estilo-turno .acesso-lista li::before { background: var(--menta); }
.acesso.estilo-turno .marca-clara { color: #FFFFFF; font-family: var(--fonte-titulo); }
.acesso.estilo-turno .marca-quadrado { background: url("favicon.svg") center / contain no-repeat; border-radius: 50%; }
.acesso.estilo-turno .acesso-form h2 { font-family: var(--fonte-titulo); letter-spacing: -.03em; }
.acesso.estilo-turno .botao-acento { background: var(--coral); color: #FFFFFF; border-radius: 999px; }
.acesso.estilo-turno .botao-acento:hover { background: var(--coral-forte); }
.acesso.estilo-turno .campo input { border-radius: 12px; background: #FFFFFF; }
.acesso.estilo-turno .campo input:focus { border-color: var(--grafite); }
.acesso.estilo-turno .acesso-rodape a { color: var(--coral-forte); }

/* telas menores */
@media (width < 60rem) {
	.dt-hero-grade, .dt-lado { grid-template-columns: 1fr; }
	.dt-hero-grade > *, .dt-lado > * { min-width: 0; }
	.dt-estados { grid-template-columns: 1fr 1fr; }
	.dt-rodape-grade { grid-template-columns: 1fr 1fr; }
	.dt-rodape-grade > div { grid-column: 1 / -1; }
}
@media (width < 40rem) {
	.dt-acoes { flex-direction: column; align-items: stretch; gap: 1rem; }
	.dt-acoes .dt-botao { width: 100%; }
	.dt-acoes .dt-link { text-align: center; }
	.dt-tela { padding: 1.125rem; }
	.dt-estados { grid-template-columns: 1fr; }
	.dt-turno li { grid-template-columns: 1fr; gap: .375rem; }
	.dt-ritmo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dt-item { font-size: 1rem; }
	.dt-item b { font-size: 1.25rem; }
	.dt-final-grade { flex-direction: column; align-items: flex-start; }
	.dt-rodape-grade { grid-template-columns: 1fr; }
}