/* =========================================================================
   Agilitto Studio — identidade "Esmeralda & Coral"
   As cores espelham o MudTheme em Components/Layout/PilatesTheme.cs.
   Os nomes das variáveis (--pl-*) foram mantidos por compatibilidade.
   ========================================================================= */

:root {
    --pl-eucalipto: #0B8566;          /* esmeralda (primária) */
    --pl-eucalipto-escuro: #07684F;
    --pl-eucalipto-vivo: #19C58F;
    --pl-eucalipto-claro: #D8F6EA;
    --pl-floresta: #062A22;           /* fundo do menu */
    --pl-floresta-2: #0B3D31;
    --pl-argila: #F2542D;             /* coral (destaque) */
    --pl-argila-claro: #FFE5DC;
    --pl-areia: #FFE8C7;
    --pl-ouro: #F59E0B;               /* âmbar */
    --pl-ouro-claro: #FFF1D6;
    --pl-violeta: #7B61FF;
    --pl-violeta-claro: #ECE8FF;
    --pl-azul: #2F80ED;
    --pl-azul-claro: #E1EDFE;
    --pl-linho: #F7F6F2;
    --pl-linho-2: #EEEDE7;
    --pl-superficie: #FFFFFF;
    --pl-linha: #E3E3DC;
    --pl-texto: #11201B;
    --pl-texto-2: #55625C;
    --pl-erro: #E5484D;

    --pl-gradiente: linear-gradient(135deg, #0B8566 0%, #19C58F 55%, #7EE0B5 100%);
    --pl-gradiente-quente: linear-gradient(135deg, #F2542D 0%, #FF8A4C 60%, #F59E0B 100%);

    --pl-sidebar: 268px;
    --pl-raio: 18px;
    --pl-sombra: 0 1px 2px rgba(17,32,27,.05), 0 6px 20px rgba(17,32,27,.06);
    --pl-sombra-alta: 0 18px 50px rgba(6,42,34,.18);
    --pl-sombra-cor: 0 10px 30px rgba(11,133,102,.28);
    --pl-fonte-texto: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --pl-fonte-titulo: 'Fraunces', Georgia, serif;

    --pl-ease: cubic-bezier(.22,1,.36,1);
    --pl-ease-mola: cubic-bezier(.34,1.56,.64,1);

    /* Menu lateral: trocados pelo tema do studio (texto escuro quando o menu é claro). */
    --pl-menu-texto: rgba(255,255,255,.8);
    --pl-menu-texto-forte: #fff;
    --pl-menu-texto-suave: rgba(255,255,255,.6);
    --pl-menu-destaque: #7EE0B5;
    --pl-menu-grupo: rgba(126,224,181,.55);
    --pl-menu-realce: rgba(255,255,255,.08);
    --pl-menu-ativo: rgba(25,197,143,.28);
    --pl-menu-ativo-fim: rgba(25,197,143,.06);
    --pl-menu-brilho-1: rgba(25,197,143,.28);
    --pl-menu-brilho-2: rgba(242,84,45,.2);
}

html, body {
    font-family: var(--pl-fonte-texto);
    background: var(--pl-linho);
    color: var(--pl-texto);
    -webkit-font-smoothing: antialiased;
}

html {
    scroll-behavior: smooth;
}

a, .btn-link {
    color: var(--pl-eucalipto);
}

h1:focus {
    outline: none;
}

::selection {
    background: var(--pl-eucalipto-claro);
    color: var(--pl-floresta);
}

/* =========================================================================
   Animações (keyframes compartilhados)
   ========================================================================= */
@keyframes pl-sobe {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes pl-surge {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pl-pop {
    0% { opacity: 0; transform: scale(.92) translateY(10px); }
    100% { opacity: 1; transform: none; }
}

@keyframes pl-desliza-esq {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: none; }
}

@keyframes pl-respira {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.07); }
}

@keyframes pl-flutua {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-14px) rotate(2deg); }
}

@keyframes pl-brilho {
    from { transform: translateX(-120%) skewX(-20deg); }
    to { transform: translateX(260%) skewX(-20deg); }
}

@keyframes pl-pulso {
    0% { box-shadow: 0 0 0 0 rgba(25,197,143,.55); }
    70% { box-shadow: 0 0 0 10px rgba(25,197,143,0); }
    100% { box-shadow: 0 0 0 0 rgba(25,197,143,0); }
}

@keyframes pl-gradiente-move {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pl-cresce-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Entrada das telas: cada bloco do conteúdo sobe em cascata.
   O script estudio.js reaplica a classe a cada navegação. */
.pl-entrada > * {
    animation: pl-sobe .6s var(--pl-ease) both;
}

    .pl-entrada > *:nth-child(1) { animation-delay: .02s; }
    .pl-entrada > *:nth-child(2) { animation-delay: .08s; }
    .pl-entrada > *:nth-child(3) { animation-delay: .14s; }
    .pl-entrada > *:nth-child(4) { animation-delay: .20s; }
    .pl-entrada > *:nth-child(5) { animation-delay: .26s; }
    .pl-entrada > *:nth-child(6) { animation-delay: .32s; }
    .pl-entrada > *:nth-child(n+7) { animation-delay: .38s; }

/* Itens de grade (MudGrid) também entram em cascata. */
.pl-entrada .mud-grid > .mud-grid-item {
    animation: pl-pop .55s var(--pl-ease) both;
}

    .pl-entrada .mud-grid > .mud-grid-item:nth-child(1) { animation-delay: .10s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(2) { animation-delay: .16s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(3) { animation-delay: .22s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(4) { animation-delay: .28s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(5) { animation-delay: .34s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(6) { animation-delay: .40s; }
    .pl-entrada .mud-grid > .mud-grid-item:nth-child(n+7) { animation-delay: .46s; }

/* Linhas de tabela surgem uma a uma. */
.mud-table-body .mud-table-row,
.mud-simple-table tbody tr {
    animation: pl-desliza-esq .45s var(--pl-ease) both;
}

    .mud-table-body .mud-table-row:nth-child(1), .mud-simple-table tbody tr:nth-child(1) { animation-delay: .04s; }
    .mud-table-body .mud-table-row:nth-child(2), .mud-simple-table tbody tr:nth-child(2) { animation-delay: .08s; }
    .mud-table-body .mud-table-row:nth-child(3), .mud-simple-table tbody tr:nth-child(3) { animation-delay: .12s; }
    .mud-table-body .mud-table-row:nth-child(4), .mud-simple-table tbody tr:nth-child(4) { animation-delay: .16s; }
    .mud-table-body .mud-table-row:nth-child(5), .mud-simple-table tbody tr:nth-child(5) { animation-delay: .20s; }
    .mud-table-body .mud-table-row:nth-child(6), .mud-simple-table tbody tr:nth-child(6) { animation-delay: .24s; }
    .mud-table-body .mud-table-row:nth-child(7), .mud-simple-table tbody tr:nth-child(7) { animation-delay: .28s; }
    .mud-table-body .mud-table-row:nth-child(8), .mud-simple-table tbody tr:nth-child(8) { animation-delay: .32s; }
    .mud-table-body .mud-table-row:nth-child(n+9), .mud-simple-table tbody tr:nth-child(n+9) { animation-delay: .36s; }

.mud-table-body .mud-table-row {
    transition: background-color .2s, box-shadow .2s;
}

    .mud-table-body .mud-table-row:hover {
        box-shadow: inset 3px 0 0 var(--pl-eucalipto-vivo);
    }

/* =========================================================================
   Menu lateral
   ========================================================================= */
.nav-estudio .nav-grupo {
    padding: 20px 14px 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pl-menu-grupo);
}

.nav-estudio .mud-nav-item {
    animation: pl-desliza-esq .5s var(--pl-ease) both;
}

    .nav-estudio .mud-nav-item:nth-of-type(2) { animation-delay: .04s; }
    .nav-estudio .mud-nav-item:nth-of-type(3) { animation-delay: .08s; }
    .nav-estudio .mud-nav-item:nth-of-type(4) { animation-delay: .12s; }

.nav-estudio .mud-nav-link {
    position: relative;
    border-radius: 12px;
    margin: 2px 0;
    padding: 10px 14px;
    color: var(--pl-menu-texto);
    font-weight: 600;
    transition: background .25s var(--pl-ease), color .2s, transform .25s var(--pl-ease);
}

    .nav-estudio .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background: var(--pl-menu-realce);
        color: var(--pl-menu-texto-forte);
        transform: translateX(4px);
    }

        .nav-estudio .mud-nav-link:hover .mud-nav-link-icon {
            color: var(--pl-menu-destaque) !important;
            transform: scale(1.12);
        }

    .nav-estudio .mud-nav-link.active:not(.mud-nav-link-disabled) {
        background: linear-gradient(90deg, var(--pl-menu-ativo), var(--pl-menu-ativo-fim));
        color: var(--pl-menu-texto-forte) !important;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(126,224,181,.25);
    }

        .nav-estudio .mud-nav-link.active::before {
            content: "";
            position: absolute;
            left: -12px;
            top: 50%;
            width: 4px;
            height: 22px;
            margin-top: -11px;
            border-radius: 0 4px 4px 0;
            background: var(--pl-eucalipto-vivo);
            box-shadow: 0 0 12px var(--pl-eucalipto-vivo);
        }

        .nav-estudio .mud-nav-link.active .mud-nav-link-icon {
            color: var(--pl-menu-destaque) !important;
        }

.nav-estudio .mud-nav-link-icon {
    color: var(--pl-menu-texto-suave) !important;
    font-size: 1.25rem;
    transition: transform .25s var(--pl-ease-mola), color .2s;
}

/* =========================================================================
   Superfícies
   ========================================================================= */
.mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-snackbar) {
    border-radius: var(--pl-raio);
}

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-table.mud-elevation-1,
.mud-card.mud-elevation-1 {
    box-shadow: var(--pl-sombra);
    border: 1px solid rgba(227,227,220,.8);
    transition: box-shadow .3s var(--pl-ease), transform .3s var(--pl-ease);
}

.mud-card.mud-elevation-1:hover,
.mud-paper.mud-elevation-1:hover {
    box-shadow: 0 2px 4px rgba(17,32,27,.05), 0 16px 36px rgba(17,32,27,.09);
}

.mud-card.mud-elevation-1:hover {
    transform: translateY(-4px);
}

.mud-paper-outlined {
    border-color: var(--pl-linha) !important;
}

/* Diálogos entram com "mola". */
.mud-dialog {
    border-radius: 22px !important;
    box-shadow: var(--pl-sombra-alta) !important;
    animation: pl-pop .42s var(--pl-ease-mola) both;
}

    .mud-dialog .mud-dialog-title {
        font-family: var(--pl-fonte-titulo);
        font-weight: 600;
        padding-top: 22px;
    }

        .mud-dialog .mud-dialog-title,
        .mud-dialog .mud-dialog-title .mud-typography {
            font-family: var(--pl-fonte-titulo);
            font-size: 1.4rem;
            font-weight: 700;
        }

    .mud-dialog .mud-dialog-actions {
        padding: 12px 20px 18px;
    }

.mud-overlay-dark {
    backdrop-filter: blur(3px);
    animation: pl-surge .3s ease both;
}

.mud-popover {
    border-radius: 14px !important;
    box-shadow: var(--pl-sombra-alta) !important;
}

    .mud-popover.mud-popover-open {
        animation: pl-surge .2s ease both;
    }

.mud-snackbar {
    border-radius: 14px !important;
    animation: pl-pop .4s var(--pl-ease-mola) both;
}

/* =========================================================================
   Tabelas
   ========================================================================= */
.mud-table-head .mud-table-cell,
.mud-simple-table thead th {
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pl-eucalipto-escuro) !important;
    background: #F1FAF6;
}

.mud-table-toolbar {
    padding-top: 12px;
    padding-bottom: 8px;
}

.mud-table-pagination-toolbar {
    border-top: 1px solid var(--pl-linha);
}

/* =========================================================================
   Botões, chips, campos
   ========================================================================= */
.mud-button-root.mud-button {
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    transition: transform .2s var(--pl-ease), box-shadow .25s var(--pl-ease), background-color .2s;
}

    .mud-button-root.mud-button:hover {
        transform: translateY(-2px);
    }

    .mud-button-root.mud-button:active {
        transform: translateY(0) scale(.98);
    }

.mud-button-filled.mud-button-filled-primary {
    position: relative;
    overflow: hidden;
    background: var(--pl-gradiente) !important;
    background-size: 160% 160% !important;
    box-shadow: var(--pl-sombra-cor);
}

    /* Reflexo de luz ao passar o mouse. */
    .mud-button-filled.mud-button-filled-primary::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
        transform: translateX(-120%) skewX(-20deg);
        pointer-events: none;
    }

    .mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: 0 14px 34px rgba(11,133,102,.38);
        animation: pl-gradiente-move 3s ease infinite;
    }

        .mud-button-filled.mud-button-filled-primary:hover::after {
            animation: pl-brilho .8s ease;
        }

.mud-button-filled.mud-button-filled-secondary {
    background: var(--pl-gradiente-quente) !important;
    box-shadow: 0 10px 26px rgba(242,84,45,.3);
}

.mud-icon-button {
    transition: transform .25s var(--pl-ease-mola), background-color .2s;
}

    .mud-icon-button:hover {
        transform: scale(1.12);
    }

.mud-chip {
    border-radius: 999px;
    font-weight: 700;
    animation: pl-pop .4s var(--pl-ease-mola) both;
}

.mud-alert {
    border-radius: 14px;
    animation: pl-pop .45s var(--pl-ease) both;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.mud-input.mud-input-outlined.mud-input-adorned-start:focus-within .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    box-shadow: 0 0 0 4px rgba(25,197,143,.15);
}

.mud-tabs-toolbar {
    background: transparent !important;
}

.mud-tab {
    text-transform: none;
    font-weight: 700;
    transition: color .2s, background-color .2s;
}

.mud-tab-slider {
    height: 3px !important;
    border-radius: 3px;
    background: var(--pl-gradiente) !important;
}

.mud-progress-linear.mud-progress-linear-rounded {
    border-radius: 999px;
}

.mud-progress-linear .mud-progress-linear-bar {
    transform-origin: left;
}

.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background: var(--pl-gradiente);
}

.mud-avatar {
    transition: transform .3s var(--pl-ease-mola);
}

    .mud-avatar:hover {
        transform: scale(1.08) rotate(-3deg);
    }

/* =========================================================================
   Utilitários
   ========================================================================= */
.pl-page-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pl-argila);
    margin-bottom: 6px;
}

.pl-texto-gradiente {
    background: var(--pl-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* As páginas usam MudText Color.Secondary como "texto discreto"; no tema a secundária
   é o coral, então o texto mantém o cinza e o coral fica para botões/chips. */
.mud-typography.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* ---------- Validação (formularios estaticos) ---------- */
.validation-message {
    color: var(--pl-erro);
    font-size: .78rem;
}

.blazor-error-boundary {
    background: var(--pl-erro);
    padding: 1rem 1.25rem;
    color: white;
    border-radius: 12px;
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro ao exibir este conteúdo.";
    }

/* ---------- Scrollbar discreta ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(17,32,27,.22) transparent;
}

.shell-nav {
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

/* ---------- Revelar ao rolar (landing) ---------- */
[data-revelar] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--pl-ease), transform .8s var(--pl-ease);
    transition-delay: var(--atraso, 0s);
}

    [data-revelar].revelado {
        opacity: 1;
        transform: none;
    }

/* Acessibilidade: quem prefere menos movimento vê tudo estático. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    [data-revelar] {
        opacity: 1;
        transform: none;
    }
}

/* Landing: elementos decorativos (faixa inclinada, blobs) não geram rolagem lateral. */
.landing-raiz {
    overflow-x: clip;
}

/* =========================================================================
   Densidade compacta (personalização do studio)
   ========================================================================= */
.densidade-compacta .mud-table-dense .mud-table-cell,
.densidade-compacta .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

.densidade-compacta .nav-estudio .mud-nav-link {
    padding: 7px 12px;
}

.densidade-compacta .mud-input-control {
    margin-top: 4px;
}

/* =========================================================================
   Padrões de tela (usados com CabecalhoPagina e Secao)
   ========================================================================= */

/* Abas de página como barra de navegação: <MudTabs Class="pl-abas" PanelClass="pl-abas-painel"> */
.pl-abas > .mud-tabs-tabbar {
    padding: 6px;
    border-radius: 16px;
    background: var(--pl-superficie) !important;
    border: 1px solid var(--pl-linha);
    box-shadow: var(--pl-sombra);
}

.pl-abas .mud-tab {
    min-height: 44px;
    border-radius: 12px;
    margin-right: 4px;
    color: var(--pl-texto-2);
    transition: background .2s, color .2s;
}

    .pl-abas .mud-tab:hover {
        background: #F1FAF6;
        color: var(--pl-eucalipto-escuro);
    }

    .pl-abas .mud-tab.mud-tab-active {
        color: #fff;
        background: var(--pl-gradiente);
        box-shadow: 0 6px 16px rgba(11,133,102,.3);
    }

        .pl-abas .mud-tab.mud-tab-active .mud-icon-root {
            color: #fff;
        }

.pl-abas .mud-tab-slider {
    display: none;
}

.pl-abas-painel {
    padding: 24px 0 0;
    animation: pl-sobe .45s var(--pl-ease) both;
}

/* Tabelas dentro de uma Secao vão de borda a borda, sem moldura própria. */
.secao .mud-table,
.secao .mud-simple-table {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
}

    .secao .mud-table .mud-table-toolbar {
        padding: 14px 22px;
        border-bottom: 1px solid var(--pl-linha);
        background: var(--pl-superficie-2);
    }

.secao .mud-table-cell:first-child {
    padding-left: 22px;
}

.secao .mud-table-cell:last-child {
    padding-right: 22px;
}

/* Grade de blocos lado a lado. */
.pl-grade-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.pl-grade-lateral {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.pl-pilha > * + * {
    margin-top: 24px;
}

@media (max-width: 1023.98px) {
    .pl-grade-2,
    .pl-grade-lateral {
        grid-template-columns: 1fr;
    }
}

/* Barra de filtros dentro de uma Secao. */
.pl-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Blocos lado a lado não recebem o espaçamento de "bloco empilhado". */
.pl-grade-2 > .secao,
.pl-grade-lateral > .secao,
.plano-grade > .secao,
.regional > .secao {
    margin-top: 0 !important;
}

/* ---------------------------------------------------------------- gráficos (SVG leve)
   Séries: slots 1 e 2 da paleta de referência validada (azul/laranja, seguros para daltonismo).
   Texto usa sempre os tokens de texto; a cor fica só na marca. */
:root {
    --viz-serie-1: #2a78d6;
    --viz-serie-2: #eb6834;
    --viz-grade: #E6E5DF;
    --viz-superficie: #FFFFFF;
}

.viz { width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-eixo { font-size: 11px; fill: var(--pl-texto-2); font-family: inherit; }
.viz-grade { stroke: var(--viz-grade); stroke-width: 1; }
.viz-marca { transition: opacity .15s; }
.viz-marca:hover { opacity: .8; }
.viz-alvo { fill: transparent; }
.viz-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: .8rem; color: var(--pl-texto-2); }
.viz-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.viz-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.viz-dados { margin-top: 6px; font-size: .8rem; color: var(--pl-texto-2); }
.viz-dados summary { cursor: pointer; }
.viz-dados table { border-collapse: collapse; margin-top: 6px; }
.viz-dados th, .viz-dados td { padding: 2px 10px 2px 0; text-align: left; color: var(--pl-texto); }

/* Barra de filtros acima de relatórios e listas. */
.pl-barra-filtros {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--pl-superficie);
    border: 1px solid var(--pl-linha);
    box-shadow: var(--pl-sombra);
    animation: pl-sobe .45s var(--pl-ease) both;
}

.pl-barra-filtros-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pl-eucalipto-escuro);
    background: var(--pl-eucalipto-claro);
}

/* Barra de navegação do calendário da agenda (visão, período e filtros). */
.agenda-barra {
    margin: -6px 0 18px !important;
    padding: 10px 14px;
    border-radius: 14px;
    background: #F4FBF8;
    border: 1px solid #DDEFE7;
}

/* =========================================================================
   Dashboard (Painel)
   ========================================================================= */
.secao.altura-cheia {
    height: 100%;
}

.painel-vazio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px dashed #D5DCD8;
    background: var(--pl-superficie-2);
    font-size: .85rem;
    color: var(--pl-texto-2);
}

.secao-corpo-cheio > .painel-vazio {
    margin: 18px 22px;
}

    .painel-vazio .mud-icon-root {
        flex: none;
        color: #9FB3AA;
    }

.ocupacao-dia {
    display: grid;
    grid-template-columns: 70px 1fr 110px;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 10px;
}

.ocupacao-hoje {
    background: #F1FAF6;
}

.ocupacao-rotulo {
    font-weight: 700;
    font-size: .82rem;
    text-transform: capitalize;
    color: var(--pl-texto);
}

.ocupacao-valor {
    text-align: right;
    font-size: .8rem;
    color: var(--pl-texto-2);
}

    .ocupacao-valor strong {
        color: var(--pl-texto);
    }

.aniversarios {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
}

    .aniversarios li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border-radius: 12px;
        transition: background .2s;
    }

        .aniversarios li:hover {
            background: #FFF8EC;
        }

.aniversario-dia {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-family: var(--pl-fonte-titulo);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    color: #9A5B00;
    background: var(--pl-ouro-claro);
}

    .aniversario-dia small {
        font-family: var(--pl-fonte-texto);
        font-size: .6rem;
        font-weight: 800;
        text-transform: uppercase;
    }

.aniversario-nome {
    flex: 1;
    min-width: 0;
    color: var(--pl-texto);
    text-decoration: none;
}

    .aniversario-nome strong,
    .aniversario-nome small {
        display: block;
    }

    .aniversario-nome small {
        color: var(--pl-texto-2);
    }

.aniversario-hoje .aniversario-dia {
    color: #fff;
    background: var(--pl-gradiente-quente);
    box-shadow: 0 6px 16px rgba(242,84,45,.35);
}

.aniversario-selo {
    font-size: 1.3rem;
    animation: pl-respira 2.4s ease-in-out infinite;
}

/* =========================================================================
   Layout configurável (preferências do usuário: data-* no <html>)
   ========================================================================= */

/* ---------- Busca no menu lateral ---------- */
.shell-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 0 12px 6px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

    .shell-busca:hover {
        background: rgba(255,255,255,.11);
        border-color: rgba(126,224,181,.35);
        color: #fff;
    }

.shell-busca-texto {
    flex: 1;
    text-align: left;
}

.shell-busca kbd {
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
}

button.shell-logout {
    border: 0;
    background: transparent;
    cursor: pointer;
}

button.shell-menu-btn {
    border: 0;
    background: transparent;
}

/* ---------- Menu compacto: trilho de ícones que se expande ao passar o mouse ---------- */
@media (min-width: 960px) {
    html[data-menu="compacto"] {
        --pl-sidebar: 78px;
    }

        html[data-menu="compacto"] .shell-sidebar {
            width: 78px;
            overflow: hidden;
            transition: width .35s var(--pl-ease), box-shadow .35s;
        }

            html[data-menu="compacto"] .shell-sidebar:hover,
            html[data-menu="compacto"] .shell-sidebar:focus-within {
                width: 268px;
                box-shadow: 20px 0 50px rgba(6,42,34,.3);
            }

            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-brand > span,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-busca-texto,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-busca kbd,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .mud-nav-link-text,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-user-info,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-studio,
            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-user .shell-logout {
                display: none;
            }

            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .nav-grupo {
                height: 1px;
                margin: 12px 10px;
                padding: 0;
                overflow: hidden;
                background: rgba(255,255,255,.12);
                color: transparent;
            }

            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-brand {
                padding-left: 18px;
            }

            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-busca {
                justify-content: center;
            }

            html[data-menu="compacto"] .shell-sidebar:not(:hover):not(:focus-within) .shell-user {
                justify-content: center;
                padding: 8px;
            }

    html[data-menu="compacto"] .shell-main {
        margin-left: 78px;
    }
}

/* ---------- Largura do conteúdo ---------- */
html[data-largura="ampla"] .shell-content {
    max-width: none;
}

/* ---------- Estilo dos blocos ---------- */
html[data-blocos="contorno"] .secao,
html[data-blocos="contorno"] .kpi,
html[data-blocos="contorno"] .indicador,
html[data-blocos="contorno"] .pl-barra-filtros,
html[data-blocos="contorno"] .pl-abas > .mud-tabs-tabbar {
    box-shadow: none !important;
    border: 1.5px solid #D5DCD8 !important;
}

html[data-blocos="vidro"] .secao,
html[data-blocos="vidro"] .kpi,
html[data-blocos="vidro"] .indicador,
html[data-blocos="vidro"] .pl-barra-filtros,
html[data-blocos="vidro"] .pl-abas > .mud-tabs-tabbar {
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 8px 32px rgba(6,42,34,.08) !important;
}

    html[data-blocos="vidro"] .secao .secao-cabecalho {
        background: rgba(255,255,255,.35);
    }

/* O vidro precisa de algo atrás: sem aurora, usa um degradê suave fixo. */
html[data-blocos="vidro"]:not([data-fundo="aurora"]) .shell {
    background:
        radial-gradient(60% 50% at 90% 0%, rgba(126,224,181,.35), transparent 70%),
        radial-gradient(50% 50% at 20% 100%, rgba(207,196,255,.4), transparent 70%),
        var(--pl-linho);
    background-attachment: fixed;
}

/* ---------- Fundo aurora ---------- */
.pl-aurora {
    display: none;
}

html[data-fundo="aurora"] .shell {
    background: transparent;
}

/* O body tem fundo próprio (app.css) e seria pintado por cima da camada z-index:-1. */
html[data-fundo="aurora"] body {
    background: transparent !important;
}

html[data-fundo="aurora"] .pl-aurora {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--pl-linho);
    pointer-events: none;
}

    html[data-fundo="aurora"] .pl-aurora span {
        position: absolute;
        width: 55vw;
        height: 55vw;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .45;
        animation: pl-aurora 24s ease-in-out infinite alternate;
    }

        html[data-fundo="aurora"] .pl-aurora span:nth-child(1) { background: #7EE0B5; top: -20vw; right: -10vw; }
        html[data-fundo="aurora"] .pl-aurora span:nth-child(2) { background: #CFC4FF; bottom: -25vw; left: 10vw; animation-delay: -8s; }
        html[data-fundo="aurora"] .pl-aurora span:nth-child(3) { background: #FFC9B3; top: 30vh; right: 25vw; width: 35vw; height: 35vw; animation-delay: -16s; opacity: .35; }

@keyframes pl-aurora {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vw, 4vh) scale(1.12); }
    100% { transform: translate(5vw, -3vh) scale(.95); }
}

/* ---------- Animações ---------- */
html[data-animacoes="suaves"] *,
html[data-animacoes="suaves"] *::before,
html[data-animacoes="suaves"] *::after {
    animation-iteration-count: 1 !important;
    animation-duration: .25s !important;
    animation-delay: 0s !important;
}

html[data-animacoes="desligadas"] *,
html[data-animacoes="desligadas"] *::before,
html[data-animacoes="desligadas"] *::after {
    animation: none !important;
    transition: none !important;
}

html[data-animacoes="desligadas"] [data-revelar] {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   Elementos novos
   ========================================================================= */

/* ---------- Barra de leitura e voltar ao topo ---------- */
.pl-progresso-leitura {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    height: 3px;
    background: var(--pl-gradiente);
    transform-origin: left;
    transform: scaleX(var(--leitura, 0));
    pointer-events: none;
}

.pl-topo {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 1400;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pl-linha);
    border-radius: 14px;
    background: var(--pl-superficie);
    color: var(--pl-texto);
    box-shadow: var(--pl-sombra);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(.9);
    pointer-events: none;
    transition: opacity .3s, transform .35s var(--pl-ease-mola), background .2s;
}

html.pl-rolou .pl-topo {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.pl-topo:hover {
    background: var(--pl-eucalipto-claro);
}

/* ---------- Ações rápidas (speed dial) ---------- */
.pl-acoes-rapidas {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1450;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    /* Só o botão abre o menu: a lista invisível não pode capturar o mouse (antes abria só de passar perto). */
    pointer-events: none;
}

.pl-acoes-botao {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    background: var(--pl-gradiente);
    background-size: 160% 160%;
    box-shadow: 0 14px 34px rgba(11,133,102,.45);
    cursor: pointer;
    animation: pl-gradiente-move 6s ease infinite;
    transition: transform .4s var(--pl-ease-mola), border-radius .3s;
}

    .pl-acoes-botao .mud-icon-root {
        font-size: 1.8rem;
        transition: transform .4s var(--pl-ease-mola);
    }

.pl-acoes-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 10px; /* ponte entre a lista e o botão: o menu não fecha no caminho */
    pointer-events: none;
}

    .pl-acoes-lista > a,
    .pl-acoes-lista > button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 6px 6px 14px;
        border: 0;
        border-radius: 999px;
        background: var(--pl-superficie);
        box-shadow: 0 10px 26px rgba(6,42,34,.18);
        font: inherit;
        font-size: .85rem;
        font-weight: 700;
        color: var(--pl-texto);
        text-decoration: none;
        cursor: pointer;
        opacity: 0;
        transform: translateY(14px) scale(.85);
        transition: opacity .25s, transform .35s var(--pl-ease-mola);
        transition-delay: calc(var(--i) * 40ms);
    }

        .pl-acoes-lista > a .mud-icon-root,
        .pl-acoes-lista > button .mud-icon-root {
            padding: 7px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            color: #fff;
            background: var(--pl-gradiente);
        }

        .pl-acoes-lista > a:hover,
        .pl-acoes-lista > button:hover {
            color: var(--pl-eucalipto-escuro);
        }

.pl-acoes-rapidas:hover .pl-acoes-lista,
.pl-acoes-rapidas:focus-within .pl-acoes-lista {
    pointer-events: auto;
}

    .pl-acoes-rapidas:hover .pl-acoes-lista > *,
    .pl-acoes-rapidas:focus-within .pl-acoes-lista > * {
        opacity: 1;
        transform: none;
    }

.pl-acoes-rapidas:hover .pl-acoes-botao,
.pl-acoes-rapidas:focus-within .pl-acoes-botao {
    border-radius: 50%;
}

    .pl-acoes-rapidas:hover .pl-acoes-botao .mud-icon-root,
    .pl-acoes-rapidas:focus-within .pl-acoes-botao .mud-icon-root {
        transform: rotate(135deg);
    }

@media print {
    .pl-acoes-rapidas, .pl-topo, .pl-progresso-leitura, .pl-aurora { display: none !important; }
}

/* ---------- Paleta de comandos (Ctrl+K) ---------- */
.pl-paleta-fundo {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(6,42,34,.4);
    backdrop-filter: blur(4px);
    animation: pl-surge .2s ease both;
}

.pl-paleta {
    width: min(620px, 100%);
    overflow: hidden;
    border-radius: 20px;
    background: var(--pl-superficie);
    box-shadow: 0 30px 80px rgba(6,42,34,.35);
    animation: pl-pop .35s var(--pl-ease-mola) both;
}

.pl-paleta-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pl-linha);
}

    .pl-paleta-busca svg {
        flex: none;
        width: 22px;
        height: 22px;
        fill: var(--pl-eucalipto);
    }

    .pl-paleta-busca input {
        flex: 1;
        border: 0;
        outline: 0;
        font: inherit;
        font-size: 1.05rem;
        color: var(--pl-texto);
        background: transparent;
    }

.pl-paleta-lista {
    max-height: 50vh;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
}

    .pl-paleta-lista li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        cursor: pointer;
        animation: pl-desliza-esq .3s var(--pl-ease) both;
    }

        .pl-paleta-lista li[aria-selected="true"] {
            background: #F1FAF6;
            box-shadow: inset 3px 0 0 var(--pl-eucalipto-vivo);
        }

.pl-paleta-icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--pl-eucalipto-escuro);
    background: var(--pl-eucalipto-claro);
}

    .pl-paleta-icone svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

.pl-paleta-texto {
    flex: 1;
}

    .pl-paleta-texto strong {
        display: block;
        font-size: .92rem;
        color: var(--pl-texto);
    }

    .pl-paleta-texto small {
        color: var(--pl-texto-2);
    }

.pl-paleta-vazio {
    padding: 24px;
    text-align: center;
    color: var(--pl-texto-2);
}

.pl-paleta-rodape {
    display: flex;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid var(--pl-linha);
    font-size: .74rem;
    color: var(--pl-texto-2);
    background: var(--pl-superficie-2);
}

    .pl-paleta-rodape kbd {
        padding: 1px 6px;
        border-radius: 6px;
        border: 1px solid var(--pl-linha);
        background: var(--pl-superficie);
        font-family: inherit;
        font-weight: 700;
        color: var(--pl-texto);
        box-shadow: none;
    }

/* ---------- Inclinação 3D nos cartões [data-inclinar] (ângulos vêm de estudio.js) ---------- */
[data-inclinar] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) !important;
    transition: transform .25s ease-out, box-shadow .3s, border-color .3s;
}

    [data-inclinar]:hover {
        --ty: -5px;
    }

/* ---------- Esqueleto de carregamento ---------- */
.pl-esqueleto {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #ECEDE8;
}

    .pl-esqueleto::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
        animation: pl-esqueleto 1.4s ease-in-out infinite;
    }

@keyframes pl-esqueleto {
    to { transform: translateX(100%); }
}

/* =========================================================================
   Cores configuráveis (Configurações > Aparência). Padrões do tema; o layout
   sobrescreve com as cores do studio (TemaStudio.VariaveisCss).
   ========================================================================= */
:root {
    --pl-superficie-2: #FCFCFA;

    --tom-esmeralda-forte: #0B8566;
    --tom-esmeralda-vivo: #19C58F;
    --tom-esmeralda-claro: #D8F6EA;
    --tom-coral-forte: #D63E19;
    --tom-coral-vivo: #FF8A4C;
    --tom-coral-claro: #FFE5DC;
    --tom-violeta-forte: #5B3FE0;
    --tom-violeta-vivo: #7B61FF;
    --tom-violeta-claro: #ECE8FF;
    --tom-ambar-forte: #C77700;
    --tom-ambar-vivo: #F59E0B;
    --tom-ambar-claro: #FFF1D6;
    --tom-azul-forte: #1F6BD6;
    --tom-azul-vivo: #4C9AFF;
    --tom-azul-claro: #E1EDFE;
}

body {
    color: var(--pl-texto);
}