h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- SmAgenda ---- */

:root {
    --smagenda-primaria: #007c99; /* azul do "Service" da logo (#0494AB), um pouco mais escuro pra texto branco ter contraste AA */
    --smagenda-primaria-escura: #005f7b;
    --smagenda-texto: #1a1a1a;
    --smagenda-fundo: #f6f7f8;
    --smagenda-borda: #dcdfe2;
    --smagenda-sombra: 0 1px 2px rgba(16, 24, 32, 0.04), 0 2px 8px rgba(16, 24, 32, 0.06);
    --smagenda-sombra-hover: 0 4px 14px rgba(16, 24, 32, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--smagenda-texto);
    background: var(--smagenda-fundo);
}

.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--smagenda-borda);
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--smagenda-primaria-escura);
    font-weight: 700;
    font-size: 1.1rem;
}

.icone-marca {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.cabecalho nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-width: 0;
}

.cabecalho nav a {
    color: var(--smagenda-primaria-escura);
    text-decoration: none;
    white-space: nowrap;
}

.cabecalho nav a:hover {
    text-decoration: underline;
}

.usuario-logado {
    color: #555;
    font-size: 0.9rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-botao {
    background: none;
    border: none;
    padding: 0;
    color: var(--smagenda-primaria-escura);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

main {
    flex: 1;
    padding: 2rem;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.pagina-login,
.pagina-inicial {
    text-align: center;
    max-width: 420px;
    margin: 3rem auto;
}

.cartao-busca-codigo {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
    box-shadow: var(--smagenda-sombra);
}

.cartao-busca-codigo h2 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.cartao-busca-codigo p {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #555;
}

.form-busca-codigo {
    display: flex;
    gap: 0.5rem;
}

.form-busca-codigo input {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 1rem;
    text-transform: uppercase;
}

.form-busca-codigo button {
    background: var(--smagenda-primaria);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
}

.cartao-busca-codigo .alerta {
    margin: 0.75rem 0 0;
}

.pagina-cadastro-empresa {
    max-width: 560px;
}

.pagina-cadastro-empresa fieldset {
    text-align: left;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.25rem;
}

.pagina-cadastro-empresa legend {
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
    padding: 0 0.5rem;
}

.pagina-cadastro-empresa select {
    padding: 0.6rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.logo-login,
.logo-inicial {
    max-width: 220px;
    margin-bottom: 1.5rem;
}

.pagina-login form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    margin-top: 1.5rem;
}

.pagina-login label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.pagina-login input {
    padding: 0.6rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.pagina-login button,
.botao {
    background: var(--smagenda-primaria);
    color: white;
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pagina-login button:hover,
.botao:hover {
    background: var(--smagenda-primaria-escura);
}

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    border-left: 4px solid transparent;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alerta-icone {
    flex-shrink: 0;
}

.alerta-sucesso {
    color: #1f6f5c;
    background: #e3f6ea;
    border-left-color: #1f6f5c;
}

.alerta-erro {
    color: #b3261e;
    background: #fbe9e7;
    border-left-color: #b3261e;
}

.alerta-aviso {
    color: #8a6100;
    background: #fff4d6;
    border-left-color: #8a6100;
}

.alerta-info {
    color: #33409e;
    background: #e5e9ff;
    border-left-color: #33409e;
}

.link-secundario {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: #555;
}

.link-secundario a {
    color: var(--smagenda-primaria-escura);
}

.busca-empresas {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.busca-empresas input {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
}

.busca-empresas button {
    background: var(--smagenda-primaria);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
}

.tabela-empresas {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabela-empresas th,
.tabela-empresas td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--smagenda-borda);
}

.paginacao {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.paginacao button {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--smagenda-borda);
    background: white;
    border-radius: 6px;
    cursor: pointer;
}

.paginacao button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.detalhes-empresa {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--smagenda-borda);
    box-shadow: var(--smagenda-sombra);
}

.detalhes-empresa dt {
    font-weight: 600;
    margin-top: 0.75rem;
    color: #555;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.detalhes-empresa dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
}

/* ---- Aba "Sobre" (vitrine pública do cliente) ---- */

.cartao-sobre-empresa {
    background: white;
    padding: 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--smagenda-borda);
    box-shadow: var(--smagenda-sombra);
}

.grade-info-empresa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.item-info-empresa {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.icone-info-empresa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--smagenda-fundo);
    font-size: 1.05rem;
}

.item-info-empresa > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.rotulo-info-empresa {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #555;
}

.valor-info-empresa {
    font-size: 1rem;
    color: var(--smagenda-texto);
    overflow-wrap: break-word;
}

/* ---- Home do cliente ---- */

.painel-cliente {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-cliente {
    position: relative;
    overflow: hidden;
    padding: 2rem 2rem 1.75rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #005f7b 0%, #007c99 55%, #0494ab 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(0, 95, 123, 0.22);
}

/* Círculos decorativos suaves no canto do banner. */
.hero-cliente::before,
.hero-cliente::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-cliente::before {
    width: 260px;
    height: 260px;
    right: -70px;
    top: -110px;
}

.hero-cliente::after {
    width: 160px;
    height: 160px;
    right: 110px;
    bottom: -90px;
}

.hero-cliente h1 {
    position: relative;
    margin: 0;
    font-size: 1.85rem;
    color: white;
}

.hero-cliente p {
    position: relative;
    margin: 0.3rem 0 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

.busca-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 680px;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.icone-busca-hero {
    display: inline-flex;
    color: #8a9096;
}

.busca-hero input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--smagenda-texto);
    padding: 0.55rem 0;
}

.busca-hero button {
    border: none;
    border-radius: 9px;
    padding: 0.65rem 1.3rem;
    background: var(--smagenda-primaria);
    color: white;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.busca-hero button:hover {
    background: var(--smagenda-primaria-escura);
}

.titulo-secao-cliente {
    margin: 0 0 0.85rem;
    font-size: 1.15rem;
}

.grade-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
}

.cartao-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 0.5rem 0.9rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    text-decoration: none;
    color: var(--smagenda-texto);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: center;
    box-shadow: var(--smagenda-sombra);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.cartao-categoria:hover {
    border-color: var(--smagenda-primaria);
    box-shadow: var(--smagenda-sombra-hover);
    transform: translateY(-2px);
}

.icone-categoria {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: #e0f1f5;
    font-size: 1.45rem;
}

.cabecalho-secao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cabecalho-secao h2 {
    margin: 0;
    font-size: 1.15rem;
}

.descricao-secao {
    margin: 0.2rem 0 0;
    color: #6b7075;
    font-size: 0.86rem;
}

.acoes-secao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cabecalho-secao a,
.link-ver-todas {
    color: var(--smagenda-primaria-escura);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.link-ver-todas:hover {
    text-decoration: underline;
}

.chip-localizacao-ativa {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: #e0f1f5;
    color: var(--smagenda-primaria-escura);
    font-size: 0.85rem;
    font-weight: 600;
}

.chip-localizacao-ativa button {
    border: none;
    background: none;
    padding: 0 0 0 0.25rem;
    color: var(--smagenda-primaria-escura);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.chip-localizacao-ativa button:hover {
    opacity: 1;
}

.vazio-cliente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--smagenda-borda);
    border-radius: 14px;
    background: white;
    text-align: center;
    color: #555;
}

.vazio-cliente strong {
    color: var(--smagenda-texto);
    font-size: 1rem;
}

.vazio-cliente .acoes-secao {
    justify-content: center;
    margin-top: 0.3rem;
}

/* ---- Cards de empresa (home + busca) ---- */

.grade-empresas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

.cartao-empresa {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--smagenda-texto);
    box-shadow: var(--smagenda-sombra);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.cartao-empresa:hover {
    border-color: var(--smagenda-primaria);
    box-shadow: var(--smagenda-sombra-hover);
    transform: translateY(-2px);
}

.capa-cartao-empresa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    background: linear-gradient(135deg, #e0f1f5 0%, #f4f8fa 100%);
}

/* Logo inteira, centralizada, sem cortar (logos costumam ser horizontais/transparentes). */
.cartao-empresa-foto {
    max-width: 80%;
    max-height: 96px;
    object-fit: contain;
}

.inicial-cartao-empresa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 18px;
    background: var(--smagenda-primaria);
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0, 95, 123, 0.25);
}

.distancia-cartao-empresa {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: white;
    color: var(--smagenda-primaria-escura);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.cartao-empresa-corpo {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cartao-empresa-corpo h3 {
    margin: 0;
    font-size: 1.05rem;
}

.linha-meta-cartao-empresa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cartao-empresa-categoria {
    display: inline-block;
    width: fit-content;
    background: #e0f1f5;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
}

.cartao-empresa-nota {
    font-size: 0.82rem;
    color: #555;
    white-space: nowrap;
}

.cartao-empresa-local {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.84rem;
    color: #666;
}

.cartao-empresa-rodape {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

@media (max-width: 640px) {
    .hero-cliente {
        padding: 1.4rem 1.1rem 1.25rem;
        border-radius: 14px;
    }

    .hero-cliente h1 {
        font-size: 1.45rem;
    }

    .busca-hero button {
        padding: 0.6rem 0.9rem;
    }

    .grade-categorias {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }
}

.botao-secundario {
    background: white;
    color: var(--smagenda-primaria-escura);
    border: 1px solid var(--smagenda-primaria);
}

.botao-secundario:hover {
    background: var(--smagenda-fundo);
}

.icone-favorito {
    background: none;
    border: 1px solid var(--smagenda-borda);
    border-radius: 999px;
    width: 2.2rem;
    height: 2.2rem;
    cursor: not-allowed;
    font-size: 1.1rem;
}

/* ---- Busca de serviços ---- */

.filtros-busca {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.filtros-busca label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #555;
}

.filtros-busca select {
    padding: 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
}

.contador-resultados {
    color: #555;
    font-size: 0.9rem;
}

.botao-localizacao {
    background: white;
    color: var(--smagenda-primaria-escura);
    border: 1px solid var(--smagenda-primaria);
    border-radius: 6px;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.botao-localizacao:hover:not(:disabled) {
    background: var(--smagenda-fundo);
}

.botao-localizacao:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ---- Detalhes da empresa + agendamento ---- */

.link-voltar {
    display: inline-block;
    margin-bottom: 1rem;
    color: #555;
    font-size: 0.9rem;
    text-decoration: none;
}

.link-voltar:hover {
    text-decoration: underline;
}

.pagina-empresa-detalhes {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.coluna-agendamento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

.foto-empresa {
    width: 100%;
    height: 220px;
    object-fit: contain;
    /* Branco (não degradê) — logos com fundo transparente cadastrados pela empresa aparecem certos aqui. */
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem;
    box-sizing: border-box;
}

/* Sem logo cadastrado: a marca do SmAgenda preenche o card inteiro, sem sobra em volta. */
.foto-empresa-marca {
    object-fit: cover;
    padding: 0;
}

.identificacao-empresa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.identificacao-empresa h1 {
    margin: 0;
}

.icone-favorito-detalhe {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #b3261e;
    cursor: not-allowed;
    line-height: 1;
}

.metadados-empresa {
    display: flex;
    gap: 1rem;
    margin: 0.4rem 0 1.25rem;
}

.abas-empresa,
.abas-agendamentos {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--smagenda-borda);
    margin-bottom: 1.25rem;
}

.abas-empresa button,
.abas-agendamentos button {
    background: none;
    border: none;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    border-bottom: 2px solid transparent;
}

.abas-empresa .aba-ativa,
.abas-agendamentos .aba-ativa {
    color: var(--smagenda-primaria-escura);
    border-bottom-color: var(--smagenda-primaria);
    font-weight: 600;
}

.lista-servicos {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--smagenda-sombra);
}

.linha-servico {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--smagenda-borda);
    transition: background-color 0.15s ease;
}

.linha-servico:last-child {
    border-bottom: none;
}

.linha-servico:hover {
    background: var(--smagenda-fundo);
}

.linha-servico span {
    display: block;
    color: #555;
    font-size: 0.85rem;
}

.linha-servico-selecionada {
    background: #f0f8f6;
}

.preco-servico {
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
    white-space: nowrap;
}

.cartao-lateral {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    padding: 1.1rem;
    box-shadow: var(--smagenda-sombra);
}

.cartao-lateral h3 {
    margin: 0 0 0.9rem;
    font-size: 1rem;
}

.calendario-navegacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.calendario-navegacao button {
    background: none;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
}

.calendario-dias-semana,
.calendario-grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    text-align: center;
}

.calendario-dias-semana span {
    font-size: 0.75rem;
    color: #555;
    padding-bottom: 0.4rem;
}

.dia-calendario {
    background: none;
    border: none;
    border-radius: 999px;
    aspect-ratio: 1;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.dia-calendario:not(.dia-vazio):hover {
    background: var(--smagenda-fundo);
}

.dia-calendario:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.dia-selecionado {
    background: var(--smagenda-primaria) !important;
    color: white;
    font-weight: 600;
}

.grade-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    max-height: 15rem;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.pastilha-horario {
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pastilha-horario:not(:disabled):hover {
    border-color: var(--smagenda-primaria);
    background: var(--smagenda-fundo);
}

.pastilha-horario:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.pastilha-horario-selecionada,
.pastilha-horario-selecionada:not(:disabled):hover {
    background: var(--smagenda-primaria);
    color: white;
    border-color: var(--smagenda-primaria);
}

.aviso-sem-horarios {
    color: #555;
    font-size: 0.85rem;
    margin: 0;
}

.botao-confirmar-agendamento {
    width: 100%;
    text-align: center;
    background: var(--smagenda-primaria-escura);
}

.botao-confirmar-agendamento:hover {
    background: var(--smagenda-primaria);
}

.botao-confirmar-agendamento:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 860px) {
    .pagina-empresa-detalhes {
        grid-template-columns: 1fr;
    }

    .coluna-agendamento {
        position: static;
    }
}

.posto-selecionado-info {
    font-size: 0.85rem;
    color: #555;
    margin: 0 0 0.5rem;
}

.overlay-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.cartao-modal {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    width: min(420px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--smagenda-sombra);
}

.cabecalho-modal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cabecalho-modal h3 {
    margin: 0;
}

.botao-fechar-modal {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #555;
}

.cartao-instalar-pwa {
    text-align: center;
}

.cartao-instalar-pwa .cabecalho-modal {
    text-align: left;
}

.icone-instalar-pwa {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.icone-instalar-pwa img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: var(--smagenda-sombra);
}

.cartao-instalar-pwa p {
    margin: 0 0 1.25rem;
    color: #555;
    font-size: 0.92rem;
    line-height: 1.5;
}

.cartao-instalar-pwa .texto-auxiliar-instalar-pwa {
    font-size: 0.8rem;
    color: #8a9096;
}

.acoes-instalar-pwa {
    display: flex;
    gap: 0.75rem;
}

.acoes-instalar-pwa button {
    flex: 1;
}

.lista-postos-modal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linha-posto-modal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.linha-posto-modal:not(:disabled):hover {
    border-color: var(--smagenda-primaria);
    background: var(--smagenda-fundo);
}

.linha-posto-modal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.avatar-funcionario {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--smagenda-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-funcionario img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-iniciais {
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
}

.detalhes-posto-modal {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 0.9rem;
}

.detalhes-posto-modal span {
    color: #555;
    font-size: 0.8rem;
}

.status-posto-modal {
    font-size: 0.75rem;
    color: #555;
    white-space: nowrap;
}

.secao-equipe {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    padding: 1.1rem;
    margin-bottom: 1.25rem;
}

.secao-equipe h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.lista-postos,
.lista-funcionarios {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linha-funcionario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
}

.detalhes-funcionario {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: 0.9rem;
}

.detalhes-funcionario span {
    color: #555;
    font-size: 0.8rem;
}

.form-inline-equipe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.form-inline-equipe input,
.form-inline-equipe select {
    padding: 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-novo-funcionario {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--smagenda-borda);
}

.lista-avaliacoes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cartao-avaliacao {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--smagenda-sombra);
}

.cartao-avaliacao-cabecalho {
    display: flex;
    justify-content: space-between;
}

.cartao-avaliacao p {
    margin: 0.5rem 0;
}

.data-avaliacao {
    color: #555;
    font-size: 0.8rem;
}

/* ---- Meus agendamentos ---- */

.lista-agendamentos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cartao-agendamento {
    display: flex;
    gap: 1rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--smagenda-sombra);
}

.cartao-agendamento img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}

.cartao-agendamento-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.badge-status {
    display: inline-block;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.25rem 0;
}

.badge-confirmado {
    background: #e3f6ea;
    color: #1f6f5c;
}

.badge-pendente {
    background: #fff4d6;
    color: #8a6100;
}

.badge-concluido {
    background: #e5e9ff;
    color: #33409e;
}

.badge-cancelado {
    background: #fbe9e7;
    color: #b3261e;
}

.botao-cancelar-agendamento,
.botao-excluir-agendamento {
    align-self: flex-start;
    margin-top: 0.4rem;
    background: none;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #b3261e;
}

.botao-cancelar-agendamento:hover,
.botao-excluir-agendamento:hover {
    background: #fbe9e7;
}

.botao-cancelar-agendamento:disabled,
.botao-excluir-agendamento:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Área Empresa: layout com sidebar ============ */

.layout-empresa {
    display: flex;
    min-height: 100vh;
}

.sidebar-empresa {
    width: 240px;
    flex-shrink: 0;
    background: white;
    border-right: 1px solid var(--smagenda-borda);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    gap: 1.5rem;
}

.marca-sidebar {
    padding: 0 0.5rem;
}

.nav-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-nav-sidebar {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--smagenda-texto);
    text-decoration: none;
    font-size: 0.95rem;
}

.item-nav-sidebar:hover {
    background: var(--smagenda-fundo);
}

.item-nav-ativo,
.item-nav-ativo:hover {
    background: var(--smagenda-primaria);
    color: white;
    font-weight: 600;
}

.grupo-nav-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-grupo-nav-sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.seta-grupo-nav {
    display: inline-flex;
    transition: transform 0.15s ease;
    font-size: 0.75rem;
}

.seta-grupo-nav.aberta {
    transform: rotate(180deg);
}

.item-subnav-sidebar {
    padding-left: 2.1rem;
    font-size: 0.9rem;
}

.item-nav-desabilitado {
    opacity: 0.45;
    cursor: not-allowed;
}

.conteudo-empresa {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-empresa {
    display: flex;
    align-items: center;
    /* No desktop só tem o bloco de ações (sino/perfil) — o hambúrguer some via display:none. Com um só item visível,
       space-between jogaria as ações pra esquerda; flex-end garante que fiquem à direita nos dois tamanhos de tela. */
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--smagenda-borda);
}

.acoes-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icone-topbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 999px;
    background: white;
    color: #3d4550;
    cursor: default;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.icone-topbar:hover {
    background: var(--smagenda-fundo);
    color: var(--smagenda-primaria-escura);
}

.perfil-topbar {
    position: relative;
}

.botao-perfil-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.botao-perfil-topbar:hover,
.botao-perfil-topbar.aberto {
    background: var(--smagenda-fundo);
    border-color: var(--smagenda-borda);
}

.seta-perfil-topbar {
    font-size: 0.75rem;
    color: #777;
    transition: transform 0.15s ease;
}

.botao-perfil-topbar.aberto .seta-perfil-topbar {
    transform: rotate(180deg);
}

/* Camada invisível atrás do menu: clicar fora fecha. */
.fundo-menu-perfil {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.menu-perfil-topbar {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 901;
    min-width: 190px;
    padding: 0.35rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    box-shadow: var(--smagenda-sombra-hover);
    display: flex;
    flex-direction: column;
}

.item-menu-perfil {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 7px;
    color: var(--smagenda-texto);
    font-size: 0.9rem;
    text-decoration: none;
}

.item-menu-perfil:hover {
    background: var(--smagenda-fundo);
}

/* O botão "Sair" vem de um componente próprio de cada host (form POST no Web, botão no MAUI). */
.item-menu-sair {
    padding: 0;
    border-top: 1px solid #f0f1f2;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-radius: 0;
}

.item-menu-sair:hover {
    background: none;
}

.item-menu-sair form {
    margin: 0;
}

.item-menu-sair .link-botao {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: #b3261e;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.item-menu-sair .link-botao:hover {
    background: #fbe9e7;
}

.avatar-topbar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    object-fit: cover;
    background: var(--smagenda-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
}

.nome-topbar {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--smagenda-texto);
    white-space: nowrap;
}

.corpo-empresa {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: none;
    width: auto;
    margin: 0;
}

.menu-mobile-wrapper {
    position: relative;
    display: none;
}

.botao-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    background: white;
    color: #3d4550;
    cursor: pointer;
}

.botao-menu-mobile:hover {
    background: var(--smagenda-fundo);
}

/* Mesma lista de links da sidebar, só que num dropdown — reaproveita o visual do menu de perfil. */
.menu-nav-mobile {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 901;
    min-width: 220px;
    padding: 0.35rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    box-shadow: var(--smagenda-sombra-hover);
    display: flex;
    flex-direction: column;
}

.menu-nav-mobile .item-nav-sidebar {
    padding: 0.65rem 0.75rem;
    border-radius: 7px;
}

@media (max-width: 900px) {
    .layout-empresa {
        flex-direction: column;
    }

    /* A navegação vira o botão hambúrguer na topbar — a lista lateral inteira some. */
    .sidebar-empresa {
        display: none;
    }

    .menu-mobile-wrapper,
    .botao-menu-mobile {
        display: flex;
    }

    .topbar-empresa {
        justify-content: space-between;
        padding: 0.6rem 1rem;
        gap: 0.6rem;
    }

    .nome-topbar {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .corpo-empresa {
        padding: 1.25rem 1rem;
    }
}

/* ---- Dashboard (dono e funcionário) ---- */

.cabecalho-dashboard {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cabecalho-dashboard h1 {
    margin: 0;
}

.subtitulo-dashboard {
    color: #6b7075;
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

.cartao-primeiros-passos {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    box-shadow: var(--smagenda-sombra);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}

.cabecalho-primeiros-passos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cabecalho-primeiros-passos h2 {
    margin: 0;
    font-size: 1.05rem;
}

.progresso-primeiros-passos {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--smagenda-primaria-escura);
    background: var(--smagenda-fundo);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.barra-progresso-primeiros-passos {
    height: 6px;
    border-radius: 999px;
    background: var(--smagenda-fundo);
    overflow: hidden;
    margin-bottom: 1.1rem;
}

.barra-progresso-preenchida {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0494ab, #007c99);
    transition: width 0.3s ease;
}

.lista-primeiros-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.item-primeiro-passo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    text-decoration: none;
    color: var(--smagenda-texto);
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.item-primeiro-passo:hover {
    border-color: var(--smagenda-primaria);
    background: var(--smagenda-fundo);
}

.item-primeiro-passo.concluido {
    color: #8a9096;
    text-decoration: line-through;
}

.icone-primeiro-passo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: var(--smagenda-fundo);
    color: var(--smagenda-primaria-escura);
    font-size: 0.8rem;
    font-weight: 700;
}

.item-primeiro-passo.concluido .icone-primeiro-passo {
    background: #0b8a3a;
    color: white;
}

.grade-estatisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cartao-estatistica {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    padding: 1.15rem 1.2rem;
    box-shadow: var(--smagenda-sombra);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cartao-estatistica:hover {
    box-shadow: var(--smagenda-sombra-hover);
    transform: translateY(-1px);
}

/* O cartão de dinheiro (faturamento/projeção) ganha o azul da marca, pra ser o primeiro número que o olho encontra. */
.cartao-estatistica-destaque {
    border-color: transparent;
    background: linear-gradient(135deg, #005f7b 0%, #007c99 60%, #0494ab 100%);
    color: white;
    box-shadow: 0 10px 24px rgba(0, 95, 123, 0.25);
}

.cartao-estatistica-destaque .rotulo-estatistica,
.cartao-estatistica-destaque .rodape-estatistica {
    color: rgba(255, 255, 255, 0.85);
}

.cartao-estatistica-destaque .valor-estatistica {
    color: white;
}

.cartao-estatistica-destaque .icone-estatistica {
    background: rgba(255, 255, 255, 0.18);
}

.cartao-estatistica-destaque .badge-delta {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.topo-estatistica {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.icone-estatistica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 11px;
    font-size: 1.15rem;
}

.icone-azul { background: #e0f1f5; }
.icone-roxo { background: #f0eaff; }
.icone-amarelo { background: #fff4d6; }
.icone-verde { background: #e3f6ea; }

.rotulo-estatistica {
    color: #5b6670;
    font-size: 0.86rem;
    font-weight: 500;
}

.valor-estatistica {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--smagenda-texto);
}

.rodape-estatistica {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #7a8088;
    font-size: 0.78rem;
}

.rodape-estatistica-quebra {
    line-height: 1.35;
}

.badge-delta {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-delta-positivo {
    background: #e3f6ea;
    color: #1f6f5c;
}

.badge-delta-negativo {
    background: #fbe9e7;
    color: #b3261e;
}

.badge-delta-neutro {
    background: var(--smagenda-fundo);
    color: #555;
}

.grade-dashboard-inferior {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.cartao-grafico,
.cartao-proximos-agendamentos {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    box-shadow: var(--smagenda-sombra);
}

.cabecalho-cartao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cabecalho-cartao h2,
.cabecalho-cartao h3 {
    margin: 0;
    font-size: 1.02rem;
}

.descricao-cartao {
    margin: 0.2rem 0 0;
    color: #7a8088;
    font-size: 0.8rem;
}

.cabecalho-cartao .link-ver-todas {
    white-space: nowrap;
    font-size: 0.85rem;
}

.lista-proximos-agendamentos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.linha-proximo-agendamento {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid #eef0f2;
    border-radius: 11px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.linha-proximo-agendamento:hover {
    border-color: var(--smagenda-borda);
    background: #fafbfc;
}

.data-proximo-agendamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 10px;
    background: var(--smagenda-fundo);
    color: #3a4550;
    line-height: 1;
}

.data-proximo-agendamento strong {
    font-size: 1.05rem;
}

.data-proximo-agendamento small {
    margin-top: 0.15rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-proximo-agendamento.hoje {
    background: var(--smagenda-primaria);
    color: white;
}

.detalhes-proximo-agendamento {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.detalhes-proximo-agendamento strong,
.detalhes-proximo-agendamento span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detalhes-proximo-agendamento span {
    color: #6b7075;
    font-size: 0.8rem;
}

.lado-proximo-agendamento {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.horario-proximo-agendamento {
    font-size: 0.8rem;
    font-weight: 600;
    color: #3a4550;
    white-space: nowrap;
}

.status-proximo-agendamento {
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.status-pendente { background: #fff6e5; color: #7a4f00; }
.status-confirmado { background: #e7f6ef; color: #14573f; }
.status-andamento { background: #e8f0ff; color: #1d3f86; }

.vazio-proximos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem 0.5rem;
    color: #7a8088;
    font-size: 0.88rem;
    text-align: center;
}

.vazio-proximos span {
    font-size: 1.8rem;
}

.vazio-proximos p {
    margin: 0;
}

@media (max-width: 900px) {
    .grade-dashboard-inferior {
        grid-template-columns: 1fr;
    }
}

/* ---- Gráfico SVG (GraficoLinha) ---- */

.grafico-linha {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.grafico-degrade-inicio {
    stop-color: var(--smagenda-primaria);
    stop-opacity: 0.28;
}

.grafico-degrade-fim {
    stop-color: var(--smagenda-primaria);
    stop-opacity: 0.02;
}

.grafico-linha-area {
    fill: url(#grafico-degrade);
}

.grafico-linha-traco {
    fill: none;
    stroke: var(--smagenda-primaria);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.grafico-linha-grade {
    stroke: #eceef0;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.grafico-linha-base {
    stroke: #d9dde1;
    stroke-dasharray: none;
}

.grafico-linha-rotulo {
    fill: #8a9096;
    font-size: 12px;
}

.grafico-ponto-area {
    fill: transparent;
    cursor: pointer;
}

.grafico-ponto-marca {
    fill: white;
    stroke: var(--smagenda-primaria);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.grafico-ponto-marca.com-valor {
    opacity: 1;
}

.grafico-ponto:hover .grafico-ponto-marca {
    opacity: 1;
    fill: var(--smagenda-primaria);
}

/* ---- Agenda / Agendamentos (LinhaAgendamentoEmpresa) ---- */

.lista-agendamentos-empresa {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.linha-agendamento-empresa {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
    box-shadow: var(--smagenda-sombra);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.linha-agendamento-empresa:hover {
    border-color: var(--smagenda-primaria);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.linha-agendamento-empresa .avatar-funcionario {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.05rem;
    background: var(--smagenda-fundo);
    border: 1px solid var(--smagenda-borda);
}

.detalhes-agendamento-empresa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 180px;
    gap: 0.2rem;
}

.detalhes-agendamento-empresa strong {
    font-size: 0.98rem;
    color: var(--smagenda-texto, #1a1a1a);
}

.detalhes-agendamento-empresa span {
    color: #666;
    font-size: 0.82rem;
}

.horario-agendamento-empresa {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
    min-width: 90px;
    text-align: right;
}

.acoes-agendamento-empresa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.select-executor-linha {
    align-self: flex-start;
    max-width: 220px;
    margin-top: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    background: var(--smagenda-fundo);
    color: #444;
    font-size: 0.78rem;
    cursor: pointer;
}

.select-executor-linha:focus {
    outline: none;
    border-color: var(--smagenda-primaria);
}

.botao-acao-agendamento {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--smagenda-borda);
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
}

.botao-acao-agendamento:hover {
    background: var(--smagenda-fundo);
}

.botao-acao-agendamento:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.botao-confirmar-linha {
    border-color: var(--smagenda-primaria);
    color: var(--smagenda-primaria-escura);
}

.botao-cancelar-linha {
    border-color: #b3261e;
    color: #b3261e;
}

.select-posto-linha {
    padding: 0.4rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 0.8rem;
}

.navegador-data {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.navegador-data button {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.navegador-data strong {
    font-size: 1rem;
}

.abas-status-agendamento {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.abas-status-agendamento button {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.abas-status-agendamento .aba-ativa {
    background: var(--smagenda-primaria);
    color: white;
    border-color: var(--smagenda-primaria);
}

/* ---- Serviços (gestão) ---- */

.lista-servicos-gestao {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.linha-servico-gestao {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

.servico-inativo {
    opacity: 0.55;
}

.detalhes-servico-gestao {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 160px;
}

.detalhes-servico-gestao span {
    color: #555;
    font-size: 0.8rem;
}

/* ---- Clientes ---- */

.lista-clientes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.linha-cliente {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.detalhes-cliente {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.detalhes-cliente span {
    color: #555;
    font-size: 0.8rem;
}

.stat-cliente {
    text-align: right;
    font-size: 0.8rem;
    color: #555;
    white-space: nowrap;
}

/* ---- Configurações ---- */

.grade-horarios-semana {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.linha-dia-semana {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--smagenda-borda);
    flex-wrap: wrap;
}

.nome-dia-semana {
    width: 110px;
    font-weight: 600;
    font-size: 0.9rem;
}

.linha-dia-semana input[type="time"] {
    padding: 0.4rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
}

.form-perfil-empresa {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 640px;
}

.form-perfil-empresa label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #555;
}

.form-perfil-empresa input,
.form-perfil-empresa select {
    padding: 0.55rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--smagenda-texto);
}

.grade-perfil-empresa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
}

/* ---- Motivo de cancelamento / avaliação (Meus Agendamentos) ---- */

.motivo-cancelamento {
    color: #555;
    font-size: 0.85rem;
    font-style: italic;
}

.botao-avaliar-agendamento {
    align-self: flex-start;
    margin-top: 0.4rem;
    background: none;
    border: 1px solid var(--smagenda-primaria);
    color: var(--smagenda-primaria-escura);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.botao-avaliar-agendamento:hover {
    background: var(--smagenda-fundo);
}

.form-avaliacao {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    background: var(--smagenda-fundo);
}

.seletor-nota {
    display: flex;
    gap: 0.25rem;
}

.botao-estrela {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0.35;
    padding: 0;
}

.botao-estrela.estrela-selecionada {
    opacity: 1;
}

.form-avaliacao textarea {
    padding: 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 3rem;
}

.acoes-form-avaliacao {
    display: flex;
    gap: 0.5rem;
}

.preview-logo {
    margin: -0.35rem 0 0.5rem;
}

.preview-logo img {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    padding: 0.4rem;
    background: white;
}

.seletor-imagem {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.acoes-seletor-imagem {
    display: flex;
    gap: 0.5rem;
}

.rotulo-arquivo {
    position: relative;
    overflow: hidden;
}

.input-arquivo-oculto {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}
/* ---- Calendário da empresa (Agenda / Agendamentos) ---- */

.cabecalho-calendario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.cabecalho-calendario h1 {
    margin: 0;
}

.acoes-cabecalho-calendario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.botao-novo-agendamento {
    border-radius: 10px;
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--smagenda-sombra);
}

.botao:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.barra-calendario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.navegacao-calendario {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    padding: 0.3rem;
}

.botao-seta-calendario {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
}

.botao-seta-calendario:hover {
    background: var(--smagenda-fundo);
}

.rotulo-periodo-calendario {
    min-width: 13rem;
    text-align: center;
    font-size: 0.92rem;
}

.botao-hoje-calendario {
    border: 1px solid var(--smagenda-borda);
    background: white;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.botao-hoje-calendario:hover {
    border-color: var(--smagenda-primaria);
    color: var(--smagenda-primaria-escura);
}

.alternador-visao {
    display: inline-flex;
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 10px;
    padding: 0.25rem;
    gap: 0.2rem;
}

.alternador-visao button {
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #555;
}

.alternador-visao button:hover {
    background: var(--smagenda-fundo);
}

.alternador-visao button.ativo {
    background: #e0f1f5;
    color: var(--smagenda-primaria-escura);
    font-weight: 600;
}

.cartao-calendario {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    box-shadow: var(--smagenda-sombra);
    overflow: hidden;
}

.carregando-calendario,
.vazio-calendario {
    padding: 1rem 1.25rem;
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

/* Visão Dia/Semana: grade de horários */

.grade-semana-rolagem {
    overflow-x: auto;
}

.grade-semana {
    display: grid;
    grid-template-columns: 64px repeat(var(--colunas-dias), minmax(110px, 1fr));
    padding-bottom: 0.75rem;
}

.canto-grade,
.cabecalho-dia-semana {
    border-bottom: 1px solid var(--smagenda-borda);
    background: white;
}

.cabecalho-dia-semana {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.65rem 0.25rem;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font: inherit;
}

.cabecalho-dia-semana:hover .numero-dia {
    background: var(--smagenda-fundo);
}

.nome-dia {
    font-size: 0.75rem;
    color: #777;
}

.numero-dia {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--smagenda-texto);
    min-width: 2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    text-align: center;
}

.cabecalho-dia-semana.hoje .nome-dia {
    color: var(--smagenda-primaria);
    font-weight: 600;
}

.cabecalho-dia-semana.hoje .numero-dia,
.cabecalho-dia-semana.hoje:hover .numero-dia {
    background: var(--smagenda-primaria);
    color: white;
}

.coluna-horas,
.coluna-dia {
    position: relative;
    margin-top: 12px;
}

.rotulo-hora {
    position: absolute;
    right: 0.6rem;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
}

.coluna-dia {
    border-left: 1px solid #eceef0;
    background-image: repeating-linear-gradient(
        to bottom,
        #e9ecef 0, #e9ecef 1px,
        transparent 1px, transparent calc(var(--altura-hora) / 2),
        #f5f6f7 calc(var(--altura-hora) / 2), #f5f6f7 calc(var(--altura-hora) / 2 + 1px),
        transparent calc(var(--altura-hora) / 2 + 1px), transparent var(--altura-hora));
}

.coluna-hoje {
    background-color: rgba(0, 124, 153, 0.035);
}

.bloco-evento {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.3rem 0.5rem;
    border: none;
    border-left: 4px solid;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    font-size: 0.74rem;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bloco-evento:hover {
    z-index: 2;
    box-shadow: var(--smagenda-sombra-hover);
    transform: translateY(-1px);
}

.bloco-evento strong,
.bloco-evento span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bloco-evento strong {
    font-size: 0.78rem;
}

.horario-bloco {
    opacity: 0.85;
}

/* Agendamentos curtos (ex.: 30 min): uma linha só, "Nome · 09:30–10:00", cortada com reticências. */
.bloco-compacto {
    justify-content: center;
    padding: 0 0.45rem;
}

.bloco-evento .linha-compacta {
    display: block;
    line-height: 1.2;
}

.bloco-evento .linha-compacta strong {
    display: inline;
    font-size: 0.74rem;
}

.linha-agora {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #e5484d;
    z-index: 3;
    pointer-events: none;
}

.linha-agora::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #e5484d;
}

/* Cores por status (blocos, chips do mês e legenda) */

.evento-pendente { background: #fff6e5; border-left-color: #f59e0b; color: #7a4f00; }
.evento-confirmado { background: #e7f6ef; border-left-color: #1f9d6b; color: #14573f; }
.evento-andamento { background: #e8f0ff; border-left-color: #2f6fdb; color: #1d3f86; }
.evento-concluido { background: #f0eaff; border-left-color: #7c4ddb; color: #45278c; }
.evento-cancelado { background: #f1f3f4; border-left-color: #a0a6ab; color: #6b7075; text-decoration: line-through; }

/* Visão Mês */

.grade-mes {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cabecalho-dia-mes {
    padding: 0.6rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: #777;
    border-bottom: 1px solid var(--smagenda-borda);
}

.celula-mes {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 112px;
    padding: 0.35rem;
    border-right: 1px solid #eceef0;
    border-bottom: 1px solid #eceef0;
    min-width: 0;
}

.celula-mes:nth-child(7n) {
    border-right: none;
}

.fora-do-mes {
    background: #fafbfc;
}

.fora-do-mes .numero-dia-mes,
.fora-do-mes .chip-evento-mes {
    opacity: 0.5;
}

.numero-dia-mes {
    align-self: flex-start;
    min-width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.numero-dia-mes:hover {
    background: var(--smagenda-fundo);
}

.numero-dia-mes.hoje,
.numero-dia-mes.hoje:hover {
    background: var(--smagenda-primaria);
    color: white;
}

.chip-evento-mes {
    display: block;
    width: 100%;
    padding: 0.15rem 0.4rem;
    border: none;
    border-left: 3px solid;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hora-chip {
    font-weight: 600;
}

.mais-eventos-mes {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0 0.2rem;
    font: inherit;
    font-size: 0.7rem;
    color: var(--smagenda-primaria);
    cursor: pointer;
}

.legenda-calendario {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: #666;
}

.legenda-calendario span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legenda-calendario i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border-left: 3px solid;
    text-decoration: none;
}

/* Modais de detalhes e de novo agendamento */

.cartao-modal-largo {
    width: min(520px, 100%);
    max-height: 90vh;
    border-radius: 14px;
}

.cliente-detalhe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cliente-detalhe > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lista-detalhes-agendamento {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.55rem 0.75rem;
    margin: 0 0 1rem;
    align-items: center;
}

.lista-detalhes-agendamento dt {
    color: #777;
    font-size: 0.82rem;
}

.lista-detalhes-agendamento dd {
    margin: 0;
    font-size: 0.9rem;
}

.select-detalhe {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 6px;
    font-size: 0.85rem;
}

.acoes-modal {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.acoes-modal .botao {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.form-novo-agendamento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.campo-novo-agendamento {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rotulo-campo {
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
}

.campo-novo-agendamento input,
.campo-novo-agendamento select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
}

.campo-novo-agendamento input:focus,
.campo-novo-agendamento select:focus {
    outline: none;
    border-color: var(--smagenda-primaria);
}

.linha-campos-novo-agendamento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.texto-ajuda {
    color: #777;
    font-size: 0.8rem;
}

.lista-clientes-busca {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
}

.item-cliente-busca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: none;
    border-bottom: 1px solid #f0f1f2;
    background: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.item-cliente-busca:last-child {
    border-bottom: none;
}

.item-cliente-busca:hover {
    background: var(--smagenda-fundo);
}

.item-cliente-busca > span:last-child,
.cliente-escolhido > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.88rem;
}

.item-cliente-busca small,
.cliente-escolhido small {
    color: #777;
    font-size: 0.78rem;
}

.cliente-escolhido {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    background: var(--smagenda-fundo);
}

.cliente-escolhido > div {
    flex: 1;
}

.avatar-iniciais-pequeno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #e0f1f5;
    color: var(--smagenda-primaria-escura);
    font-weight: 600;
    font-size: 0.85rem;
}

.botao-link {
    border: none;
    background: none;
    color: var(--smagenda-primaria);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

.grade-horarios-novo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 160px;
    overflow-y: auto;
}

.chip-horario {
    border: 1px solid var(--smagenda-borda);
    border-radius: 999px;
    background: white;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.chip-horario:hover {
    border-color: var(--smagenda-primaria);
}

.chip-horario-ativo,
.chip-horario-ativo:hover {
    background: var(--smagenda-primaria);
    border-color: var(--smagenda-primaria);
    color: white;
}

@media (max-width: 640px) {
    .rotulo-periodo-calendario {
        min-width: 0;
    }

    .celula-mes {
        min-height: 72px;
    }

    .chip-evento-mes {
        font-size: 0.62rem;
    }

    .linha-campos-novo-agendamento {
        grid-template-columns: 1fr;
    }
}
/* ---- Configurações (Empresa / Horários / Equipe) ---- */

.cabecalho-config {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cabecalho-config h1 {
    margin: 0;
}

.subtitulo-config {
    margin: 0.25rem 0 0;
    color: #666;
    font-size: 0.9rem;
}

.cartao-config {
    background: white;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    box-shadow: var(--smagenda-sombra);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
}

.cabecalho-cartao-config {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.cabecalho-cartao-config h2 {
    margin: 0;
    font-size: 1.08rem;
}

.cabecalho-cartao-config p {
    margin: 0.2rem 0 0;
    color: #6b7075;
    font-size: 0.84rem;
}

.contador-config {
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--smagenda-fundo);
    border: 1px solid var(--smagenda-borda);
    color: #555;
    font-size: 0.78rem;
    white-space: nowrap;
}

.subtitulo-secao-config {
    margin: 1.4rem 0 0.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid #eef0f2;
    font-size: 0.92rem;
    color: #333;
}

/* Bloco "imagem à esquerda + campos à direita" (perfil da empresa e novo funcionário) */
.perfil-config {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.logo-config {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.logo-config .preview-logo img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--smagenda-borda);
}

.logo-config .botao {
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.grade-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.grade-endereco-config {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ocupa-2 {
    grid-column: span 2;
}

.campo-config {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.rotulo-config {
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
}

.campo-config input,
.campo-config select,
.input-config {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    background: white;
    font: inherit;
    font-size: 0.9rem;
    color: var(--smagenda-texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-config input:focus,
.campo-config select:focus,
.input-config:focus {
    outline: none;
    border-color: var(--smagenda-primaria);
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.12);
}

/* Campo apontado pela mensagem de erro do servidor (ex.: "CNPJ já cadastrado") — ver CampoDoErro em EndpointsConta.cs. */
.campo-com-erro .rotulo-config {
    color: #c0392b;
}

.campo-com-erro input,
.campo-com-erro select {
    border-color: #c0392b;
}

.campo-com-erro input:focus,
.campo-com-erro select:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.rodape-cartao-config {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f2;
}

.rodape-cartao-config .botao,
.form-adicionar-config .botao {
    padding: 0.6rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
}

.cartao-config .alerta {
    margin-top: 1rem;
}

/* Listas (postos, dias da semana, funcionários) */
.lista-config {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linha-config {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: white;
    transition: border-color 0.15s ease;
}

.linha-config:hover {
    border-color: var(--smagenda-borda);
}

.linha-config-inativa {
    background: #fafbfc;
}

.linha-config-inativa .info-linha-config strong,
.linha-config-inativa .nome-dia-config {
    color: #888;
}

.linha-config > .input-config {
    flex: 1;
    min-width: 180px;
}

.icone-linha-config {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: #e0f1f5;
    color: var(--smagenda-primaria-escura);
    font-weight: 600;
    font-size: 0.9rem;
}

.avatar-config {
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--smagenda-borda);
}

.info-linha-config {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
}

.info-linha-config strong {
    font-size: 0.93rem;
}

.acoes-linha-config {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.botao-config {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 7px;
    background: white;
    font: inherit;
    font-size: 0.82rem;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
}

.botao-config:hover {
    background: var(--smagenda-fundo);
}

.botao-config:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.botao-config-primario {
    border-color: var(--smagenda-primaria);
    background: var(--smagenda-primaria);
    color: white;
}

.botao-config-primario:hover {
    background: var(--smagenda-primaria-escura);
}

.selo-config {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.selo-ativo { background: #e7f6ef; color: #14573f; }
.selo-inativo { background: #f1f3f4; color: #6b7075; }
.selo-proprietario { background: #fff3dc; color: #7a4f00; }
.selo-gerente { background: #e8f0ff; color: #1d3f86; }
.selo-atendente { background: #e7f6ef; color: #14573f; }

.campo-inline-config {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.8rem;
    color: #666;
}

.campo-inline-config .input-config {
    width: auto;
    min-width: 170px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.form-adicionar-config {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.form-adicionar-config .input-config {
    flex: 1;
}

.vazio-config,
.aviso-config {
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--smagenda-borda);
    border-radius: 10px;
    color: #6b7075;
    font-size: 0.88rem;
    text-align: center;
}

.aviso-config {
    margin-top: 0.9rem;
    border-style: solid;
    background: #fff8ea;
    border-color: #f3dfb1;
    color: #7a4f00;
}

/* Horários: interruptor Aberto/Fechado */
.linha-horario-config {
    min-height: 3.3rem;
}

.nome-dia-config {
    width: 5.5rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.interruptor-config {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    width: 7rem;
}

.interruptor-config input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.trilho-interruptor {
    position: relative;
    flex-shrink: 0;
    width: 2.4rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #cfd4d9;
    transition: background-color 0.15s ease;
}

.trilho-interruptor::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.interruptor-config input:checked + .trilho-interruptor {
    background: var(--smagenda-primaria);
}

.interruptor-config input:checked + .trilho-interruptor::after {
    transform: translateX(1.05rem);
}

.interruptor-config input:focus-visible + .trilho-interruptor {
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.2);
}

.texto-interruptor {
    font-size: 0.84rem;
    color: #555;
}

.horas-config {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.85rem;
}

.horas-config .input-config {
    width: auto;
    padding: 0.4rem 0.55rem;
}

.linha-horario-config > .botao-config {
    margin-left: auto;
}

@media (max-width: 720px) {
    .cartao-config {
        padding: 1.1rem;
    }

    .perfil-config,
    .grade-config,
    .grade-endereco-config {
        grid-template-columns: 1fr;
    }

    .ocupa-2 {
        grid-column: auto;
    }

    .campo-inline-config,
    .acoes-linha-config,
    .linha-horario-config > .botao-config {
        margin-left: 0;
    }

    .form-adicionar-config {
        flex-direction: column;
    }
}
/* ---- Painel do funcionário ---- */


.nota-dashboard {
    margin: 1rem 0 0;
    color: #7a7f84;
    font-size: 0.78rem;
}

/* ---- Autenticação (login) ---- */

.fundo-autenticacao {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(4, 148, 171, 0.12), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(11, 37, 69, 0.10), transparent 45%),
        #eef4f8;
}

.cartao-autenticacao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(920px, 100%);
    min-height: 560px;
    background: white;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 37, 69, 0.16);
}

.painel-marca-autenticacao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 2.25rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 35%, #eaf5f9 100%);
    border-right: 1px solid #eef1f4;
    overflow: hidden;
}

.logo-autenticacao {
    width: min(300px, 90%);
    height: auto;
    margin-top: 1.5rem;
}

.slogan-autenticacao {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin: 2.25rem 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0b2545;
}

.slogan-autenticacao span {
    color: #0494ab;
}

.ondas-autenticacao {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 34%;
}

.painel-formulario-autenticacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem 2.75rem 2.25rem;
}

.titulo-autenticacao {
    margin: 0;
    font-size: 2rem;
    color: #0b2545;
}

.subtitulo-autenticacao {
    margin: 0.35rem 0 1.5rem;
    color: #6b7580;
    font-size: 0.95rem;
}

.painel-formulario-autenticacao .alerta {
    margin-bottom: 1rem;
}

.form-autenticacao {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.campo-autenticacao {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.campo-autenticacao > span:first-child {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3a4550;
}

.campo-autenticacao input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid #d6dde3;
    border-radius: 10px;
    background: white;
    font: inherit;
    font-size: 0.95rem;
    color: var(--smagenda-texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-autenticacao input:focus {
    outline: none;
    border-color: #007c99;
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.15);
}

.campo-senha-autenticacao {
    position: relative;
    display: block;
}

.campo-senha-autenticacao input {
    padding-right: 2.9rem;
}

.botao-olho-senha {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7580;
    cursor: pointer;
}

.botao-olho-senha:hover {
    background: #f1f4f7;
    color: #0b2545;
}

.link-esqueci-senha {
    align-self: flex-end;
    margin-top: -0.35rem;
    color: #007c99;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.link-esqueci-senha:hover {
    text-decoration: underline;
}

.botao-entrar-autenticacao {
    margin-top: 0.4rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10px;
    background: #0b2545;
    color: white;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(11, 37, 69, 0.22);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.botao-entrar-autenticacao:hover:not(:disabled) {
    background: #061a33;
    transform: translateY(-1px);
}

.botao-entrar-autenticacao:disabled {
    opacity: 0.65;
    cursor: wait;
}

.rodape-autenticacao {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef1f4;
    text-align: center;
    font-size: 0.88rem;
    color: #5b6670;
}

.rodape-autenticacao p {
    margin: 0.35rem 0;
}

.rodape-autenticacao a {
    color: #007c99;
    font-weight: 600;
    text-decoration: none;
}

.rodape-autenticacao a:hover {
    text-decoration: underline;
}

/* Celular: marca vira uma faixa compacta no topo, formulário embaixo. */
@media (max-width: 760px) {
    .fundo-autenticacao {
        padding: 0;
        align-items: stretch;
    }

    .cartao-autenticacao {
        grid-template-columns: 1fr;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .painel-marca-autenticacao {
        padding: 1.75rem 1.5rem 3.25rem;
        border-right: none;
    }

    .logo-autenticacao {
        width: min(220px, 70%);
        margin-top: 0;
    }

    .slogan-autenticacao {
        display: none;
    }

    .ondas-autenticacao {
        height: 45%;
    }

    .painel-formulario-autenticacao {
        justify-content: flex-start;
        padding: 1.75rem 1.5rem 2rem;
    }

    .titulo-autenticacao {
        font-size: 1.6rem;
    }
}

.dica-campo-autenticacao {
    color: #7a8088;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Telas de confirmação (e-mail enviado, senha alterada, link inválido). */
.confirmacao-autenticacao {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icone-confirmacao-autenticacao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: #e0f1f5;
    font-size: 1.8rem;
}

.icone-confirmacao-erro {
    background: #fff4d6;
}

.confirmacao-autenticacao .subtitulo-autenticacao strong {
    color: #0b2545;
    word-break: break-all;
}

.botao-link-autenticacao {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.link-reenviar-autenticacao {
    margin-top: 0.9rem;
    border: none;
    background: none;
    color: #007c99;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.link-reenviar-autenticacao:hover {
    text-decoration: underline;
}
/* ---- Equipe: edição inline e remoção ---- */

a.botao-config {
    display: inline-block;
    text-decoration: none;
}

.email-linha-config {
    color: #7a8088;
    font-size: 0.8rem;
}

.linha-config-edicao {
    display: block;
    border-color: var(--smagenda-primaria);
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.08);
    padding: 1rem 1.1rem;
}

.acoes-edicao-config {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef0f2;
}

.linha-config-alerta {
    border-color: #f3c7c2;
    background: #fff7f6;
}

.icone-linha-alerta {
    background: #fbe0dc;
    color: #b3261e;
    font-weight: 700;
}

.texto-alerta-config {
    color: #7a4a45;
    font-size: 0.82rem;
    line-height: 1.4;
}

.botao-config-perigo {
    border-color: #b3261e;
    background: #b3261e;
    color: white;
}

.botao-config-perigo:hover {
    background: #8f1d17;
}

.botao-config-perigo-leve {
    border-color: #f0c9c5;
    color: #b3261e;
}

.botao-config-perigo-leve:hover {
    background: #fff1ef;
}
.stats-linha-config {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #6b7075;
    white-space: nowrap;
}
/* ---- Meu plano ---- */

.grade-plano-atual {
    margin-bottom: 1rem;
}

.grade-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cartao-plano {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 14px;
    background: white;
}

.cartao-plano-atual {
    border-color: var(--smagenda-primaria);
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.1);
}

.selo-plano-atual {
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #e0f1f5;
    color: var(--smagenda-primaria-escura);
    font-size: 0.7rem;
    font-weight: 600;
}

.cartao-plano h3 {
    margin: 0;
    font-size: 1.1rem;
}

.preco-plano {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.preco-plano strong {
    font-size: 1.5rem;
    color: var(--smagenda-texto);
}

.preco-plano span {
    color: #7a8088;
    font-size: 0.85rem;
}

.descricao-plano {
    margin: 0;
    color: #6b7075;
    font-size: 0.86rem;
    line-height: 1.4;
}

.lista-limites-plano,
.lista-funcionalidades-plano {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.lista-limites-plano {
    color: #3a4550;
    font-weight: 600;
}

.lista-funcionalidades-plano {
    padding-top: 0.5rem;
    border-top: 1px solid #eef0f2;
    color: #555;
}

.botao-plano {
    margin-top: auto;
    padding-top: 0.65rem;
}
/* ---- Cadastro de empresa ---- */

.cartao-cadastro-empresa {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cabecalho-cadastro-empresa {
    text-align: center;
    margin-bottom: 0.25rem;
}

.logo-cadastro-empresa {
    width: 160px;
    margin-bottom: 0.75rem;
}

.cabecalho-cadastro-empresa h1 {
    margin: 0;
    color: #0b2545;
    font-size: 1.7rem;
}

.cabecalho-cadastro-empresa p {
    margin: 0.35rem 0 0;
    color: #6b7580;
    font-size: 0.92rem;
}

.cartao-cadastro-empresa form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.link-secundario-cadastro-empresa {
    text-align: center;
    color: #5b6670;
    font-size: 0.9rem;
}

.link-secundario-cadastro-empresa a {
    color: #007c99;
    font-weight: 600;
    text-decoration: none;
}

.link-secundario-cadastro-empresa a:hover {
    text-decoration: underline;
}
.selo-cargo {
    background: #eef0f2;
    color: #45505a;
}
.form-novo-cliente-modal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-novo-cliente-modal input {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--smagenda-borda);
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
}

.form-novo-cliente-modal input:focus {
    outline: none;
    border-color: var(--smagenda-primaria);
}

.botao-novo-cliente-modal {
    align-self: flex-start;
    margin-top: 0.4rem;
}
.controle-raio-busca {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 190px;
}

.slider-raio {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--smagenda-borda);
    cursor: pointer;
    outline: none;
}

.slider-raio::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--smagenda-primaria);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.slider-raio::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--smagenda-primaria);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.slider-raio::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--smagenda-borda);
}
.controle-raio-hero {
    min-width: 170px;
}

.rotulo-raio-hero {
    font-size: 0.78rem;
    color: #555;
    white-space: nowrap;
}

/* ---- Splash do app (MAUI): logo enquanto resolve a sessão salva, antes de cair no /login ---- */

.tela-carregamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 80vh;
}

.logo-carregamento {
    width: min(300px, 75vw);
    height: auto;
    /* A imagem tem fundo branco: "multiply" some com ele sobre o cinza-claro da página. */
    mix-blend-mode: multiply;
}

.spinner-carregamento {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--smagenda-borda);
    border-top-color: var(--smagenda-primaria);
    border-radius: 999px;
    animation: girar-spinner 0.8s linear infinite;
}

@keyframes girar-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Landing de apresentação (visitante não logado, só no site) ---- */

:root {
    --landing-marinho: #0b2545;
    --landing-azul: #0d4f7f;
    --landing-turquesa: #0494ab;
    --landing-azul-claro: #e6f3f9;
    --landing-texto: #34495e;
    --landing-texto-suave: #5b6b7a;
}

html:has(.landing) {
    scroll-behavior: smooth;
}

main.main-landing {
    max-width: none;
    padding: 0;
}

.landing {
    color: var(--landing-texto);
}

.landing section[id] {
    scroll-margin-top: 76px;
}

.landing-container {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Navbar (renderizada pelo MainLayout no lugar do cabeçalho padrão) */

.landing-navbar {
    position: sticky;
    top: 0;
    z-index: 800;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e6edf2;
}

.landing-navbar-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 72px;
}

.landing-marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.landing-marca img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.landing-marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.landing-marca-nome {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--landing-marinho);
    letter-spacing: -0.02em;
}

.landing-marca-nome span {
    color: var(--landing-turquesa);
}

.landing-marca-slogan {
    font-size: 0.7rem;
    color: var(--landing-texto-suave);
}

.landing-nav {
    display: flex;
    gap: 1.9rem;
}

.landing-nav a {
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
    color: var(--landing-marinho);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.landing-nav a:hover {
    color: var(--landing-turquesa);
    border-bottom-color: var(--landing-turquesa);
}

.landing-acoes-navbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.landing-link-entrar {
    padding: 0.6rem 0.95rem;
    border-radius: 10px;
    color: var(--landing-marinho);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.landing-link-entrar:hover {
    background: var(--landing-azul-claro);
}

/* Mesmos botões no cabeçalho padrão das outras páginas — sem isso, ".cabecalho nav a" pinta o texto e sublinha. */
.cabecalho nav a.landing-link-entrar {
    color: var(--landing-marinho);
    text-decoration: none;
}

.cabecalho nav a.landing-botao-primario {
    color: white;
    text-decoration: none;
}

/* Botões */

.landing-botao-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.72rem 1.25rem;
    border: none;
    border-radius: 10px;
    background: var(--landing-azul);
    color: white;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(13, 79, 127, 0.25);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.landing-botao-primario:hover {
    background: var(--landing-marinho);
}

.landing-botao-primario:disabled {
    opacity: 0.7;
    cursor: default;
}

.landing-botao-primario svg,
.landing-botao-contorno svg,
.landing-botao-branco svg,
.landing-link-seta svg {
    font-size: 1.1em;
}

.landing-botao-contorno {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border: 2px solid var(--landing-turquesa);
    border-radius: 999px;
    background: white;
    color: var(--landing-azul);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-botao-contorno:hover {
    background: var(--landing-turquesa);
    color: white;
}

.landing-botao-branco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2.4rem;
    border-radius: 999px;
    background: white;
    color: var(--landing-marinho);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}

.landing-botao-branco:hover {
    transform: translateY(-2px);
}

.landing-botao-menor {
    padding: 0.75rem 1.4rem;
    font-size: 0.92rem;
}

.landing-link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--landing-marinho);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.landing-link-seta:hover {
    color: var(--landing-turquesa);
}

/* Hero */

.landing-hero {
    background: linear-gradient(180deg, #f3f9fc 0%, #e3f1f7 100%);
    overflow: hidden;
}

.landing-hero-conteudo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.landing-hero h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(2.2rem, 4.2vw, 3.3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--landing-marinho);
}

.landing-hero h1 span {
    color: var(--landing-turquesa);
}

.landing-hero-subtitulo {
    max-width: 470px;
    margin: 0 0 1.75rem;
    font-size: 1.08rem;
    line-height: 1.55;
}

.landing-cartao-busca {
    max-width: 500px;
    padding: 1.4rem 1.5rem;
    border-radius: 14px;
    background: white;
    box-shadow: 0 14px 34px rgba(11, 37, 69, 0.12);
}

.landing-cartao-busca h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--landing-marinho);
}

.landing-cartao-busca p {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--landing-texto-suave);
}

.landing-form-busca {
    display: flex;
    gap: 0.6rem;
}

.landing-form-busca input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid #d5dee5;
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.landing-form-busca input::placeholder {
    color: #8a98a5;
    letter-spacing: 0.02em;
}

.landing-form-busca input:focus {
    outline: none;
    border-color: var(--smagenda-primaria);
    box-shadow: 0 0 0 3px rgba(0, 124, 153, 0.15);
}

.landing-cartao-busca .alerta {
    margin: 0.75rem 0 0;
}

/* Visual do hero: mapa + celular + "fotos" (ícones em círculo) + chamada */

.padrao-mapa {
    background-color: #dfeef5;
    background-image:
        linear-gradient(28deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
        linear-gradient(118deg, transparent 48%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 255, 255, 0.85) 51.5%, transparent 51.5%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.7) 2px, transparent 2px);
    background-size: 260px 260px, 180px 180px, 46px 46px, 46px 46px;
}

.landing-hero-visual {
    position: relative;
    height: 460px;
}

.landing-mapa {
    position: absolute;
    inset: 0 0 0 6%;
    border-radius: 32px;
    -webkit-mask-image: radial-gradient(ellipse at 55% 50%, black 55%, transparent 78%);
    mask-image: radial-gradient(ellipse at 55% 50%, black 55%, transparent 78%);
}

.landing-pin {
    position: absolute;
    z-index: 1;
    color: var(--landing-turquesa);
    font-size: 1.9rem;
    filter: drop-shadow(0 4px 6px rgba(4, 148, 171, 0.35));
}

.landing-pin-1 { top: 10%; left: 14%; }
.landing-pin-2 { top: 58%; left: 10%; color: var(--landing-azul); }
.landing-pin-3 { top: 6%; right: 36%; font-size: 1.5rem; }
.landing-pin-4 { bottom: 12%; right: 34%; color: var(--landing-azul); font-size: 1.6rem; }

.landing-hero-visual .celular {
    position: absolute;
    top: 50%;
    left: 22%;
    transform: translateY(-50%) rotate(-4deg);
}

.landing-avatar {
    position: absolute;
    z-index: 3;
    width: 84px;
    height: 84px;
    padding: 4px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 12px 26px rgba(11, 37, 69, 0.18);
    box-sizing: border-box;
    font-size: 2rem;
}

.landing-avatar > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    color: white;
}

.landing-avatar-1 { top: 0; right: 16%; }
.landing-avatar-1 > span { background: linear-gradient(135deg, #0494ab, #007c99); }

.landing-avatar-2 { top: 10%; right: -1%; width: 96px; height: 96px; font-size: 2.3rem; }
.landing-avatar-2 > span { background: linear-gradient(135deg, #3aa0d8, #0d4f7f); }

.landing-avatar-3 { top: 40%; right: 6%; }
.landing-avatar-3 > span { background: linear-gradient(135deg, #0b2545, #1d6fb8); }

.landing-avatar-4 { bottom: 4%; right: 0; width: 96px; height: 96px; font-size: 2.3rem; }
.landing-avatar-4 > span { background: linear-gradient(135deg, #12a39a, #0494ab); }

.landing-avatar-5 { top: 22%; left: 2%; width: 66px; height: 66px; font-size: 1.6rem; }
.landing-avatar-5 > span { background: linear-gradient(135deg, #5bc0de, #007c99); }

.landing-callout {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 6%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 250px;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #0494ab 0%, #007c99 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 14px 30px rgba(0, 124, 153, 0.35);
}

.landing-callout svg {
    flex-shrink: 0;
    font-size: 2rem;
}

/* Celular ilustrativo */

.celular {
    z-index: 2;
    width: 232px;
    height: 464px;
    padding: 10px;
    border-radius: 38px;
    background: #10151c;
    box-shadow: 0 30px 60px rgba(11, 37, 69, 0.3), inset 0 0 0 2px #2a313b;
    box-sizing: border-box;
}

.celular-tela {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: white;
    overflow: hidden;
}

.celular-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 2;
    width: 72px;
    height: 18px;
    border-radius: 999px;
    background: #10151c;
    transform: translateX(-50%);
}

.celular-conteudo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 36px 12px 12px;
    font-size: 9px;
    color: var(--landing-marinho);
}

.celular-topo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
}

.celular-topo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.celular-saudacao strong {
    display: block;
    font-size: 13px;
}

.celular-saudacao span {
    color: var(--landing-texto-suave);
}

.celular-busca {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid #dfe7ed;
    border-radius: 8px;
    color: #8a98a5;
    font-size: 9px;
}

.celular-busca svg {
    font-size: 11px;
}

.celular-categorias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px 4px;
}

.celular-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 7px;
    color: var(--landing-texto);
    text-align: center;
}

.celular-categoria-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--landing-azul-claro);
    color: var(--landing-azul);
    font-size: 13px;
}

.celular-titulo-secao {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 800;
}

.celular-empresa {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border: 1px solid #edf1f4;
    border-radius: 10px;
}

.celular-empresa-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: white;
    font-size: 16px;
}

.celular-foto-1 { background: linear-gradient(135deg, #0494ab, #007c99); }
.celular-foto-2 { background: linear-gradient(135deg, #3aa0d8, #0d4f7f); }
.celular-foto-3 { background: linear-gradient(135deg, #12a39a, #0494ab); }

.celular-empresa strong,
.celular-cartao-mapa strong {
    display: block;
    font-size: 9px;
    color: var(--landing-marinho);
}

.celular-empresa div span,
.celular-cartao-mapa div span {
    display: block;
    font-size: 7.5px;
    color: var(--landing-texto-suave);
}

.celular-empresa div .celular-nota,
.celular-cartao-mapa div .celular-nota {
    color: #e39b12;
}

.celular-mapa {
    position: relative;
    flex: 1;
}

.celular-pin {
    position: absolute;
    color: var(--landing-turquesa);
    font-size: 20px;
    filter: drop-shadow(0 2px 3px rgba(4, 148, 171, 0.35));
}

.celular-pin-1 { top: 12%; left: 18%; }
.celular-pin-2 { top: 20%; right: 20%; color: var(--landing-azul); }
.celular-pin-3 { top: 36%; left: 44%; }
.celular-pin-4 { top: 50%; left: 14%; color: var(--landing-azul); }
.celular-pin-5 { top: 55%; right: 16%; }
.celular-pin-6 { top: 70%; left: 40%; color: var(--landing-azul); }

.celular-cartao-mapa {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 6px 16px rgba(11, 37, 69, 0.18);
}

/* Faixa de destaques */

.landing-destaques {
    background: white;
    border-bottom: 1px solid #e6edf2;
}

.landing-destaques-conteudo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.landing-destaque {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--landing-marinho);
}

.landing-destaque svg {
    flex-shrink: 0;
    font-size: 2.2rem;
    color: var(--landing-azul);
}

/* Seções */

.landing-secao {
    padding: 4.25rem 0;
    background: white;
}

.landing-secao-clara {
    background: linear-gradient(180deg, #f5fafc 0%, #edf6fa 100%);
}

.landing-titulo {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--landing-marinho);
}

.landing-titulo span {
    color: var(--landing-turquesa);
}

.landing-titulo::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 0.8rem;
    border-radius: 999px;
    background: var(--landing-turquesa);
}

.landing-titulo-centro {
    text-align: center;
}

.landing-titulo-centro::after {
    margin-left: auto;
    margin-right: auto;
}

.landing-subtitulo-centro {
    max-width: 640px;
    margin: 1.25rem auto 0;
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: center;
}

/* Categorias */

.landing-cabecalho-categorias {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.9rem;
}

.landing-grade-categorias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.9rem;
}

.landing-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 124px;
    padding: 1rem 0.6rem;
    border: 1px solid #dcecf3;
    border-radius: 14px;
    background: linear-gradient(180deg, #f2f9fc 0%, #e5f2f8 100%);
    color: var(--landing-marinho);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.landing-categoria svg {
    font-size: 2.4rem;
    color: var(--landing-azul);
}

.landing-categoria:nth-child(even) svg {
    color: var(--landing-turquesa);
}

.landing-categoria:hover {
    border-color: #b6dbe9;
    box-shadow: 0 10px 22px rgba(11, 37, 69, 0.1);
    transform: translateY(-3px);
}

/* Benefícios */

.landing-beneficios {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 3rem;
}

.landing-beneficios-intro p {
    max-width: 420px;
    margin: 1.4rem 0 1.75rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.landing-beneficios-intro strong {
    color: var(--landing-marinho);
}

.landing-grade-beneficios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.landing-beneficio {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid #edf2f6;
    border-radius: 14px;
    background: white;
    box-shadow: 0 8px 22px rgba(11, 37, 69, 0.07);
}

.landing-beneficio-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    background: var(--landing-azul-claro);
    color: var(--landing-azul);
    font-size: 1.5rem;
}

.landing-beneficio strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.98rem;
    color: var(--landing-marinho);
}

.landing-beneficio p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--landing-texto-suave);
}

/* Como funciona */

.landing-passos {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
}

.landing-passo {
    flex: 1;
    max-width: 310px;
}

.landing-passo-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.landing-passo-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0494ab, #007c99);
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(0, 124, 153, 0.3);
}

.landing-passo-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 999px;
    background: var(--landing-azul-claro);
    color: var(--landing-azul);
    font-size: 2rem;
}

.landing-passo-texto {
    padding-left: 3.5rem;
}

.landing-passo-texto strong {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.12rem;
    color: var(--landing-marinho);
}

.landing-passo-texto p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--landing-texto-suave);
}

.landing-seta-passo {
    flex-shrink: 0;
    margin-top: 1.4rem;
    color: #9fb3c2;
    font-size: 1.6rem;
}

/* Sobre: os dois públicos */

.landing-publicos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.landing-publico {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid #dcebf2;
    border-radius: 18px;
    background: white;
    box-shadow: 0 8px 22px rgba(11, 37, 69, 0.06);
}

.landing-publico-destaque {
    border: none;
    background: linear-gradient(135deg, #0b2545 0%, #0d4f7f 100%);
    color: white;
}

.landing-publico-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 14px;
    background: var(--landing-azul-claro);
    color: var(--landing-azul);
    font-size: 1.6rem;
}

.landing-publico-destaque .landing-publico-icone {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.landing-publico h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--landing-marinho);
}

.landing-publico-destaque h3 {
    color: white;
}

.landing-publico ul {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.landing-publico li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.93rem;
    line-height: 1.45;
}

.landing-publico-destaque li {
    color: rgba(255, 255, 255, 0.9);
}

.landing-publico li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--landing-turquesa);
    font-size: 1.1rem;
}

.landing-publico-destaque li svg {
    color: #6fd3e2;
}

.landing-publico > a {
    align-self: flex-start;
    margin-top: auto;
}

/* App */

.landing-secao-app {
    background: linear-gradient(180deg, #eef7fb 0%, #dff0f7 100%);
    overflow: hidden;
}

.landing-app {
    display: grid;
    grid-template-columns: 0.95fr 1.2fr 0.85fr;
    align-items: center;
    gap: 2rem;
}

.landing-app-texto p {
    max-width: 360px;
    margin: 1.4rem 0 1.75rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.landing-selo-play {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.4rem 0.7rem 1rem;
    border-radius: 12px;
    background: #0b0f14;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.landing-selo-play > svg {
    font-size: 2.1rem;
}

.landing-selo-play small {
    display: block;
    font-size: 0.72rem;
    opacity: 0.85;
}

.landing-selo-play strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.landing-app-celulares {
    position: relative;
    height: 500px;
}

.landing-app-celulares .celular {
    position: absolute;
}

.landing-app-celulares .celular:first-child {
    top: 0;
    left: 4%;
    z-index: 2;
    transform: rotate(-6deg);
}

.landing-app-celulares .celular:last-child {
    top: 32px;
    right: 4%;
    z-index: 1;
    transform: rotate(5deg);
}

.landing-lista-app {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-lista-app li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--landing-marinho);
}

.landing-lista-app-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: white;
    color: var(--landing-azul);
    font-size: 1.35rem;
    box-shadow: 0 4px 14px rgba(11, 37, 69, 0.1);
}

/* Chamada final */

.landing-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #0494ab 0%, #007c99 38%, #0b3d6e 100%);
    color: white;
}

.landing-cta::before {
    content: "";
    position: absolute;
    top: -140px;
    right: 18%;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.landing-cta-conteudo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
}

.landing-cta h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: white;
}

.landing-cta p {
    max-width: 560px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* Rodapé */

.landing-rodape {
    background: white;
}

.landing-rodape-conteudo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.landing-rodape nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.landing-rodape nav a {
    color: var(--landing-marinho);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.landing-rodape nav a:hover {
    color: var(--landing-turquesa);
}

.landing-rodape-copy {
    padding-top: 1.1rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid #e6edf2;
    font-size: 0.8rem;
    color: #6b7a88;
}

/* Responsivo */

@media (max-width: 1100px) {
    .landing-nav {
        gap: 1.2rem;
    }

    .landing-grade-categorias {
        grid-template-columns: repeat(4, 1fr);
    }

    .landing-app {
        grid-template-columns: 1fr 1fr;
    }

    .landing-app-celulares {
        order: 3;
        grid-column: 1 / -1;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .landing-nav {
        display: none;
    }

    .landing-hero-conteudo {
        grid-template-columns: 1fr;
        padding-top: 2.5rem;
    }

    .landing-hero-visual {
        width: 100%;
        max-width: 520px;
        height: 420px;
        margin: 0 auto;
    }

    .landing-destaques-conteudo {
        grid-template-columns: 1fr 1fr;
    }

    .landing-beneficios,
    .landing-publicos {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .landing-passos {
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }

    .landing-passo {
        max-width: none;
    }

    .landing-seta-passo {
        display: none;
    }

    .landing-cta-conteudo {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .landing-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .landing-navbar-conteudo {
        height: 62px;
        gap: 0.75rem;
    }

    .landing-marca img {
        width: 34px;
        height: 34px;
    }

    .landing-marca-nome {
        font-size: 1.15rem;
    }

    .landing-marca-slogan {
        display: none;
    }

    .landing-link-entrar {
        padding: 0.5rem 0.6rem;
    }

    .landing-form-busca {
        flex-direction: column;
    }

    .landing-hero-visual {
        height: 380px;
    }

    .landing-hero-visual .celular {
        left: 50%;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.82);
    }

    .landing-hero-visual .landing-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .landing-hero-visual .landing-avatar-5 {
        display: none;
    }

    .landing-callout {
        max-width: 200px;
        padding: 0.8rem 0.9rem;
        font-size: 0.82rem;
    }

    .landing-destaques-conteudo {
        gap: 1rem;
    }

    .landing-destaque {
        font-size: 0.8rem;
        gap: 0.6rem;
    }

    .landing-destaque svg {
        font-size: 1.7rem;
    }

    .landing-grade-categorias {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }

    .landing-categoria {
        min-height: 104px;
        font-size: 0.76rem;
    }

    .landing-categoria svg {
        font-size: 2rem;
    }

    .landing-grade-beneficios {
        grid-template-columns: 1fr;
    }

    .landing-secao {
        padding: 3rem 0;
    }

    .landing-publico {
        padding: 1.5rem;
    }

    .landing-app {
        grid-template-columns: 1fr;
    }

    .landing-app-celulares {
        height: 430px;
    }

    .landing-app-celulares .celular:first-child {
        left: 0;
        transform: rotate(-6deg) scale(0.84);
        transform-origin: top left;
    }

    .landing-app-celulares .celular:last-child {
        right: 0;
        transform: rotate(5deg) scale(0.84);
        transform-origin: top right;
    }

    .landing-botao-branco {
        width: 100%;
        box-sizing: border-box;
    }

    .landing-rodape-conteudo {
        flex-direction: column;
        align-items: flex-start;
    }
}