/* =====================================================================
   PEO — Fase 13: KPIs / Indicadores
   Lista agrupada por FCS, cards com valores + barra de progresso.
   ===================================================================== */

.kpi-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kpi-grupo {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}
.kpi-grupo-head {
    padding: 0.85rem 1.1rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kpi-grupo-head.bsc-financeira                 { border-left-color: var(--color-success, #10b981); }
.kpi-grupo-head.bsc-clientes                   { border-left-color: var(--color-info, #0ea5e9); }
.kpi-grupo-head.bsc-processos-internos         { border-left-color: var(--color-warning, #d97706); }
.kpi-grupo-head.bsc-aprendizado-e-crescimento  { border-left-color: #8b5cf6; }

.kpi-grupo-fcs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.kpi-grupo-codigo {
    background: var(--text-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.kpi-grupo-nome {
    flex: 1;
    min-width: 200px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.kpi-grupo-obj {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.kpi-grupo-obj strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.kpi-grupo-cards {
    padding: 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
}

/* ========= Card de KPI ========= */
.kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.kpi-card:hover {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-sm);
}
.kpi-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kpi-codigo {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.kpi-titulo {
    flex: 1;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.kpi-descricao {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Valores em grid */
.kpi-valores {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
}
@media (max-width: 420px) { .kpi-valores { grid-template-columns: 1fr; } }
.kpi-v {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpi-v .lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kpi-v .num {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Barra de progresso */
.kpi-prog {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
}
.kpi-prog-bar {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.kpi-prog-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}
.kpi-prog-bar.ok     .kpi-prog-fill { background: var(--color-success, #10b981); }
.kpi-prog-bar.atencao .kpi-prog-fill { background: var(--color-warning, #d97706); }
.kpi-prog-bar.baixo   .kpi-prog-fill { background: var(--color-danger, #dc2626); }
.kpi-prog-num {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 42px;
    text-align: right;
}

/* Chips de tipo/classificação/periodicidade */
.kpi-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.kpi-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.kpi-resp {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.kpi-resp i { font-size: 0.72rem; }

.kpi-acoes {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
}
.kpi-acoes .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
}
.kpi-acoes .kpi-btn-excluir { color: var(--color-danger, #dc2626); }
.kpi-acoes .kpi-btn-excluir:hover { background: #fef2f2; border-color: var(--color-danger, #dc2626); }

/* ========= Modal de medição ========= */
.medicao-hist {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.medicao-hist-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}
.medicao-hist-vazio {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
}
.medicao-hist-load {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.medicao-hist-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.medicao-hist-tabela th,
.medicao-hist-tabela td {
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
}
.medicao-hist-tabela th {
    background: var(--bg-surface-alt);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.medicao-hist-tabela tr:last-child td { border-bottom: none; }
.medicao-hist-tabela td strong { color: var(--text-primary); font-weight: 600; }

/* =====================================================
   sigla.sigla-help — variante do tooltip para labels do form.
   Visual de "?" arredondado discreto ao lado do label.
   Reaproveita o data-explica do sigla.css padrao (mesmo tooltip preto).
   ===================================================== */
.sigla-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: 1px solid var(--text-muted, #64748b) !important;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sigla-help:hover,
.sigla-help:focus {
    background: var(--text-primary, #0f172a);
    color: #fff;
    border-color: var(--text-primary, #0f172a) !important;
}

/* =====================================================
   Modal de medição — bloco read-only de contexto do KPI.
   Aparece no topo do modal pra ancorar a leitura do número.
   ===================================================== */
.med-contexto {
    background: var(--bg-surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 3px solid var(--text-muted, #64748b);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.med-contexto-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.med-contexto-head i { color: var(--text-muted, #64748b); font-size: 0.9rem; }
.med-contexto-head strong {
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.med-contexto-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    font-style: italic;
    margin-left: auto;
}
.med-contexto-formula {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
}
.med-contexto-formula .lbl {
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.med-contexto-formula .val {
    font-size: 0.86rem;
    color: var(--text-primary, #0f172a);
    line-height: 1.45;
    font-style: italic;
}
.med-contexto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
}
.med-ctx-campo { display: flex; flex-direction: column; gap: 2px; }
.med-ctx-campo .lbl {
    font-size: 0.66rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.med-ctx-campo .val {
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
    font-weight: 600;
    line-height: 1.35;
}
.med-ctx-campo.med-ctx-resp { grid-column: span 3; }
@media (max-width: 640px) {
    .med-contexto-grid { grid-template-columns: 1fr 1fr; }
    .med-ctx-campo.med-ctx-resp { grid-column: span 2; }
}

/* Sub-bloco "Contrato da meta" — regras temporais */
.med-ctx-contrato {
    margin-top: 12px;
    padding: 10px 12px 12px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-left: 3px solid #6366f1;
    border-radius: 6px;
}
.med-ctx-contrato-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.72rem;
    color: #4338ca;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.med-ctx-contrato-head i { font-size: 0.8rem; }
.med-ctx-contrato .med-contexto-grid {
    margin-top: 0;
    gap: 8px 14px;
}
.med-ctx-contrato .med-ctx-campo .lbl {
    color: #6366f1;
}
.med-ctx-contrato .med-ctx-campo .val {
    color: #1e293b;
    font-weight: 600;
}
.med-ctx-contrato .med-ctx-modo-agg { grid-column: span 3; }
@media (max-width: 640px) {
    .med-ctx-contrato .med-ctx-modo-agg { grid-column: span 2; }
}

/* Contador "N med." inline na tabela de periodos */
.periodo-qtd {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 100px;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: help;
    vertical-align: middle;
}

/* Linha "Última medição: X · +delta" abaixo do campo Valor medido */
.med-delta {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}
.med-delta i { font-size: 0.72rem; margin-right: 2px; }
.med-delta strong { color: var(--text-primary, #0f172a); font-weight: 700; }
.med-delta-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.med-delta-tag.pos { background: #f0fdf4; color: #15803d; border: 1px solid #15803d; }
.med-delta-tag.neg { background: #fef2f2; color: #b91c1c; border: 1px solid #b91c1c; }
.med-delta-tag.neu { background: #f1f5f9; color: #475569; border: 1px solid #94a3b8; }

/* =====================================================
   Acoes inline na tabela de historico (Editar / Excluir / Ver alteracoes)
   ===================================================== */
.medicao-hist-tabela .hist-acoes-th { text-align: right; width: 110px; }
.medicao-hist-tabela .hist-acoes {
    text-align: right;
    white-space: nowrap;
}
.hist-btn {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hist-btn:hover { background: var(--bg-surface-alt, #f8fafc); color: var(--text-primary, #0f172a); border-color: var(--text-muted, #64748b); }
.hist-btn-editar:hover { color: #2563eb; border-color: #2563eb; }
.hist-btn-audit:hover  { color: #7c3aed; border-color: #7c3aed; }
.hist-btn-excluir:hover { color: #b91c1c; border-color: #b91c1c; background: #fef2f2; }

/* =====================================================
   Modal de auditoria — trilha de alteracoes de medicao
   ===================================================== */
.audit-vazio {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-style: italic;
}
.audit-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.audit-item {
    background: var(--bg-surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 3px solid var(--text-muted, #64748b);
    border-radius: 8px;
    padding: 12px 14px;
}
.audit-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.audit-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.audit-tag-pos { background: #f0fdf4; color: #15803d; border: 1px solid #15803d; }
.audit-tag-edt { background: #eff6ff; color: #2563eb; border: 1px solid #2563eb; }
.audit-tag-neg { background: #fef2f2; color: #b91c1c; border: 1px solid #b91c1c; }
.audit-tag-neu { background: #f1f5f9; color: #475569; border: 1px solid #94a3b8; }
.audit-quem {
    font-size: 0.85rem;
    color: var(--text-primary, #0f172a);
    font-weight: 600;
}
.audit-quem i { color: var(--text-muted, #64748b); margin-right: 4px; font-size: 0.75rem; }
.audit-quando {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.audit-contexto {
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
    font-style: italic;
    margin: 4px 0 8px;
    padding-left: 4px;
    border-left: 2px solid var(--border-color, #e2e8f0);
}
.audit-diff {
    background: #fff;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 6px;
}
.audit-campo {
    display: grid;
    grid-template-columns: 110px 1fr 20px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    padding: 4px 0;
}
.audit-campo + .audit-campo { border-top: 1px dashed var(--border-color, #e2e8f0); }
.audit-campo-nome {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.audit-antes {
    color: #b91c1c;
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.4);
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 4px;
    word-break: break-word;
}
.audit-campo i {
    color: var(--text-muted, #64748b);
    text-align: center;
}
.audit-depois {
    color: #15803d;
    background: #f0fdf4;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    word-break: break-word;
}
@media (max-width: 640px) {
    .audit-campo { grid-template-columns: 1fr; gap: 4px; }
    .audit-campo i { display: none; }
    .audit-quando { margin-left: 0; width: 100%; }
}

/* =====================================================
   Bloco "Analise do indicador" no modal de medicao
   ===================================================== */
.med-analise {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 18px 0;
}
.med-analise-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.med-analise-head i { color: #6366f1; font-size: 0.95rem; }
.med-analise-head strong {
    font-size: 0.88rem;
    color: var(--text-primary, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.med-analise-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    font-style: italic;
    margin-left: auto;
}

.med-analise-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.med-analise-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 3px solid var(--text-muted, #94a3b8);
    border-radius: 8px;
    padding: 12px 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.med-analise-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
}
.med-analise-card.tone-verde    { border-left-color: #15803d; }
.med-analise-card.tone-amarelo  { border-left-color: #d97706; }
.med-analise-card.tone-vermelho { border-left-color: #b91c1c; }
.med-analise-card.tone-neutro   { border-left-color: #94a3b8; }

.med-analise-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.med-analise-card-head i { font-size: 0.85rem; }
.med-analise-card.tone-verde    .med-analise-card-head i { color: #15803d; }
.med-analise-card.tone-amarelo  .med-analise-card-head i { color: #d97706; }
.med-analise-card.tone-vermelho .med-analise-card-head i { color: #b91c1c; }
.med-analise-card.tone-neutro   .med-analise-card-head i { color: #94a3b8; }
.med-analise-card-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}
.med-analise-card-valor {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 2px 0 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.med-analise-card.tone-verde    .med-analise-card-valor { color: #15803d; }
.med-analise-card.tone-amarelo  .med-analise-card-valor { color: #d97706; }
.med-analise-card.tone-vermelho .med-analise-card-valor { color: #b91c1c; }
.med-analise-card.tone-neutro   .med-analise-card-valor { color: var(--text-muted, #94a3b8); font-size: 1rem; font-style: italic; }
.med-analise-card-sub {
    font-size: 0.78rem;
    color: var(--text-secondary, #475569);
    line-height: 1.5;
}
.med-analise-card-sub strong { color: var(--text-primary, #0f172a); }

.med-analise-vazio {
    padding: 18px;
    background: #f1f5f9;
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.5;
}

/* Grafico SVG temporal */
.med-analise-grafico-wrap {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 14px 16px;
}
.med-analise-grafico-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.med-analise-grafico-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}
.med-analise-legenda {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-secondary, #475569);
}
.med-analise-legenda .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}
.med-analise-legenda .dot.atual { background: #6366f1; }
.med-analise-legenda .dot.meta  { background: #d97706; }
.med-analise-legenda .dot.ritmo { background: #94a3b8; border: 1px dashed #94a3b8; background: transparent; }

.med-analise-grafico {
    width: 100%;
    overflow-x: auto;
}
.med-analise-grafico svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
}
.med-analise-grafico-vazio {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-style: italic;
    font-size: 0.85rem;
}

/* Estilos internos do SVG */
.grafico-eixo        { stroke: #cbd5e1; stroke-width: 1; }
.grafico-label       { font-family: inherit; font-size: 11px; fill: #64748b; }
.grafico-meta-linha  { stroke: #d97706; stroke-width: 2; stroke-dasharray: 6 4; }
.grafico-meta-label  { font-family: inherit; font-size: 11px; fill: #d97706; font-weight: 600; }
.grafico-ritmo-linha { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.grafico-hoje        { stroke: #6366f1; stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.grafico-hoje-label  { font-family: inherit; font-size: 10px; fill: #6366f1; font-weight: 600; }
.grafico-area        { fill: #6366f1; opacity: .12; }
.grafico-linha       { fill: none; stroke: #6366f1; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico-ponto circle { fill: #ffffff; stroke: #6366f1; stroke-width: 2; transition: r .15s ease; cursor: help; }
.grafico-ponto:hover circle { r: 6; }

@media (max-width: 640px) {
    .med-analise-cards { grid-template-columns: 1fr; }
    .med-analise-legenda { font-size: 0.68rem; }
}

/* =====================================================
   Tabela de periodos (mes / trimestre / semestre / ano)
   ===================================================== */
.med-analise-periodos-wrap {
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 14px 16px;
}
.med-periodos-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.med-periodos-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}
.med-periodos-sub {
    font-size: 0.75rem;
    color: var(--text-secondary, #475569);
    line-height: 1.5;
}
.med-periodos-sub strong { color: var(--text-primary, #0f172a); }

.med-periodos-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
}
.med-periodos-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.med-periodos-tabela thead th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    color: var(--text-muted, #64748b);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    z-index: 1;
}
.med-periodos-tabela tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.med-periodos-tabela tbody tr:last-child td { border-bottom: none; }

/* Coluna do label do periodo */
.periodo-label {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
}
.badge-atual {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 100px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tag de status por linha */
.periodo-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Cores por status */
.med-periodo.tone-verde         { background: #f0fdf4; }
.med-periodo.tone-verde         .periodo-tag { background: #d1fae5; color: #15803d; border: 1px solid #86efac; }

.med-periodo.tone-amarelo       { background: #fffbeb; }
.med-periodo.tone-amarelo       .periodo-tag { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }

.med-periodo.tone-vermelho      { background: #fef2f2; }
.med-periodo.tone-vermelho      .periodo-tag { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

.med-periodo.tone-vazio-passado { background: #fef2f2; opacity: 0.85; }
.med-periodo.tone-vazio-passado .periodo-tag { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-style: italic; }
.med-periodo.tone-vazio-passado td { color: #94a3b8; }
.med-periodo.tone-vazio-passado .periodo-label { color: #b91c1c; }

.med-periodo.tone-futuro        { background: #f8fafc; opacity: 0.6; }
.med-periodo.tone-futuro        .periodo-tag { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; font-style: italic; }
.med-periodo.tone-futuro td { color: #94a3b8; }
.med-periodo.tone-futuro .periodo-label { color: var(--text-secondary, #475569); font-weight: 500; }

.med-periodo.tone-atual-vazio   { background: #eff6ff; }
.med-periodo.tone-atual-vazio   .periodo-tag { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; font-style: italic; }

/* Periodo atual destacado */
.med-periodo.periodo-atual {
    border-left: 3px solid #6366f1;
}
.med-periodo.periodo-atual .periodo-label {
    color: #4338ca;
}

@media (max-width: 640px) {
    .med-periodos-tabela { font-size: 0.74rem; }
    .med-periodos-tabela thead th,
    .med-periodos-tabela tbody td { padding: 7px 8px; }
}

/* ====== Sparkline no card ====== */
/* ===== Mini-gráfico de evolução no card (linha + meta + datas) ===== */
.kpi-mini {
    margin: 12px 0 6px;
}
.kpi-mini-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2px;
}
.kpi-mini-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-mini-meds {
    font-size: 0.7rem;
    color: #94a3b8;
}
.kpi-mini-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 150;
    display: block;
    overflow: visible;
}
.kpi-mini-grid {
    stroke: #eef2f6;
    stroke-width: 1;
}
.kpi-mini-axis {
    stroke: #e2e8f0;
    stroke-width: 1;
}
.kpi-mini-ytxt {
    fill: #94a3b8;
    font-size: 8.5px;
}
.kpi-mini-xtxt {
    fill: #94a3b8;
    font-size: 9px;
}
.kpi-mini-hoje {
    stroke: #94a3b8;
    stroke-width: 1;
    stroke-dasharray: 2 2;
}
.kpi-mini-hoje-txt {
    fill: #94a3b8;
    font-size: 8px;
}
.kpi-mini-pt {
    fill: #2563eb;
}
.kpi-mini-ptlast {
    fill: #1d4ed8;
}
.kpi-mini-pt,
.kpi-mini-ptlast { cursor: pointer; }
.kpi-mini-ultval {
    fill: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
}
.kpi-mini-meta {
    stroke: #f59e0b;
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
}
.kpi-mini-meta-txt {
    fill: #b45309;
    font-size: 9px;
    font-weight: 600;
}
.kpi-mini-empty {
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}
.kpi-mini-vazio,
.kpi-mini-unico {
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}