/*
 * Vigia Tributário. O nome físico preserva o identificador legado de acesso.
 *
 * Usa somente os tokens globais de root.css e o contrato cromático de app.css,
 * então acompanha os cinco temas sem regra por tema. As cores suaves saem de
 * color-mix() no ponto de uso, como no restante da plataforma.
 *
 * Breakpoints oficiais: 1320px (desktop intermediário), 980px (tablet) e
 * 760px (mobile).
 */

.vigia { display: grid; gap: var(--space-5); min-width: 0; }
/* O conteúdo das abas fica dentro de [data-vigia-panel], que não é filho direto de
   .vigia: sem esta regra o gap da página não alcançava as seções e elas encostavam
   umas nas outras. */
.vigia [data-vigia-panel] { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.vigia [data-vigia-panel] > * { min-width: 0; }
/* As competências do Geral contêm as mesmas seções da visão mensal. O corpo
   mantém o espaçamento da aba, inclusive entre base, regras e pendências. */
.vigia details.vigia-basis > summary { cursor: pointer; color: var(--ink); line-height: 1.5; }
.vigia details.vigia-basis > summary::marker { color: var(--accent-2); }
.vigia details.vigia-basis > summary > span {
    display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--font-size-sm);
}
.vigia details.vigia-basis[open] > summary {
    padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--line);
}
.vigia details.vigia-basis > div {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
    margin-top: var(--space-4); min-width: 0;
}
.vigia details.vigia-basis > div > * { min-width: 0; }
.vigia-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.vigia-header > div { min-width: 0; }
.vigia-simulator-link {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: var(--space-3); flex: 0 0 min(20rem, 34vw); min-height: var(--control-md);
    box-sizing: border-box; padding: 10px var(--space-4);
    border: var(--border-width) solid color-mix(in srgb, var(--accent-2) 45%, var(--line));
    border-radius: var(--radius-md); color: var(--ink);
    background: color-mix(in srgb, var(--accent-2) 7%, var(--surface));
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease,
                transform var(--motion-fast) ease;
}
.vigia-simulator-link:hover {
    border-color: var(--accent-2); color: var(--ink);
    background: color-mix(in srgb, var(--accent-2) 13%, var(--surface));
    transform: translateY(-1px);
}
.vigia-simulator-link > span:nth-child(2) { display: grid; min-width: 0; line-height: 1.25; }
.vigia-simulator-link strong { font-size: var(--font-size-sm); white-space: nowrap; }
.vigia-simulator-link small { color: var(--muted); font-size: var(--font-size-xs); }
.vigia-simulator-link__icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--accent-2); }
.vigia-simulator-link__arrow { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }

/*
 * Respiro interno das seções.
 *
 * A classe .panel de app.css só desenha borda, fundo e sombra: o espaçamento
 * interno é responsabilidade de cada tela. Sem esta regra, o primeiro texto de
 * "Empresa", "Base de cálculo" e "Fora de escopo" encosta na borda superior.
 */
.vigia-controls,
.vigia-basis,
.vigia-review-panel,
.vigia-skipped,
.vigia-history,
.vigia-empty { padding: var(--space-5); }

/* O selo BETA usa .beta-tag e .page-title-with-tag, definidas em app.css. */

.vigia-note {
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid color-mix(in srgb, var(--warning) 45%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    color: var(--muted); font-size: var(--font-size-sm); line-height: 1.5;
}
.vigia-note strong { color: var(--warning); }

/* ------------------------------------------------------------------ */
/* Controles                                                           */
/* ------------------------------------------------------------------ */
.vigia-controls {
    display: grid; align-items: end; gap: var(--space-3);
    grid-template-columns: minmax(11rem, 1.35fr) minmax(9rem, 0.85fr)
                           minmax(12rem, 1.35fr) minmax(9rem, 0.8fr) auto;
}
.vigia-controls label { display: grid; gap: var(--space-1); min-width: 0; }
.vigia-controls label span { color: var(--muted); font-size: var(--font-size-sm); }
.vigia-controls select,
.vigia-controls input[type="month"] {
    width: 100%; box-sizing: border-box; min-height: var(--control-sm);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font-family: var(--font-sans);
    font-size: var(--font-size-md);
}
.vigia-controls__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.vigia-controls__actions button { white-space: nowrap; }
.vigia-controls__hint {
    grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--font-size-xs);
}

/* ------------------------------------------------------------------ */
/* Veredito: a conclusão antes de qualquer detalhe                     */
/* ------------------------------------------------------------------ */
.vigia-verdict {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
    padding: var(--space-5); border: var(--border-width) solid var(--line);
    border-left: 0.25rem solid var(--muted); border-radius: var(--radius-md);
    background: var(--surface);
}
.vigia-verdict.is-critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.vigia-verdict.is-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.vigia-verdict.is-info { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--surface)); }

.vigia-verdict__main { min-width: 0; }
.vigia-verdict__label {
    display: block; margin-bottom: var(--space-1); font-size: var(--font-size-xs);
    font-weight: 600; letter-spacing: 0.05rem; text-transform: uppercase;
}
.vigia-verdict.is-critical .vigia-verdict__label { color: var(--danger); }
.vigia-verdict.is-warning .vigia-verdict__label { color: var(--warning); }
.vigia-verdict.is-info .vigia-verdict__label { color: var(--success); }
.vigia-verdict h2 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.vigia-verdict p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.5; }

.vigia-verdict__counters { display: flex; gap: var(--space-4); margin: 0; flex: 0 0 auto; }
.vigia-verdict__counters > div { text-align: center; min-width: 4.5rem; }
.vigia-verdict__counters dt { color: var(--muted); font-size: var(--font-size-xs); }
.vigia-verdict__counters dd { margin: var(--space-1) 0 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-2xl); }
.vigia-verdict__counters dd.is-critical { color: var(--danger); }
.vigia-verdict__counters dd.is-warning { color: var(--warning); }
.vigia-verdict__counters dd.is-info { color: var(--success); }

/* ------------------------------------------------------------------ */
/* Cabeçalhos de seção e base de cálculo                               */
/* ------------------------------------------------------------------ */
.vigia-section-heading { margin-bottom: var(--space-4); }
.vigia-section-heading > span {
    display: block; margin-bottom: var(--space-1); color: var(--accent-2);
    font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04rem; text-transform: uppercase;
}
.vigia-section-heading h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-lg); }
.vigia-section-heading p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.45; }

.vigia-basis__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.vigia-basis__grid article {
    display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-4);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.vigia-basis__grid span { color: var(--muted); font-size: var(--font-size-sm); }
.vigia-basis__grid strong { overflow-wrap: anywhere; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-lg); }
.vigia-basis__grid small { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.4; }
.vigia-basis__warning {
    margin: var(--space-3) 0 0; padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    color: var(--muted); font-size: var(--font-size-sm); line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Cartões de regra                                                    */
/* ------------------------------------------------------------------ */
.vigia-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.vigia-card {
    display: grid; align-content: start; gap: var(--space-3); min-width: 0;
    padding: var(--space-5); border: var(--border-width) solid var(--line);
    border-top: 0.1875rem solid var(--muted); border-radius: var(--radius-md);
    background: var(--surface);
}
.vigia-card.is-critical { border-top-color: var(--danger); }
.vigia-card.is-warning { border-top-color: var(--warning); }
.vigia-card.is-info { border-top-color: var(--success); }

.vigia-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vigia-card__rule { color: var(--muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04rem; text-transform: uppercase; }
.vigia-card h3 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-lg); }
.vigia-card__summary { margin: 0; color: var(--ink); font-size: var(--font-size-md); line-height: 1.55; }
.vigia-card__basis { margin: 0; padding-top: var(--space-2); border-top: var(--border-width) solid var(--line); color: var(--muted); font-size: var(--font-size-xs); }

/* Procedência do limiar. Fica discreta quando o parâmetro está em dia e ganha
   cor de alerta quando venceu ou foi personalizado, para que a ressalva seja
   percebida sem competir com o resultado. */
.vigia-parameter { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: var(--border-width) solid var(--line); }
.vigia-parameter__line { margin: 0; color: var(--muted); font-size: var(--font-size-xs); line-height: 1.45; }
.vigia-parameter__line strong { color: var(--ink); }
.vigia-parameter a { color: var(--accent-2); }
.vigia-parameter__notice {
    margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); color: var(--muted);
    font-size: var(--font-size-xs); line-height: 1.45;
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}
.vigia-parameter.is-unverified .vigia-parameter__notice { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

.vigia-pill {
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    font-size: var(--font-size-xs); font-weight: 600; white-space: nowrap;
}
.vigia-pill.is-critical { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.vigia-pill.is-warning { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning); }
.vigia-pill.is-info { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); }

/* ------------------------------------------------------------------ */
/* Barra de posição em relação ao limite                               */
/*                                                                     */
/* A trilha vai até 125% do limite e o marcador fica em 80% dela, para */
/* que ultrapassar apareça na barra e não só no texto. O elemento      */
/* progress preserva valores pequenos sem depender de estilo inline.   */
/* ------------------------------------------------------------------ */
.vigia-gauge { display: grid; gap: var(--space-2); }
.vigia-gauge__track {
    position: relative; height: 0.625rem; border-radius: var(--radius-pill);
    background: var(--surface-muted); overflow: visible;
}
.vigia-gauge__fill {
    display: block; width: 100%; height: 100%; overflow: hidden; appearance: none;
    -webkit-appearance: none; border: 0; border-radius: var(--radius-pill);
    color: var(--muted); background: transparent;
}
.vigia-gauge__fill::-webkit-progress-bar { border-radius: var(--radius-pill); background: transparent; }
.vigia-gauge__fill::-webkit-progress-value { border-radius: var(--radius-pill); background: currentColor; }
.vigia-gauge__fill::-moz-progress-bar { border-radius: var(--radius-pill); background: currentColor; }
.is-critical .vigia-gauge__fill { color: var(--danger); }
.is-warning .vigia-gauge__fill { color: var(--warning); }
.is-info .vigia-gauge__fill { color: var(--success); }

.vigia-gauge__marker { position: absolute; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); left: 80%; width: var(--border-width); background: var(--ink); }
.vigia-gauge__marker span {
    position: absolute; top: calc(var(--space-4) * -1); left: 50%; transform: translateX(-50%);
    color: var(--muted); font-size: var(--font-size-xs); white-space: nowrap;
}
.vigia-gauge__label { margin: 0; color: var(--muted); font-size: var(--font-size-sm); }

/* ------------------------------------------------------------------ */
/* Métricas, projeção, impacto e ação                                  */
/* ------------------------------------------------------------------ */
.vigia-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.vigia-metrics > div {
    display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.vigia-metrics dt { color: var(--muted); font-size: var(--font-size-xs); }
.vigia-metrics dd { margin: 0; overflow-wrap: anywhere; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-base); }
.vigia-metrics small { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.35; }

.vigia-projection {
    display: flex; align-items: flex-start; gap: var(--space-2); margin: 0;
    padding: var(--space-3); border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-2) 9%, var(--surface));
    color: var(--ink); font-size: var(--font-size-sm); line-height: 1.5;
}
.vigia-projection span[data-icon] { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); color: var(--accent-2); }

.vigia-impact {
    display: grid; gap: var(--space-1); padding: var(--space-4);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.vigia-impact.is-cost { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.vigia-impact > span { color: var(--muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.03rem; }
.vigia-impact strong { overflow-wrap: anywhere; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xl); }
.vigia-impact.is-cost strong { color: var(--danger); }
.vigia-impact small { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.45; }

.vigia-action { display: grid; gap: var(--space-1); padding-top: var(--space-2); }
.vigia-action > span { color: var(--accent-2); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.04rem; text-transform: uppercase; }
.vigia-action p { margin: 0; color: var(--ink); font-size: var(--font-size-sm); line-height: 1.55; }

.vigia-assumptions summary { color: var(--muted); font-size: var(--font-size-xs); cursor: pointer; }
.vigia-assumptions ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--muted); font-size: var(--font-size-xs); line-height: 1.55; }
.vigia-assumptions li + li { margin-top: var(--space-1); }

/* ------------------------------------------------------------------ */
/* Fora de escopo, histórico e estados vazios                          */
/* ------------------------------------------------------------------ */
.vigia-skipped ul, .vigia-history ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.vigia-skipped li {
    display: grid; gap: var(--space-1); padding: var(--space-3);
    border: var(--border-width) solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.vigia-skipped strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.vigia-skipped span { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.45; }

.vigia-history li {
    display: grid; align-items: center; gap: var(--space-2);
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 2fr) 6rem auto;
    padding: var(--space-3); border: var(--border-width) solid var(--line);
    border-left: 0.1875rem solid var(--muted); border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.vigia-history li.is-critical { border-left-color: var(--danger); }
.vigia-history li.is-warning { border-left-color: var(--warning); }
.vigia-history__date { color: var(--muted); font-size: var(--font-size-xs); }
.vigia-history__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-sm); }
.vigia-history__summary { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.4; }
.vigia-history__status { color: var(--muted); font-size: var(--font-size-xs); }
.vigia-history__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.vigia-history__actions .ghost-button { white-space: nowrap; }

.vigia-empty { display: grid; gap: var(--space-3); justify-items: start; }
.vigia-empty h2 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--font-size-lg); }
.vigia-empty p { margin: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 1.55; max-width: 60ch; }
.vigia-steps { margin: 0; padding-left: var(--space-5); color: var(--muted); font-size: var(--font-size-sm); line-height: 1.6; }
/* Ação isolada num painel largo: centralizada para não ficar órfã à esquerda.
   O texto acima segue alinhado à esquerda, que é o que se lê melhor. */
.vigia-empty__action {  margin-top: var(--space-2); }
.vigia-requirements { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.vigia-requirement { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; box-sizing: border-box; padding: var(--space-3); border: var(--border-width) solid color-mix(in srgb, var(--warning) 48%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.vigia-requirement.is-system { border-color: var(--line); background: var(--surface-muted); }
.vigia-requirement p { margin: 0; max-width: none; color: var(--ink); font-size: var(--font-size-sm); }
.vigia-requirement > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.vigia-requirement .primary-button { min-height: var(--control-sm); white-space: nowrap; }
.vigia-review-panel { display: grid; gap: var(--space-4); }

/* ------------------------------------------------------------------ */
/* Desktop intermediário                                               */
/* ------------------------------------------------------------------ */
@media (max-width: 82.5rem) {
    .vigia-basis__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vigia-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vigia-history li { grid-template-columns: 4.5rem minmax(0, 1fr) 6rem minmax(0, auto); }
    .vigia-history__summary { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 61.25rem) {
    .vigia-header { align-items: stretch; flex-direction: column; }
    .vigia-simulator-link { flex-basis: auto; width: min(100%, 24rem); }
    .vigia-grid { grid-template-columns: minmax(0, 1fr); }
    .vigia-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .vigia-controls__actions { grid-column: 1 / -1; }
    .vigia-verdict { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .vigia-verdict__counters { width: 100%; justify-content: space-between; }
    .vigia-basis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 47.5rem) {
    .vigia { gap: var(--space-4); }
    .vigia details.vigia-basis > div { gap: var(--space-4); }
    .vigia-simulator-link { width: 100%; }
    .vigia-controls { grid-template-columns: minmax(0, 1fr); }
    .vigia-controls__actions button { flex: 1 1 auto; }
    .vigia-controls,
    .vigia-basis,
    .vigia-review-panel,
    .vigia-skipped,
    .vigia-history,
    .vigia-empty { padding: var(--space-4); }
    .vigia-card { padding: var(--space-4); }
    .vigia-card__head { flex-wrap: wrap; }
    .vigia-metrics { grid-template-columns: minmax(0, 1fr); }
    .vigia-basis__grid { grid-template-columns: minmax(0, 1fr); }
    .vigia-verdict { padding: var(--space-4); }
    .vigia-verdict__counters { gap: var(--space-2); }
    .vigia-verdict__counters > div { min-width: 0; flex: 1 1 0; }
    .vigia-history li { grid-template-columns: minmax(0, 1fr); }
    .vigia-history__summary { grid-column: auto; }
    .vigia-history__actions { justify-content: stretch; }
    .vigia-history__actions .ghost-button { flex: 1 1 auto; }
    .vigia-empty p { max-width: none; }
    .vigia-requirement { display: grid; }
    .vigia-requirement > div { justify-content: stretch; }
    .vigia-requirement .primary-button { justify-content: center; }
}

/* Sem animação para quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
    .vigia-gauge__fill { transition: none; }
}