/* Secao 668: Fazenda no visual novo. Gabarito: mockup aprovado em
   https://claude.ai/artifact/CvF72m6HMMm67Ef5asvyD1 (17 telas). Mesma familia de Horas (gh-) e
   Escola (en-), com o VERDE como cor do modulo. Tudo sob .fz, classes fz-*.
   Telas com classes proprias alem destas: fazenda-nova-a.css / -b.css / -c.css. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

.fz {
    --fz-chao: #f1f3f7; --fz-folha: #ffffff; --fz-tinta: #17202d; --fz-tinta2: #5a6676; --fz-tinta3: #5f6979;
    --fz-linha: #e2e6ee; --fz-linha2: #eef1f6; --fz-fundo2: #f8f9fb;
    --fz-verde: #11866a; --fz-verde-escuro: #0b5e4a; --fz-verde-suave: #dcf3ec; --fz-verde-texto: #0b6e56;
    --fz-azul: #3d5bd9; --fz-azul-suave: #e9eefc; --fz-azul-texto: #3049b8;
    --fz-ambar: #a8670c; --fz-ambar-suave: #fbefd9; --fz-ambar-texto: #8a540a;
    --fz-vermelho: #c2362b; --fz-vermelho-suave: #fbe1de; --fz-vermelho-texto: #a92d24;
    --fz-lilas: #7c5cd6; --fz-lilas-suave: #eee8fb; --fz-lilas-texto: #6346bf;
    --fz-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --fz-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
    --fz-num: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font: 14px/1.5 var(--fz-texto); color: var(--fz-tinta); display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
[data-theme="dark"] .fz, [data-bs-theme="dark"] .fz {
    --fz-chao: #0d1118; --fz-folha: #161c26; --fz-tinta: #e8ecf2; --fz-tinta2: #a6afbd; --fz-tinta3: #8f99a8;
    --fz-linha: #29313d; --fz-linha2: #222a35; --fz-fundo2: #1d2430;
    --fz-verde: #4fcca6; --fz-verde-escuro: #7fe0c2; --fz-verde-suave: #173a31; --fz-verde-texto: #7fe0c2;
    --fz-azul: #7d95ff; --fz-azul-suave: #232c4a; --fz-azul-texto: #a9b8ff;
    --fz-ambar: #f0b45a; --fz-ambar-suave: #3a2c15; --fz-ambar-texto: #f0c47e;
    --fz-vermelho: #ff7b6e; --fz-vermelho-suave: #3d1f1c; --fz-vermelho-texto: #ff9d93;
    --fz-lilas: #b29cff; --fz-lilas-suave: #2c2547; --fz-lilas-texto: #c9b9ff;
    color-scheme: dark;
}
.fz *, .fz *::before, .fz *::after { box-sizing: border-box; }
.fz button, .fz input, .fz select, .fz textarea { font: inherit; }
.fz :focus-visible { outline: 2px solid var(--fz-verde); outline-offset: 2px; }
.fz h1 { font: 800 30px/1.1 var(--fz-titulo); margin: 2px 0 0; letter-spacing: -.01em; color: var(--fz-tinta); }
.fz h2 { font: 800 18px/1.2 var(--fz-titulo); margin: 0; color: var(--fz-tinta); }
.fz h3 { font: 700 15px/1.3 var(--fz-texto); margin: 0; color: var(--fz-tinta); }
.fz a { color: var(--fz-verde); }
.fz-num { font-family: var(--fz-num); font-variant-numeric: tabular-nums; }
.fz-etq { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-tinta3); }
.fz-sub { color: var(--fz-tinta2); font-size: 13.5px; }
.fz-forte { font-weight: 700; }

/* barra do modulo (FazendaNav) */
.fz-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--fz-folha); border: 1px solid var(--fz-linha); border-radius: 16px; padding: 8px 10px; }
.fz-nav .fz-marca { font: 800 15px var(--fz-titulo); color: var(--fz-verde); padding: 0 10px 0 4px; margin-right: 4px; border-right: 1px solid var(--fz-linha); }
.fz-nav a { font-weight: 600; font-size: 13.5px; color: var(--fz-tinta2); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.fz-nav a:hover { background: var(--fz-fundo2); color: var(--fz-tinta); }
.fz-nav a.ativo { background: var(--fz-verde-suave); color: var(--fz-verde-texto); }

/* topo da tela */
.fz-topo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; }
.fz-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fz-voltar { font-weight: 700; font-size: 13.5px; text-decoration: none; }

/* botoes */
.fz-bt { border: 0; border-radius: 12px; padding: 9px 14px; font: 700 13.5px var(--fz-texto); display: inline-flex; gap: 6px; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; min-height: 40px; line-height: 1.2; }
.fz-bt.pri { background: var(--fz-verde); color: #fff; }
.fz-bt.pri:hover { background: var(--fz-verde-escuro); color: #fff; }
.fz-bt.sec { background: var(--fz-folha); border: 1px solid var(--fz-linha); color: var(--fz-tinta); }
.fz-bt.sec:hover { background: var(--fz-fundo2); }
.fz-bt.perigo { background: var(--fz-vermelho-suave); color: var(--fz-vermelho-texto); }
.fz-bt.pq { min-height: 34px; padding: 5px 11px; font-size: 12.5px; border-radius: 10px; }
.fz-bt:disabled { opacity: .5; cursor: not-allowed; }
.fz-lapis { border: 1px solid var(--fz-linha); background: var(--fz-folha); border-radius: 10px; width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer; color: var(--fz-tinta2); }

/* numeros */
.fz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.fz-kpi { background: var(--fz-folha); border: 1px solid var(--fz-linha); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: inherit; }
.fz-kpi b { font: 800 26px/1.15 var(--fz-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-kpi small { font-size: 12px; color: var(--fz-tinta2); }
.fz-kpi.bom b { color: var(--fz-verde); } .fz-kpi.aviso b { color: var(--fz-ambar); } .fz-kpi.ruim b { color: var(--fz-vermelho); }
.fz-kpi .fz-conta { font: 500 12px var(--fz-num); color: var(--fz-tinta2); }

/* folhas e grades */
.fz-folha { background: var(--fz-folha); border: 1px solid var(--fz-linha); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fz-folha.sem-pad { padding: 0; overflow: hidden; gap: 0; }
.fz-folha-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fz-folha-cab a { font-weight: 700; font-size: 13px; }
.fz-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.fz-grade.meio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fz-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fz-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .fz-grade, .fz-grade.meio { grid-template-columns: 1fr; } }

/* linhas de lista */
.fz-lin { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fz-linha2); }
.fz-lin:first-child, .fz-lin.primeira { border-top: 0; }
.fz-lin .fz-cresce { flex: 1; min-width: 0; }
.fz-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 13px; }
.fz-ico.g { width: 48px; height: 48px; }
.fz-ok { background: var(--fz-verde-suave); color: var(--fz-verde-texto); }
.fz-av { background: var(--fz-ambar-suave); color: var(--fz-ambar-texto); }
.fz-er { background: var(--fz-vermelho-suave); color: var(--fz-vermelho-texto); }
.fz-az { background: var(--fz-azul-suave); color: var(--fz-azul-texto); }
.fz-li { background: var(--fz-lilas-suave); color: var(--fz-lilas-texto); }
.fz-cz { background: var(--fz-fundo2); color: var(--fz-tinta2); }

/* selos */
.fz-bdg { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* barras */
.fz-barra { height: 10px; border-radius: 999px; background: var(--fz-linha2); overflow: hidden; flex: 1; position: relative; }
.fz-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--fz-verde); }
.fz-barra.fina { height: 6px; }

/* filtros */
.fz-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fz-busca { flex: 1 1 280px; display: flex; gap: 8px; align-items: center; border: 1.5px solid var(--fz-linha); border-radius: 12px; background: var(--fz-folha); padding: 0 12px; min-height: 44px; }
.fz-busca input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; color: var(--fz-tinta); }
.fz-chip { border: 1.5px solid var(--fz-linha); background: var(--fz-folha); border-radius: 999px; padding: 6px 13px; font: 600 13px var(--fz-texto); color: var(--fz-tinta2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 36px; text-decoration: none; }
.fz-chip b { color: var(--fz-tinta); }
.fz-chip.ativo { border-color: var(--fz-verde); color: var(--fz-verde-texto); background: var(--fz-verde-suave); }
.fz-seg { display: inline-flex; border: 1.5px solid var(--fz-linha); border-radius: 999px; padding: 3px; background: var(--fz-folha); flex-wrap: wrap; }
.fz-seg button { border: 0; background: none; border-radius: 999px; padding: 5px 12px; font: 600 13px var(--fz-texto); color: var(--fz-tinta2); cursor: pointer; min-height: 32px; }
.fz-seg button.ativo { background: var(--fz-tinta); color: var(--fz-folha); }
.fz-campo { display: flex; flex-direction: column; gap: 4px; }
.fz-campo label { font-size: 12px; font-weight: 700; color: var(--fz-tinta3); }
.fz-campo select, .fz-campo input, .fz-entrada { border: 1.5px solid var(--fz-linha); border-radius: 10px; padding: 8px 10px; background: var(--fz-folha); color: var(--fz-tinta); min-height: 42px; }

/* abas sublinhadas */
.fz-abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--fz-linha); }
.fz-abas button { border: 0; background: none; padding: 10px 14px; font: 600 14px var(--fz-texto); color: var(--fz-tinta2); border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer; }
.fz-abas button.ativo { color: var(--fz-verde-texto); border-bottom-color: var(--fz-verde); }
.fz-abas button span { font-family: var(--fz-num); font-size: 12px; color: var(--fz-tinta3); margin-left: 4px; }

/* tabelas */
.fz-rolagem { overflow-x: auto; }
.fz-tabela { width: 100%; border-collapse: collapse; }
.fz-tabela th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fz-tinta3); text-align: left; padding: 10px 14px; background: var(--fz-fundo2); border-bottom: 1px solid var(--fz-linha); white-space: nowrap; }
.fz-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--fz-linha2); vertical-align: middle; }
.fz-tabela tr:last-child td { border-bottom: 0; }
.fz-tabela .dir { text-align: right; }
.fz-tabela tr.clica { cursor: pointer; }
.fz-tabela tr.clica:hover td { background: var(--fz-fundo2); }
.fz-rodape { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--fz-fundo2); border-top: 1px solid var(--fz-linha); font-size: 13px; color: var(--fz-tinta2); }

/* estados */
.fz-vazio { background: var(--fz-folha); border: 1px dashed var(--fz-linha); border-radius: 16px; padding: 28px 16px; text-align: center; color: var(--fz-tinta2); }
.fz-aviso { background: var(--fz-ambar-suave); color: var(--fz-ambar-texto); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; }
.fz-info { background: var(--fz-azul-suave); color: var(--fz-azul-texto); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; }
.fz-bloqueio { background: var(--fz-folha); border: 1px solid var(--fz-linha); border-radius: 16px; padding: 40px 16px; text-align: center; }

/* animal (avatar por sexo, brinco grande) */
.fz-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; flex: none; }
.fz-avatar.f { background: #fde7ef; color: #b0325f; } .fz-avatar.m { background: #e3ebff; color: #2f4fb8; }
[data-theme="dark"] .fz-avatar.f, [data-bs-theme="dark"] .fz-avatar.f { background: #3b1f2b; color: #f59ab9; }
[data-theme="dark"] .fz-avatar.m, [data-bs-theme="dark"] .fz-avatar.m { background: #1f2a47; color: #9db4ff; }
.fz-brinco { font: 800 16px var(--fz-titulo); }
.fz-cor-brinco { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.08); }

@media (max-width: 820px) { .fz h1 { font-size: 26px; } }