/* =============================================================================
   Skeleton de carregamento de página (#73) — ESCOPADO ao conteúdo central
   (.app-main). NÃO cobre o menu/sidebar nem o header fixos (diretiva do dono):
   eles permanecem visíveis enquanto só o conteúdo central carrega/transiciona.
   Exibido enquanto a página carrega; escondido por JS quando o DOM está pronto.
   Self-contained (shimmer próprio), funciona em mobile/tablet/desktop.
   ============================================================================= */

@keyframes app-page-skeleton-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* Overlay confinado ao .app-main (position: relative). Visível por padrão (até o JS
   marcar a página como pronta). Robustez: se o JS falhar, um fallback de animação
   esconde o overlay após 8s para nunca travar a tela. */
.app-page-skeleton {
    --app-page-skeleton-surface: var(--color-surface, #ffffff);
    --app-page-skeleton-block: var(--color-surface-100, #f1f5f9);
    --app-page-skeleton-border: var(--color-surface-200, #e2e8f0);
    --app-page-skeleton-highlight: rgba(255, 255, 255, 0.88);

    position: absolute;
    inset: 0;
    z-index: 80;
    color-scheme: light;
    background: var(--app-page-skeleton-surface);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem clamp(1rem, 4vw, 2rem);
    overflow: hidden;
    animation: app-page-skeleton-failsafe 0s linear 8s forwards;
}

@keyframes app-page-skeleton-failsafe {
    to { opacity: 0; visibility: hidden; }
}

/* Página pronta / em telas sem JS já-carregado: esconde o overlay. */
html.page-ready .app-page-skeleton,
.app-page-skeleton[hidden] {
    display: none !important;
}

html.page-loading .app-page-skeleton {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

html.page-loading .app-main .field-info-button {
    z-index: auto;
}

html.page-loading .field-tooltip-layer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Blocos do skeleton com shimmer. */
.app-page-skeleton__block {
    position: relative;
    overflow: hidden;
    background: var(--app-page-skeleton-block);
    border: 1px solid var(--app-page-skeleton-border);
    border-radius: 10px;
}

.app-page-skeleton__block::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        var(--app-page-skeleton-highlight) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: app-page-skeleton-sweep 1.3s ease-in-out infinite;
}

@keyframes app-page-skeleton-sweep {
    100% { transform: translateX(100%); }
}

.app-page-skeleton__bar { height: 56px; }
.app-page-skeleton__sidebar { flex: 0 0 240px; height: 100%; }
.app-page-skeleton__row { height: 18px; }
.app-page-skeleton__row--short { width: 40%; }
.app-page-skeleton__row--medium { width: 65%; }
.app-page-skeleton__card { height: 110px; }

.app-page-skeleton__body {
    display: flex;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
}

.app-page-skeleton__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-page-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.app-page-skeleton__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* TABLET */
@media (max-width: 992px) {
    .app-page-skeleton__grid { grid-template-columns: repeat(2, 1fr); }
    .app-page-skeleton__sidebar { flex-basis: 180px; }
}

/* MOBILE: sem sidebar, cards em coluna única, padding menor. */
@media (max-width: 640px) {
    .app-page-skeleton { padding: 0.875rem; gap: 0.75rem; }
    .app-page-skeleton__sidebar { display: none; }
    .app-page-skeleton__grid { grid-template-columns: 1fr; }
    .app-page-skeleton__bar { height: 48px; }
}

/* Respeita preferência de movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
    .app-page-skeleton__block::after { animation: none; }
}