/* ==========================================================================
   Tokens visuais globais da Luna
   Define paleta blackout, amarelos da marca, tipografia e cores semanticas.
   ========================================================================== */
:root {
    --luna-font: "Verdana", sans-serif;
    --luna-bg: #050505;
    --luna-bg-soft: #050505;
    --luna-surface: #0c0c0d;
    --luna-panel: #141415;
    --luna-panel-soft: #1e1e1f;
    --luna-text: #f5f5f5;
    --luna-muted: var(--luna-text);
    --luna-accent: #dda437;
    --luna-accent-strong: #cc8931;
    --luna-accent-soft: #e29f47;
    --luna-accent-contrast: #111111;
    --luna-border: #dda437;
    --luna-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    --luna-danger: #942426;
    --luna-success: #40b84e;
}

/* Reset estrutural basico para manter a malha previsivel em todo o painel. */
* {
    box-sizing: border-box;
}

/* Garante que a aplicacao ocupe a altura total da viewport. */
html,
body {
    margin: 0;
    font-family: var(--luna-font);
    color: var(--luna-text);
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, rgba(1, 1, 1, 1));
}

/* Fundo geral do painel com atmosfera escura e brilho sutil da marca. */
body {
    margin: 0;
    font-family: var(--luna-font);
    color: var(--luna-text);
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, rgba(1, 1, 1, 1));
}

/* Links herdam cor do contexto e evitam sublinhado padrao. */
a {
    color: inherit;
    text-decoration: none;
}

/* Padroniza tipografia de elementos de formulario. */
button,
input,
select,
textarea {
    font: inherit;
}

/* Casca principal do app. */
.luna-shell {
    height: 100vh;
}

/* ==========================================================================
   Estrutura macro do painel
   Sidebar fixa na coluna da esquerda e main ocupa a coluna principal.
   ========================================================================== */
.luna-app {
}

.luna-main {
    display: grid;
    position: relative;
    width: 100%;
    padding-top: 45px;
    padding-left: 260px;
    padding-right: 30px;
    left: 0px;
    background-image: linear-gradient(#333333,#161616);
    min-height: calc(100vh);
    overflow: hidden;
}

/* Menu lateral explicitamente preso na primeira coluna, ou seja, lado esquerdo. */
.luna-sidebar {
	max-height: 90%;
	width: 200px;
	position: fixed;
	left: 15px;
	top: 45px;
	background-color: #151515;
	border-radius: 15px;
	overflow: hidden;
	z-index: 100;
}

/* ==========================================================================
   Containers principais
   Cards, painel central, topo e bloco lateral compartilham o mesmo acabamento.
   ========================================================================== */
.luna-sidebar-card,
.luna-panel,
.luna-card,
.luna-headline,
.luna-section-tabs,
.luna-panel-guest,
.luna-userbar {
    background-color: #151515;
    border-radius: 15px;
    margin-bottom: 15px;
}

/* Cartao da sidebar com empilhamento dos grupos de navegacao. */
.luna-sidebar-card {
    display: grid;
    height: max-content;
    width: 180px;
    margin: 10px auto;
    gap: 8px;
}

/* Barra de contexto superior do conteudo. */
.luna-headline {
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

/* Botao de sair com icone central e dupla camada circular. */
.luna-logout-form {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.luna-logout-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #6e6e6e;
    transition: all 0.3s;
}

.luna-logout-button i {
    color: #942426;
    font-size: 35px;
    transition: all 0.3s;
}

.luna-logout-button:hover {
    background-color: #f5f5f5;
}

.luna-logout-button:hover i{
    color: #940f11;
}

/* Botão de criar página com o mesmo padrão estrutural do logout. */
.luna-create-page-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin-right: 30px;
    padding: 0;
    border: none;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #6e6e6e;
    transition: all 0.3s;
}

.luna-create-page-ring {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.luna-create-page-button i{
    margin-top: 1px;
    color: #40b84e;
    font-size: 35px;
    transition: all 0.3s;
}

.luna-create-page-button:hover {
    background-color: #f5f5f5;
}

.luna-create-page-button:hover i{
    color: #2f8f3b;
}

/* Titulo principal da tela atual. */
.luna-headline h1 {
    margin: 6px 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--luna-text);
}

/* Painel branco/preto que recebe o conteudo de cada view. */
.luna-panel {
    padding: 10px;
}

/* Caixa usada nas telas guest, como login. */
.luna-panel-guest {
    max-width: 500px;
    margin: 10vh auto;
    padding: 30px;
}

/* Bloco com avatar e dados resumidos do usuario logado. */
.luna-profile {
    display: flex;
    align-items: center;
    height: auto;
    width: 180px;
    gap: 8px;
    overflow: hidden;
}

/* Avatar e selo de marca compartilham linguagem visual dourada. */

.luna-avatar-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
}
.luna-avatar-frame2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    height: auto;
    overflow: hidden;
}

.luna-avatar-image {
    min-width: 47px;
    min-height: 47px;
}

/* Textos secundarios em todo o sistema. */

.luna-profile strong {
    font-size: 12px;
    line-height: 1.2;
}

.luna-profile small {
    font-size: 8px;
    line-height: 1.2;
}
.luna-profile small,
.luna-muted,
.luna-card small {
    color: var(--luna-muted);
}

/* Trio de botoes utilitarios: Home, Minha conta e Settings. */
.luna-utility-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

/* Estados e transicoes compartilhados por botoes e abas de navegacao. */
.luna-utility-button,
.luna-side-link,
.luna-link-button,
.luna-section-tab,
.luna-inline-form button,
.luna-form button {
    border-radius: 10px;
    transition: transform 0.5s ease;
}

/* Botao utilitario do topo da sidebar. */
.luna-utility-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    border: 1px solid transparent;
    background: #111111;
    color: var(--luna-text);
    font-weight: 700;
}

/* Lista principal de modulos comerciais. */
.luna-side-nav {
    display: grid;
    gap: 8px;
}

/* Links verticais dos eixos comerciais do sistema. */
.luna-side-link {
	display: flex;
	height: 45px;
	width: 100%;
	align-items: center;
    justify-content: center;
	margin: 0px;
	color: #FFFFFF;
	font-size: 12pt;
    font-weight: normal;
	letter-spacing: 1px;
    text-align: center;
	text-overflow: clip!important;
	cursor: pointer;
	overflow: hidden;
	text-decoration: none;
    background-color: #111111;
}
.luna-side-link:hover {
    color: var(--luna-accent-contrast);
	background-color: var(--luna-muted);
    transition: all 0.5s;
}

/* Estado ativo da navegacao: dourado solido. */
.luna-side-link.is-active,
.luna-utility-button.is-active,
.luna-section-tab.is-active {
    background: linear-gradient(180deg, var(--luna-accent), var(--luna-accent-strong));
    color: var(--luna-accent-contrast);
    border-color: transparent;
}

/* Assinatura visual da marca no rodape da sidebar. */
.luna-brand-block {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
}
.luna-brand-block img{
	height: auto;
	max-height: 200px;
	width: 180px;
	margin: auto;
}

/* ==========================================================================
   Navegacao interna por secao
   Tabs horizontais como Artigos/Categorias/Comentarios ou equivalentes.
   ========================================================================== */
.luna-section-tabs {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* Aba individual de uma secao. */
.luna-section-tab {
    padding: 12px 16px;
    border: 1px solid var(--luna-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--luna-text);
    font-weight: 700;
}

/* Layouts utilitarios de espacamento e grade. */
.luna-stack {
    display: grid;
    gap: 18px;
}

/* Casca global de cabecalho das views (eyebrow + h2 + subtitulo). */
.luna-view-shell {
    padding-top: 18px;
    row-gap: 18px;
}

.luna-view-shell > .luna-eyebrow:first-child {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--luna-accent);
}

.luna-view-shell > h2:nth-child(2) {
    margin: 0;
    font-size: 1.44rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--luna-text);
}

.luna-view-shell > p.luna-muted:nth-child(3) {
    margin: 0;
    max-width: 78ch;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--luna-text);
}

/* Pequeno rotulo superior de contexto. */
.luna-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.5;
    font-size: 10px;
    font-weight: normal;
    color: var(--luna-accent);
}

/* Grade responsiva generica. */
.luna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 5px;
}

/* Grade para duas colunas principais. */
.luna-grid-halves {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Grade para KPIs e resumos menores. */
.luna-grid-meta {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Card padrao do painel. */
.luna-card {
    padding: 12px;
    background-color: #202020;
    border-radius: 10px;
    font-size: 0.94rem;
}

/* Espacamento consistente em cards que nao usam .luna-stack. */
.luna-card:not(.luna-stack) > * + * {
    margin-top: 10px;
}

/* Rotulo e titulo padronizados para todos os modulos. */
.luna-card > small {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.luna-card > h3 {
    font-size: 1.06rem;
    line-height: 1.25;
    color: var(--luna-text);
}

/* Titulos internos sem margem extra. */
.luna-card h3,
.luna-stack h2,
.luna-stack h3 {
    margin: 0;
}

/* ==========================================================================
   Formularios
   Campos, fieldsets, botoes e ajuda contextual (i).
   ========================================================================== */
.luna-form {
    display: grid;
    gap: 15px;
}

/* Linha horizontal para filtros e acoes rapidas. */
.luna-form-inline {
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto;
    align-items: end;
}

/* Label acima do campo com espacamento consistente. */
.luna-form label {
    display: grid;
    gap: 3px;
}

/* Aparencia padrao dos inputs do painel. */
.luna-form input,
.luna-form select,
.luna-form textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(221, 164, 55, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: var(--luna-text);
}

/* Placeholder mais discreto. */
.luna-form input::placeholder,
.luna-form textarea::placeholder {
    color: rgba(243, 241, 234, 0.45);
}

/* Textareas sempre redimensionaveis na vertical. */
.luna-form textarea {
    resize: vertical;
    min-height: 130px;
}

/* Fieldsets usados para agrupamentos como categorias e permissoes. */
.luna-fieldset {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--luna-border);
    border-radius: 18px;
    display: grid;
    gap: 14px;
}

/* Titulo do agrupamento. */
.luna-fieldset legend {
    padding: 0 8px;
    color: var(--luna-accent);
}

/* Container do texto do label com o icone de ajuda. */
.ui-field-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--luna-text);
    font-weight: 700;
}

/* Texto principal do label. */
.ui-field-text {
    line-height: 1.3;
}

/* Bolha (i) que mostra a explicacao do campo. */
.ui-field-help {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(221, 164, 55, 0.28);
    background: rgba(221, 164, 55, 0.14);
    color: var(--luna-accent);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
}

/* Tooltip que exibe a descricao do campo. */
.ui-field-help::after {
    content: attr(data-help);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 220px;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #202020;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px);
    font-size: 0.82rem;
    line-height: 1.5;
    font-weight: 500;
    z-index: 3;
}

/* Exibe o tooltip ao hover ou foco por teclado. */
.ui-field-help:hover::after,
.ui-field-help:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Botoes principais do sistema e links-botao no mesmo padrao. */
.luna-form button,
.luna-inline-form button,
.luna-link-button {
    display: flex;
    height: 45px;
    width: 150px;
    margin: 10px auto;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12pt;
    letter-spacing: 1px;
    cursor: pointer;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    background-color: var(--luna-accent);
    outline: none;
    text-decoration: none;
    transition: all 0.5s;
}

.luna-form button:hover,
.luna-inline-form button:hover,
.luna-link-button:hover {
    background-color: var(--luna-accent-strong);
    transition: all 0.5s;
}

/* ==========================================================================
   Feedback e dados tabulares
   Alertas, tabelas, badges e areas de acao.
   ========================================================================== */
.luna-alert {
    width: auto;
    margin: 10px auto;
    padding: 10px 15px;
    border-radius: 10px;
    background: rgba(148, 36, 38, 0.8);
    color: #ffc6c6;
    border: 1px solid rgba(148, 36, 38, 0.9);
}

/* Variacao positiva para salvamentos e sucesso. */
.luna-alert-success {
    background: #40b84e;
    color: #cff7d3;
    border-color: #1f8b2b;
}

/* Wrapper com scroll horizontal para tabelas largas. */
.luna-table-wrap {
    overflow-x: auto;
}

/* Tabela padrao do painel. */
.luna-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--luna-border);
    border-radius: 20px;
    overflow: hidden;
}

/* Celulas e cabecalhos. */
.luna-table th,
.luna-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid rgba(221, 164, 55, 0.08);
    vertical-align: top;
}

/* Cabecalho em caixa alta dourada. */
.luna-table th {
    color: var(--luna-accent);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Remove a borda da ultima linha. */
.luna-table tbody tr:last-child td {
    border-bottom: none;
}

/* Celula de comentario longo. */
.luna-comment-cell {
    min-width: 320px;
    line-height: 1.6;
}

/* Pre-visualizacao de arquivo/imagem na area de midia. */
.luna-media-preview {
    border: 1px solid var(--luna-border);
    border-radius: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    min-height: 260px;
    display: grid;
    place-items: center;
}

/* Miniatura quadrada em listas de mídia (sem distorção). */
.luna-media-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--luna-border);
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.luna-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.luna-media-thumb i {
    font-size: 1.2rem;
    color: var(--luna-accent);
}
/* Imagem renderizada dentro do preview. */
.luna-media-preview img {
    max-width: 100%;
    max-height: 360px;
    border-radius: 12px;
}

/* Fallback visual quando o arquivo nao e imagem. */
.luna-media-fallback {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: rgba(221, 164, 55, 0.16);
    color: var(--luna-accent);
    font-weight: 700;
    text-transform: uppercase;
}

/* Formularios compactos embutidos em linhas de tabela. */
.luna-inline-form {
    margin: 0;
}

/* Grupo flexível de botões e ações. */
.luna-action-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}

/* Em listas/tabelas, as ações permanecem lado a lado. */
.luna-table .luna-action-group {
    justify-content: flex-start;
}
/* Selo visual de status. */
.luna-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Estado ativo. */
.luna-badge.is-active {
    background: rgba(64, 184, 78, 0.16);
    color: #c8f2cc;
}

/* Estado inativo/arquivado. */
.luna-badge.is-inactive {
    background: rgba(148, 36, 38, 0.16);
    color: #ffc6c6;
}

/* Estado informativo, como homepage. */
.luna-badge.is-info {
    background: rgba(221, 164, 55, 0.16);
    color: #ffd97c;
}

/* Listas auxiliares com espacamento interno. */
.luna-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 12px;
}

/* Texto auxiliar de itens listados. */
.luna-list small {
    display: block;
    color: var(--luna-muted);
    margin-top: 4px;
}

/* Cabecalho de secao com CTA lateral. */
.luna-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Cartao clicavel para checkbox/radio visual. */
.luna-checkbox-card {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* Tamanho controlado do checkbox. */
.luna-checkbox-card input {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Blocos de destaque
   Hero cards, KPIs e estados vazios.
   ========================================================================== */
.luna-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3px;
}

/* Card de destaque com mais respiracao. */
.luna-hero-card {
    min-height: 180px;
}

/* KPI com numero forte e apoio textual. */
.luna-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

/* Numero principal do KPI. */
.luna-kpi strong {
    font-size: 2.2rem;
    color: var(--luna-accent);
}

/* Estado vazio padrao das telas. */
.luna-empty-state {
    padding: 26px;
    border: 1px dashed rgba(221, 164, 55, 0.18);
    border-radius: 20px;
    color: var(--luna-muted);
    background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   Responsividade
   Em telas menores a sidebar sobe e o painel vira coluna unica.
   ========================================================================== */
@media (max-width: 1100px) {
    body {
        overflow: auto;
    }

    .luna-shell {
        height: auto;
        min-height: 100vh;
    }

    .luna-app {
        height: auto;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    /* No mobile/tablet a sidebar deixa de ficar lateral e sobe para o topo. */
    .luna-sidebar {
        grid-column: 1;
        grid-row: auto;
        position: static;
        top: auto;
        height: auto;
        overflow: visible;
        order: -1;
    }

    .luna-main {
        display: flex;
        position: relative;
        width: calc(100vh-200px);
        padding-top: 50px;
        left: 280px;
        min-height: calc(100vh);
        background-color: #942426;
        overflow: visible;
    }
}
@media (max-width: 860px) {
    /* Topo interno empilha para caber bem em dispositivos menores. */
    .luna-headline {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Formularios inline viram coluna unica. */
    .luna-form-inline {
        grid-template-columns: 1fr;
    }

    /* Bordas um pouco mais fechadas no mobile. */
    .luna-panel,
    .luna-sidebar-card,
    .luna-headline,
    .luna-panel-guest,
    .luna-section-tabs {
        border-radius: 22px;
    }
}

/* Padronizacao global de acoes e mensagens flutuantes */
.luna-create-button {
    min-width: 0;
    width: auto;
    height: auto;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #22c55e;
}

.luna-action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    color: #ffffff;
}

.luna-action-icon.is-view {
    background: #22c55e;
    color: #ffffff;
}

.luna-action-icon.is-edit {
    background: #dda437;
    color: #ffffff;
}

.luna-action-icon.is-danger {
    background: #c42525;
    color: #ffffff;
}

.luna-action-icon.is-module-on {
    background: rgba(33, 115, 240, 0.2);
    color: #1f73f0;
}

.luna-action-icon.is-module-off {
    background: rgba(122, 129, 141, 0.2);
    color: #5f6878;
}

.luna-status-icon {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.luna-status-icon.is-ok {
    color: var(--luna-text);
}

.luna-status-icon.is-ok i {
    color: #1f8b2b;
}

.luna-status-icon.is-no {
    color: var(--luna-text);
}

.luna-status-icon.is-no i {
    color: #c42525;
}

.luna-toast-host {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: grid;
    gap: 3px;
    width: 100%;
    
    pointer-events: none;
}

.luna-toast {
    position: relative;
    width: 100%;
    pointer-events: auto;
    transform: translateY(0);
    opacity: 0.8;
}

.luna-toast .luna-alert {
    margin: 0;
    position: relative;
    width: 100%;
    border-radius: 0;
    padding-right: 44px;
}

.luna-toast-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid currentColor;
    cursor: pointer;
    font-size: 1em;
    font-weight: normal;
    background-color: transparent;
    color: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.luna-toast.is-entering {
    animation: lunaToastDown 0.32s ease forwards;
}

.luna-toast.is-hiding {
    animation: lunaToastUp 0.3s ease forwards;
}

@keyframes lunaToastDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lunaToastUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* Scroll override */
.luna-shell {
    min-height: 100vh;
    height: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

.luna-main {
    height: auto;
    min-height: calc(100vh - 30px);
    overflow-y: visible;
}

/* Lista unica de modulos com versao. */
.luna-module-version-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.luna-module-version-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

.luna-module-version-list code {
    font-size: 0.76rem;
    color: var(--luna-accent);
}

/* Card KPI com valor principal destacado e centralizado. */
.luna-kpi-card {
    gap: 12px;
}

.luna-card > h3.luna-kpi-value {
    --luna-kpi-sub-size: 1.5rem;
    --luna-kpi-main-size: calc(var(--luna-kpi-sub-size) * 2);
    font-size: var(--luna-kpi-main-size);
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Grade de subcards de apoio abaixo do KPI principal. */
.luna-kpi-subgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.luna-kpi-subcard {
    border: 1px solid var(--luna-muted);
    border-radius: 10px;
    padding: 5px 10px;
    background: transparent;
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.luna-kpi-subcard small {
    text-align: center;
}

.luna-kpi-subvalue {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;
}

.luna-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0px;
    border-radius: 5px;
}

.luna-kpi-label.is-active {
    color: #22c55e;
    background-color: rgba(34, 197, 94, 0.14);
    padding: 5px 3px;
    text-align: center;
}

.luna-kpi-label.is-inactive {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.14);
    padding: 5px 3px;
    text-align: center;
}

.luna-kpi-label.is-accent {
    color: var(--luna-accent);
    background-color: rgba(221, 164, 55, 0.14);
    padding: 5px 3px;
    text-align: center;
}

/* Padrao reutilizavel de espacamento para paineis em cards. */
.luna-panel-section {
    padding-top: 8px;
}

/* Quando a secao usa o cabecalho global, preserva o respiro padrao. */
.luna-view-shell.luna-panel-section {
    padding-top: 18px;
}

.luna-panel-section :is(.luna-grid, .luna-hero-grid) {
    align-items: stretch;
}

.luna-panel-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}

.luna-panel-card .luna-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 14px;
}

.luna-panel-card .luna-form label {
    margin-top: 8px;
}

.luna-panel-card .luna-form button,
.luna-panel-card .luna-action-group {
    margin-top: auto;
}

/* Dados textuais do bloco de conta. */
.luna-account-data {
    margin-top: 8px;
    margin-bottom: 14px;
    display: grid;
    gap: 8px;
}

.luna-account-data p {
    margin: 0;
    line-height: 1.35;
}

/* Ajuste fino para texto descritivo em settings. */
.luna-settings .luna-settings-card p {
    margin: 0;
}

.luna-action-icon i {
    color: #ffffff;
}

.luna-action-icon.luna-create-button i {
    color: #22c55e;
    font-size: 1.8rem;
}






.luna-action-icon.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}



/* Em formularios inline, os icones de acao permanecem quadrados (30x30). */
.luna-inline-form .luna-action-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
}




/* Toolbar de usuários: busca e novo usuário na mesma linha. */
.luna-users-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 8px;
    align-items: end;
}

.luna-users-toolbar .luna-create-page-button {
    margin-right: 0;
}

/* Botão Buscar com o mesmo padrão estrutural do botão Nova página. */
.luna-form .luna-search-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #6e6e6e;
    transition: all 0.3s;
}

.luna-search-button-ring {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.luna-form .luna-search-button i {
    color: #6fa8ff;
    font-size: 26px;
    transition: all 0.3s;
}

.luna-form .luna-search-button:hover,
.luna-form .luna-search-button:focus-visible {
    background-color: #f5f5f5;
}

.luna-form .luna-search-button:hover i,
.luna-form .luna-search-button:focus-visible i {
    color: #1f4ea3;
}

/* Linha de usuário com miniatura + dados. */
.luna-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.luna-user-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}