/* ══════════════════════════════════════════════════════════════════════
   CARTOES.CSS — base para os cartões expansíveis de informação
   (Tipo de destino, Salas de desmancha, Abates certificados).

   Estado fechado/base — fundo azul claro, igual ao 2º gráfico (barras,
   invertido) de graficos.css: #EAF2F8.
   Cabeçalho — dourado, igual ao cabeçalho do gráfico invertido: #E1C233,
   texto azul-marinho escuro (#1a2548).
   Estado aberto (painel expandido) — fundo amarelo claro, igual à base
   do 1º gráfico de graficos.css (.chart-card): #FDFAEF, borda azul
   #6190B5.
   Texto de linhas/ilhas — azul sólido (#6190B5), tal como o cabeçalho
   do gráfico 1.
   Toda a informação (valores, percentagens, variações) em cor sólida —
   nunca esbatida/transparente.

   Como aplicar numa página:
     <link rel="stylesheet" href="cartoes.css">
   ══════════════════════════════════════════════════════════════════════ */

.card-info {
    background: #EAF2F8;
    border: 1px solid #E1C233;
    border-radius: 8px;
    overflow: hidden;
}

.card-info-header {
    background: #E1C233;
    padding: 10px 14px;
}

.card-info-title {
    color: #1a2548;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.card-info-sub {
    color: rgba(26,37,72,0.75);
    font-family: Lato, sans-serif;
    font-size: 11px;
    margin-top: 2px;
}

/* Linhas de dados dentro do cartão (ex. ilhas, categorias) */
.card-info-row-label {
    color: #6190B5;
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.card-info-val {
    color: #232F5D;
    font-family: Lato, sans-serif;
    font-weight: 700;
}

/* ── Estado aberto — painel expandido, fundo creme (gráfico 1) ── */
.card-info-open {
    background: #FDFAEF;
    border: 1px solid #6190B5;
    border-top: none;
}

/* ── Nota junto ao símbolo de seta (▶) — indicação de que é expansível ── */
.card-info-note {
    font-family: Lato, sans-serif;
    font-size: 10px;
    font-style: italic;
    color: rgba(26,37,72,0.65);
}

/* Ícones de ilha tingidos de azul, a acompanhar o nome (#6190B5) */
.ilha-icon-blue {
    filter: brightness(0) saturate(100%) invert(51%) sepia(31%) saturate(725%) hue-rotate(163deg) brightness(91%) contrast(87%);
}

/* Corrige o hover genérico (.filterable:hover aplica um dourado quase
   transparente que, sobre o cabeçalho dourado de texto escuro, não dá
   contraste suficiente) — no cabeçalho do cartão, escurece para um
   dourado mais forte em vez de clarear. */
.card-info-header.filterable:hover {
    background: #cba82c !important;
    border-color: #cba82c !important;
}
.card-info.filterable:hover {
    background: #dcebf5 !important;
    border-color: #cba82c !important;
}

/* Cartão seleccionado (ex. Certificações) — mesmo método de cores do estado
   aberto dos cartões de Tipo de destino (creme + borda azul), em vez do
   dourado semi-transparente genérico de .filterable.is-selected (que ficava
   escuro sobre o fundo azul claro do cartão). */
.card-info.filterable.is-selected {
    background: #FDFAEF !important;
    border-color: #6190B5 !important;
}

/* ── Extensões usadas pelos cartões de Classificação SEUROP — identifica
   o ano mostrado no cartão, a linha do ano anterior, e as filas de
   detalhe por ilha/categoria. Cores sempre sólidas (nunca esbatidas/
   transparentes), conforme a convenção deste ficheiro. ── */
.card-info-year-badge {
    font-size: 10px;
    color: #5a6b8c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-family: Lato, sans-serif;
}

.card-info-prev-line {
    font-size: 11px;
    color: #5a6b8c;
    margin-top: 3px;
    font-family: Lato, sans-serif;
}
.card-info-prev-line b { color: #1a2548; font-weight: 700; }

.card-info-var-row { font-size: 11px; margin-top: 2px; font-family: Lato, sans-serif; }
.card-info-var-empty { color: #5a6b8c; }

.card-info-empty { color: #5a6b8c; font-size: 11px; padding: 8px 0; font-family: Lato, sans-serif; }
.card-info-body { padding: 10px 14px; flex: 1; }

.card-info-subhdr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    padding: 4px 0 6px;
    border-bottom: 1px solid rgba(35,47,93,.15);
    margin-bottom: 2px;
    font-family: Lato, sans-serif;
}
.card-info-subhdr span { font-size: 9px; color: #232F5D; text-transform: uppercase; letter-spacing: .8px; }
.card-info-subhdr span:not(:first-child) { text-align: right; }

.card-info-dim-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(35,47,93,.08);
    font-family: Lato, sans-serif;
}
.card-info-dim-row:last-child { border-bottom: none; }
.card-info-dim-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-info-dim-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-info-dim-pct { font-size: 10px; color: #5a6b8c; text-align: right; min-width: 30px; }

/* Variante de cartão em layout de coluna flexível (para grelhas de
   cartões lado a lado, com altura igual) e título mais pequeno (quando o
   cartão já tem o ano de referência como linha própria por baixo). */
.card-info--flex { flex: 1; min-width: 190px; display: flex; flex-direction: column; }
.card-info-title--sm { font-size: 15px; }
.card-info-main-row { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.card-info-main-val { font-size: 20px; font-weight: 700; color: #1a2548; font-variant-numeric: tabular-nums; font-family: Lato, sans-serif; }
.card-info-sub--tight { margin-top: 0; }

/* ── Diagrama/imagem interativa dentro de um cartão (ex. boi com cortes
   clicáveis, Preços ao Consumidor — Carne) — moldura de tamanho contido,
   para não competir em destaque com o gráfico ao lado (ver
   .pc-chart-img-row em Carne_Precos.html, que dá mais espaço relativo ao
   gráfico do que à imagem). Sem números/legenda sobrepostos ao desenho —
   a identificação da peça faz-se por hover/clique + legenda de texto ao
   lado, não por rótulos numerados sobre a própria imagem. ── */
.card-img-diagram { max-width: 460px; }