/* Card 1057462 — Favoritos v4. Carregado DEPOIS do MudBlazor (App.razor). Tokens sob .fv-pagina
   (não vazam); a faixa .ph-* (PageHero) é autossuficiente para poder ser reutilizada. Valores do
   design `Favoritos v4.dc.html`. Regra do card: nenhum card com altura fixa, max-height ou
   overflow: hidden cortando texto.
   Contraste (critério do card: >= 4.5:1): teal-500 com texto branco dá 3,65:1, então todo fundo
   com texto branco usa teal-600 (5,2:1), como no Catálogo v5; e o desabilitado do card
   (#6b7797 sobre #e3e8f1) dá 3,63:1, então o texto vai para #5b6685 (4,64:1). */

/* ── PageHero (faixa de topo) ── */
.ph-faixa { background: linear-gradient(105deg, #0f3f6b 0%, #0d5a72 58%, #0a5e57 100%); color: #fff; }
.ph-in { max-width: 1320px; margin: 0 auto; padding: 36px clamp(16px, 2.6vw, 32px) 92px; box-sizing: border-box; }
.ph-breadcrumb { font-size: 13px; color: rgba(255, 255, 255, .8); }
/* Área de toque de 44px sem mudar o layout: padding + margem negativa de mesmo valor. */
.ph-breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; display: inline-block;
    padding: 13px 6px; margin: -13px -6px; }
.ph-breadcrumb a:hover { text-decoration: underline; }
.ph-breadcrumb a:focus-visible { outline: 2px solid #7ed0c7; outline-offset: 2px; }
/* O FocusOnNavigate (Routes.razor) põe o foco no h1 ao navegar; o título não é interativo,
   então sem contorno (mesma decisão do .ct-h1 do catálogo). */
.ph-titulo:focus, .ph-titulo:focus-visible { outline: none; }
.ph-titulo { font-family: "Open Sans", system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.1; letter-spacing: -.025em; margin: 10px 0 0; color: #fff; overflow-wrap: anywhere; }

/* ── Página ── */
.fv-pagina {
    --ink: #16215b; --ink-soft: #465479; --page: #f4f7fb; --white: #fff; --line: #dbe3f0;
    --teal-100: #e6f5f3; --teal-500: #12968a; --teal-600: #0d7a70; --teal-700: #0a5e57;
    --amber-500: #de9e24;
    --r: 14px; --r-sub: 12px;
    --sombra-card: 0 10px 30px rgba(22, 33, 91, .08); --sombra-barra: 0 18px 44px rgba(22, 33, 91, .16);
    /* Sai do respiro de 24px do MainLayout (mesmo recurso da Home e do Detalhe). */
    /* A altura cobre a tela abaixo da AppBar (64px): com % o fundo acabava no meio da tela
       quando a lista é curta ou vazia. */
    margin: -24px; min-height: calc(100vh - 64px);
    font-family: "Open Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
    color: var(--ink); background: var(--page);
}
.fv-pagina *, .fv-pagina *::before, .fv-pagina *::after { box-sizing: border-box; }
.fv-pagina :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.fv-pagina button { font-family: inherit; }
.fv-conteudo { max-width: 1320px; margin: -64px auto 0; padding: 0 clamp(16px, 2.6vw, 32px) 80px; position: relative; }

/* ── Barra de ações ── */
.fv-barra { background: var(--white); border-radius: var(--r); box-shadow: var(--sombra-barra); padding: 14px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fv-contador { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
    padding: 0 10px; border-radius: 10px; font-weight: 800; font-size: 16px; background: var(--page); color: var(--ink); }
.fv-contador-ativo { background: var(--teal-600); color: #fff; }
.fv-barra-rotulo { font-size: 14.5px; font-weight: 600; }
.fv-comparar { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center;
    gap: 8px; padding: 11px 16px; min-height: 44px; border-radius: var(--r-sub); border: none;
    background: var(--teal-600); color: #fff; cursor: pointer; }
.fv-comparar:hover:not(:disabled) { background: var(--teal-700); }
.fv-comparar:disabled { background: #e3e8f1; color: #5b6685; cursor: not-allowed; }
.fv-barra-apoio { font-size: 13.5px; color: var(--ink-soft); flex: 1 1 220px; }
.fv-limpar { font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--teal-700);
    cursor: pointer; padding: 8px 6px; min-height: 44px; border-radius: 8px; }
.fv-limpar:hover { text-decoration: underline; }

/* ── Grade e card ── */
.fv-grade { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.fv-card { position: relative; display: flex; flex-direction: column; min-width: 0;
    /* A faixa de 6px do pilar é o próprio fundo do card: o fundo já é recortado pelo
       border-radius, então não há overflow: hidden (que o card proíbe) nem ponta saindo da curva. */
    background: linear-gradient(var(--fv-cor) 0 6px, var(--white) 6px);
    border-radius: var(--r); box-shadow: var(--sombra-card); outline: 2px solid transparent; outline-offset: -2px; }
.fv-card-sel { outline-color: var(--teal-500); }
.fv-card-corpo { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px 16px; flex: 1; }
.fv-card-topo { display: flex; align-items: center; gap: 12px; }

/* Checkbox: área de 44px, quadrado visível de 22px. */
.fv-check { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin: -11px -11px -11px -11px; padding: 0; border: none; background: transparent; border-radius: 10px; cursor: pointer; }
.fv-check-caixa { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 6px; border: 2px solid #b7c2d6; background: var(--white); color: #fff; }
.fv-check[aria-checked="true"] .fv-check-caixa { border-color: var(--teal-500); background: var(--teal-500); }
.fv-check[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.fv-check:focus-visible { outline-offset: -4px; }

.fv-pilar { font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px;
    background: var(--fv-pilar-bg); color: var(--fv-pilar-fg); min-width: 0; overflow-wrap: anywhere; }
.fv-estrela { margin-left: auto; margin-right: -8px; flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; border: none; background: transparent; color: var(--amber-500); cursor: pointer; }
.fv-estrela:hover:not(:disabled) { background: var(--page); }
.fv-estrela:disabled { cursor: progress; opacity: .6; }

.fv-card-titulo { margin: 0; font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em;
    text-wrap: balance; overflow-wrap: anywhere; color: var(--ink); }
.fv-card-desc { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; overflow-wrap: anywhere; }
.fv-card-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.fv-card-rodape a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px;
    font-weight: 800; letter-spacing: .06em; color: var(--teal-700); text-decoration: none; }
.fv-card-rodape a:hover { color: var(--teal-600); }

/* ── Estado vazio ── */
.fv-vazio { margin-top: 20px; background: var(--white); border-radius: var(--r); box-shadow: var(--sombra-card);
    padding: 36px 30px; max-width: 620px; }
.fv-vazio-titulo { margin: 0; font-weight: 800; font-size: 21px; line-height: 1.3; color: var(--ink); }
.fv-vazio p { font-size: 15px; color: var(--ink-soft); margin: 8px 0 18px; }
.fv-vazio-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700;
    padding: 12px 18px; border-radius: var(--r); background: var(--teal-600); color: #fff; text-decoration: none; }
.fv-vazio-link:hover { background: var(--teal-700); color: #fff; }

@media (max-width: 759.98px) {
    .fv-vazio { padding: 28px 20px; }
}