/* Módulo Selo — tokens e componentes portados do SELO2 (escopo .page-selo) */

/* ═══════════════════════════════════════════════
   TOKENS — portados de gestao_fundo_tokens.css
   Escopados em .page-selo (o portal destino tem
   design system próprio --ex-v1-* — sem vazamento
   para :root/global).
   Fontes mapeadas para as famílias locais do portal
   (ex-fonts.css): Fraunces, Inter, IBM Plex Mono.
   ═══════════════════════════════════════════════ */
.page-selo {
    --fn-navy: #102a43;
    --fn-navy-mid: #1a3d5c;
    --fn-navy-light: #243b53;
    --fn-teal: #3d8c8c;
    --fn-teal-dark: #2a6b6b;
    --fn-teal-light: #5cbaab;
    --fn-teal-pale: #e0f5f0;
    --fn-copper: #c67c4e;
    --fn-copper-light: #e8a87c;
    --fn-copper-pale: #fdf0e6;
    --fn-gold: #d4a843;
    --fn-gold-light: #f5e6b8;
    --fn-green: #27ae60;
    --fn-green-pale: #e8f8ef;
    --fn-red: #c0392b;
    --fn-red-pale: #fbeae8;
    --fn-orange: #e67e22;
    --fn-bg: #f5f6f8;
    --fn-bg-warm: #faf9f7;
    --fn-surface: #ffffff;
    --fn-border: #e2e6ea;
    --fn-border-light: #eef1f4;
    --fn-text: #1f2937;
    --fn-text-secondary: #5a6577;
    --fn-text-muted: #8896a7;
    --fn-shadow-sm: 0 1px 3px rgba(16,42,67,.06);
    --fn-shadow-md: 0 4px 12px rgba(16,42,67,.08);
    --fn-shadow-lg: 0 8px 30px rgba(16,42,67,.12);
    --fn-radius: 8px;
    --fn-radius-lg: 12px;
    --fn-font-editorial: 'Fraunces', Georgia, serif;
    --fn-font-ui: 'Inter', system-ui, sans-serif;
    --fn-font-mono: 'IBM Plex Mono', Consolas, monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   selo2_info.css - paginas informativas do projeto Selo 2.0 (menu Selo)
   Compartilhado pelas paginas Selo/*_selo2.aspx
   Alinhado ao design-system/ (cards borda+sombra, eyebrows, tabular nums,
   hover sobrio, ritmo 4px) sobre os tokens --fn-* do portal.
   Copiado fielmente de C:\GIT\SELO2\src\Web\SELO2_WEB\assets\css\selo2_info.css
   (classes s2-* já prefixadas — sem regras em :root/body a reescopar).
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Hero ---------------------------------------------------------- */
.s2-hero {
    background: linear-gradient(135deg, #102a43 0%, #16395a 55%, #1d4e7a 100%);
    color: #fff;
    padding: 2.6rem 1.5rem 2.4rem;
    position: relative;
    overflow: hidden;
}
.s2-hero::after {
    /* brilho radial sutil no canto — profundidade sem imagem */
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(92, 186, 171, .14) 0%, transparent 65%);
    pointer-events: none;
}
.s2-hero__inner { max-width: 1000px; margin: 0 auto; position: relative; }

.s2-hero__eyebrow {
    display: block;
    font-family: var(--fn-font-ui, 'Inter', sans-serif);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7fd1c8;
    margin-bottom: .55rem;
}
.s2-hero h1 {
    font-family: var(--fn-font-editorial, 'Fraunces', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.2vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: .5rem;
    text-wrap: balance;
}
.s2-hero h1 i { color: #7fd1c8; margin-right: .45rem; }

/* Correção de cascata: .page-ex h1/h2 (ex-portal.css) vence a herança de .s2-hero — cor explícita */
.page-selo .s2-hero h1,
.page-selo .s2-hero h2,
.page-selo .s2-hero h3 { color: #fff; }
.page-selo .s2-hero p { color: #fff; }

.s2-hero p {
    opacity: .88;
    margin: 0;
    font-size: .95rem;
    max-width: 62ch;
    line-height: 1.55;
}

.s2-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}
.s2-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: #e6f0f6;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .28rem .8rem;
    white-space: nowrap;
}
.s2-hero__chip i { color: #7fd1c8; font-size: .85rem; }
.s2-hero__chip strong { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Estrutura da pagina ------------------------------------------ */
.s2-wrap { max-width: 1000px; margin: 2rem auto 4rem; padding: 0 1.25rem; }

.s2-lead {
    background: linear-gradient(180deg, #eef4f9 0%, #f6fafc 100%);
    border: 1px solid #dbe7f0;
    padding: 1.05rem 1.25rem;
    font-size: .93rem;
    line-height: 1.65;
    color: #102a43;
    border-radius: var(--fn-radius-lg, 12px);
    margin-bottom: 2.2rem;
}
.s2-lead strong { color: #0c2135; }

.s2-section { margin-bottom: 2.75rem; }
.s2-section:last-child { margin-bottom: 0; }

.s2-section__eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fn-teal-dark, #2a6b6b);
    margin-bottom: .3rem;
}
.s2-section h2 {
    font-family: var(--fn-font-editorial, 'Fraunces', Georgia, serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fn-navy, #102a43);
    border-bottom: 2px solid var(--fn-border, #e2e6ea);
    padding-bottom: .5rem;
    margin-bottom: 1.1rem;
}
.s2-section h2 i { color: var(--fn-teal, #3d8c8c); margin-right: .4rem; }

/* ---------- Grid de cards ------------------------------------------------- */
.s2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; }

.s2-card {
    background: var(--fn-surface, #fff);
    border: 1px solid var(--fn-border, #e2e6ea);
    border-radius: var(--fn-radius-lg, 12px);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--fn-shadow-sm, 0 1px 3px rgba(16, 42, 67, .06));
    transition: box-shadow 160ms cubic-bezier(.2, 0, 0, 1),
                border-color 160ms cubic-bezier(.2, 0, 0, 1);
}
.s2-card:hover {
    box-shadow: var(--fn-shadow-md, 0 4px 12px rgba(16, 42, 67, .08));
    border-color: #cdd6de;
}
.s2-card h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fn-navy, #102a43);
    margin-bottom: .65rem;
}
.s2-card h3 i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--fn-teal-pale, #e0f5f0);
    color: var(--fn-teal-dark, #2a6b6b);
    font-size: 1.05rem;
    margin-right: 0;
}
.s2-card p, .s2-card li { font-size: .89rem; line-height: 1.6; color: #334e5c; }
.s2-card p:last-child { margin-bottom: 0; }
.s2-card ul { padding-left: 1.1rem; margin: 0; }
.s2-card li { margin-bottom: .3rem; }

/* ---------- Tabela -------------------------------------------------------- */
.s2-table-card {
    background: var(--fn-surface, #fff);
    border: 1px solid var(--fn-border, #e2e6ea);
    border-radius: var(--fn-radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--fn-shadow-sm, 0 1px 3px rgba(16, 42, 67, .06));
}
.s2-table-scroll { overflow-x: auto; }

.s2-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.s2-table thead th {
    text-align: left;
    padding: .65rem 1rem;
    background: var(--fn-navy, #102a43);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}
.s2-table tbody td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--fn-border-light, #eef1f4);
    color: #334e5c;
    vertical-align: top;
    line-height: 1.5;
}
.s2-table tbody tr:last-child td { border-bottom: 0; }
.s2-table tbody tr:nth-child(even) { background: #fafcfe; }
.s2-table tbody tr:hover { background: #f2f8fb; }

/* linha destacada (ex.: RJ no comparativo) */
.s2-table tbody tr.s2-row--hl,
.s2-table tbody tr.s2-row--hl:nth-child(even) { background: #f0faf7; }
.s2-table tbody tr.s2-row--hl:hover { background: #e7f6f1; }
.s2-table tbody tr.s2-row--hl td { border-bottom-color: #d8ede6; }

/* pill de UF na primeira coluna */
.s2-uf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: #e7effa;
    color: #1d4e7a;
    font-family: var(--fn-font-mono, 'IBM Plex Mono', monospace);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.s2-row--hl .s2-uf { background: var(--fn-navy, #102a43); color: #7fd1c8; }

/* ---------- Badges -------------------------------------------------------- */
.s2-badge {
    display: inline-block;
    background: var(--fn-teal-pale, #e3f2ef);
    color: #1d6b60;
    font-size: .7rem;
    font-weight: 700;
    padding: .16rem .6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.s2-badge--warn { background: #fdf3e3; color: #8a5a12; }
.s2-badge--info { background: #e7effa; color: #1d4e7a; }

/* ---------- Timeline (usada em timeline_selo2.aspx) ----------------------- */
.s2-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.s2-timeline::before {
    content: ""; position: absolute; left: 96px; top: 0; bottom: 0;
    width: 2px; background: var(--fn-border, #d8e0e8);
}
.s2-timeline li { display: flex; gap: 1.2rem; padding: .55rem 0; position: relative; }
.s2-timeline li::after {
    content: ""; position: absolute; left: 92px; top: 1.05rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--fn-teal, #3d8c8c);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--fn-border, #d8e0e8);
}
.s2-timeline .s2-tl-data {
    flex: 0 0 84px; text-align: right;
    font-weight: 700; color: #1d4e7a; font-size: .85rem;
    font-family: var(--fn-font-mono, 'IBM Plex Mono', monospace);
    font-variant-numeric: tabular-nums;
}
.s2-timeline .s2-tl-texto { flex: 1; font-size: .89rem; color: #334e5c; padding-left: .9rem; }
.s2-timeline .s2-tl-texto strong { color: var(--fn-navy, #102a43); }

/* ---------- Nota de rodape ------------------------------------------------- */
.s2-nota {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: .8rem;
    color: #54707b;
    margin-top: 1rem;
}
.s2-nota i { color: var(--fn-teal, #3d8c8c); }
.s2-nota code {
    font-family: var(--fn-font-mono, 'IBM Plex Mono', monospace);
    font-size: .95em;
    background: #f0f3f6;
    border: 1px solid var(--fn-border-light, #eef1f4);
    border-radius: 4px;
    padding: .05rem .35rem;
    color: #334e5c;
}

/* ---------- Responsivo / acessibilidade ------------------------------------ */
@media (max-width: 640px) {
    .s2-hero { padding: 2rem 1.25rem 1.8rem; }
    .s2-wrap { margin-top: 1.4rem; }
    .s2-table { font-size: .84rem; }
    .s2-table thead th, .s2-table tbody td { padding: .55rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .s2-card { transition: none; }
}