/* ============================================================
   ESTILO GLOBAL — Sistema de Gestão de Rebanho
   ============================================================ */
:root {
  --verde: #2e7d32;
  --verde-escuro: #1b5e20;
  --verde-claro: #e8f5e9;
  --terra: #795548;
  --bg: #f4f6f4;
  --card: #ffffff;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --borda: #e2e8e2;
  --azul: #1565c0;
  --vermelho: #c62828;
  --amarelo: #f9a825;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --raio: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); }
h1, h2, h3 { color: var(--verde-escuro); }

/* ---------- LOGIN ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-escuro) 100%);
  padding: 1rem;
}
.login-card {
  background: var(--card);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.login-card h1 { text-align: center; margin-bottom: .25rem; }
.login-card .sub { text-align: center; color: var(--texto-suave); margin-bottom: 1.5rem; font-size: .9rem; }
.login-logo { font-size: 2.5rem; text-align: center; margin-bottom: .5rem; }

/* ---------- FORM ---------- */
label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; color: var(--texto-suave); }
input, select, textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-claro);
}
.campo { margin-bottom: 1rem; }
.linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.linha > .campo { flex: 1; min-width: 140px; }

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.1rem;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--verde);
  color: #fff;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-bloco { width: 100%; }
.btn-sec { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
.btn-cinza { background: #eef0ee; color: var(--texto); }
.btn-perigo { background: var(--vermelho); }
.btn-azul { background: var(--azul); }
.btn-sm { padding: .35rem .6rem; font-size: .8rem; }

/* ---------- LAYOUT WEB (sidebar + conteúdo) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--verde-escuro);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  transition: transform .25s;
}
.sidebar .marca { padding: 1.1rem 1.25rem; font-size: 1.15rem; font-weight: 700; display: flex; gap: .5rem; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1.25rem; color: #d7ead8; text-decoration: none;
  font-size: .92rem; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.ativo { background: rgba(255,255,255,.14); color: #fff; border-left-color: var(--amarelo); font-weight: 600; }
.sidebar nav a .ico { width: 20px; text-align: center; }
.sidebar .rodape { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }

/* Grupo retrátil (ex.: Manejo) na sidebar */
.menu-grupo {
  width: 100%; display: flex; align-items: center; gap: .65rem;
  padding: .7rem 1.25rem; background: none; border: none; border-left: 3px solid transparent;
  color: #d7ead8; font-size: .92rem; font-family: inherit; cursor: pointer; text-align: left;
}
.menu-grupo:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-grupo.aberto { color: #fff; }
.menu-grupo .grupo-seta { margin-left: auto; transition: transform .2s; font-size: .75rem; }
.menu-grupo.aberto .grupo-seta { transform: rotate(180deg); }
.submenu { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.submenu.aberto { max-height: 320px; }
.submenu a { padding-left: 2.6rem; font-size: .87rem; }

.conteudo { flex: 1; margin-left: 240px; display: flex; flex-direction: column; }

.topbar {
  background: var(--card);
  box-shadow: var(--sombra);
  padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 40;
}
.topbar .menu-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--verde-escuro); }
.topbar .titulo-pagina { font-size: 1.15rem; font-weight: 700; color: var(--verde-escuro); }
.topbar .espaco { flex: 1; }
.topbar select { width: auto; min-width: 180px; }
.topbar .usuario { font-size: .85rem; color: var(--texto-suave); }

.pagina { padding: 1.25rem; flex: 1; }

/* ---------- CARDS / GRID ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.card {
  background: var(--card); border-radius: var(--raio); padding: 1.1rem;
  box-shadow: var(--sombra);
}
.card.metric .rotulo { font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.card.metric .valor { font-size: 1.7rem; font-weight: 700; color: var(--verde-escuro); margin-top: .2rem; }
.card.metric .extra { font-size: .8rem; color: var(--texto-suave); margin-top: .15rem; }

.painel { background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem; margin-bottom: 1.25rem; }
.painel h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.painel-cab { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.painel-cab h2 { margin: 0; }
.painel-cab .espaco { flex: 1; }

/* ---------- TABELA ---------- */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { background: var(--verde-claro); color: var(--verde-escuro); font-weight: 600; position: sticky; top: 0; }
tbody tr:hover { background: #fafdfa; }
td .link-acao { cursor: pointer; color: var(--azul); }

/* ---------- BADGES ---------- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-ok { background: #e7f6e7; color: var(--verde-escuro); }
.badge-info { background: #e3f0fb; color: var(--azul); }
.badge-alerta { background: #fff3d6; color: #8a6100; }
.badge-perigo { background: #fde8e8; color: var(--vermelho); }
.badge-cinza { background: #eef0ee; color: var(--texto-suave); }

/* ---------- FILTROS / BUSCA ---------- */
.barra-filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.barra-filtros .campo { margin: 0; }
.busca { position: relative; }
.busca input { padding-left: 2.2rem; }
.busca::before { content: "🔎"; position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); }

/* ---------- MODAL ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; place-items: center; z-index: 2000; padding: 1rem;
}
.modal-bg.aberto { display: grid; }
.modal {
  background: var(--card); border-radius: 14px; width: 100%;
  max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-cab { display: flex; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { font-size: 1.1rem; margin: 0; flex: 1; }
.modal-cab .fechar { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--texto-suave); }
.modal-corpo { padding: 1.25rem; }
.modal-rodape { padding: 1rem 1.25rem; border-top: 1px solid var(--borda); display: flex; gap: .75rem; justify-content: flex-end; }
.modal.grande { max-width: 820px; }
.modal.maximo { max-width: 96vw; width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
.modal.maximo .modal-corpo { flex: 1; overflow-y: auto; }

/* ---------- TABS ---------- */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--borda); margin-bottom: 1rem; flex-wrap: wrap; }
.tab { padding: .55rem .9rem; cursor: pointer; border: none; background: none; font-weight: 600; color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab.ativo { color: var(--verde-escuro); border-bottom-color: var(--verde); }

/* ---------- ALERTAS DASHBOARD ---------- */
.alerta-item { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 8px; margin-bottom: .4rem; font-size: .88rem; }
.alerta-item.aviso { background: #fff3d6; }
.alerta-item.perigo { background: #fde8e8; }
.alerta-item .ico { font-size: 1.1rem; }

/* ---------- TOAST ---------- */
.toast-cont { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: #333; color: #fff; padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; opacity: 0; transform: translateY(10px); transition: .25s; max-width: 320px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-ok { background: var(--verde); }
.toast-erro { background: var(--vermelho); }
.toast-info { background: var(--azul); }

.vazio { text-align: center; color: var(--texto-suave); padding: 2rem 1rem; }
.carregando { text-align: center; color: var(--texto-suave); padding: 1.5rem; }
.grafico-wrap { position: relative; height: 320px; }
.muted { color: var(--texto-suave); }
.txt-dir { text-align: right; }
.mt { margin-top: 1rem; }
.flex { display: flex; gap: .5rem; align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.aberta { transform: translateX(0); }
  .conteudo { margin-left: 0; }
  .topbar .menu-btn { display: block; }
  .topbar select { min-width: 130px; }
}

/* ============================================================
   APP DO PEÃO (mobile-first, alto contraste, fontes grandes)
   ============================================================ */
.peao-body {
  background: #0d1b0e;
  color: #fff;
  font-size: 18px;
}
.peao-topo {
  background: var(--verde-escuro);
  padding: 1rem;
  display: flex; align-items: center; gap: .75rem;
  position: sticky; top: 0; z-index: 30;
}
.peao-topo .marca { font-size: 1.2rem; font-weight: 700; flex: 1; }
.sync-status { display: flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.15); }
.sync-status .ponto { width: 10px; height: 10px; border-radius: 50%; background: #9e9e9e; }
.sync-status.online .ponto { background: #66bb6a; }
.sync-status.offline .ponto { background: #ef5350; }
.sync-status.pendente .ponto { background: var(--amarelo); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.peao-conteudo { padding: 1rem; max-width: 520px; margin: 0 auto; }

.peao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.acao-grande {
  background: var(--verde);
  border: none; color: #fff;
  border-radius: 16px;
  padding: 1.6rem 1rem;
  font-size: 1.25rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  cursor: pointer; min-height: 130px; justify-content: center;
}
.acao-grande:active { transform: scale(.97); }
.acao-grande .emoji { font-size: 2.4rem; }
.acao-grande.azul { background: var(--azul); }
.acao-grande.amarelo { background: #ef6c00; }
.acao-grande.roxo { background: #6a1b9a; }

.peao-body input, .peao-body select, .peao-body textarea {
  font-size: 1.3rem; padding: 1rem; background: #1a2e1c; color: #fff; border: 2px solid #3a5a3c;
}
.peao-body input:focus, .peao-body select:focus { border-color: #66bb6a; box-shadow: none; }
.peao-body label { color: #b6d7b8; font-size: 1rem; }
.peao-body .btn { font-size: 1.2rem; padding: 1rem; }
.peao-card { background: #16261733; border: 1px solid #2c452e; border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.peao-voltar { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.peao-fila-item { background: #1a2e1c; border-radius: 10px; padding: .7rem 1rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.peao-fila-item .pend { color: var(--amarelo); }
.peao-fila-item .ok { color: #66bb6a; }
.peao-resultado-busca { background: #1a2e1c; border-radius: 10px; margin-top: .5rem; overflow: hidden; }
.peao-resultado-busca div { padding: .8rem 1rem; border-bottom: 1px solid #2c452e; cursor: pointer; }
.peao-resultado-busca div:active { background: #244026; }
.peao-historico { font-size: .85rem; color: #b6d7b8; }
.foto-prev { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.foto-prev img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; border: 2px solid #3a5a3c; }
.foto-prev .ok { color: #66bb6a; font-size: .9rem; }

/* ---------- Seções da página de Cadastros ---------- */
.secao-cadastro { margin-bottom: 1.75rem; }
.secao-titulo {
  font-size: 1.1rem; padding-bottom: .4rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--verde); color: var(--verde-escuro);
}
.busca-cadastro { margin: .5rem 0 .4rem; padding: .4rem .6rem; font-size: .85rem; }
.lista-rolavel { max-height: 280px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; }
.lista-rolavel table { margin: 0; }
.lista-rolavel thead { display: none; }

/* ---------- Rótulos dos pastos no mapa ---------- */
.rotulo-pasto {
  background: rgba(0,0,0,.65); color: #fff; border: none; box-shadow: none;
  font-weight: 600; font-size: .72rem; padding: .1rem .35rem; border-radius: 5px;
}
.rotulo-pasto::before { display: none; }
.leaflet-container { font-family: inherit; }

/* Pino de coleta com emoji (formato gota) */
.map-pin-wrap { background: none; border: none; }
.map-pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.map-pin > span { transform: rotate(45deg); font-size: 15px; line-height: 1; }

/* Pino de localização do rebanho (🐄 + quantidade) */
.reb-pin-wrap { background: none; border: none; }
.reb-pin {
  display: flex; align-items: center; gap: .3rem;
  background: #fff; border: 3px solid var(--verde); border-radius: 999px;
  padding: .2rem .6rem; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-weight: 800; font-size: 1rem; color: var(--texto); white-space: nowrap;
}
.reb-pin-ico { font-size: 1.15rem; }


.thumb-foto { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin-right: .25rem; cursor: pointer; vertical-align: middle; }

/* ---------- Campos de coleta (botões Boa/Ruim, Sim/Não) ---------- */
.campos-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-bottom: 1rem; }
.campos-tipo .campo-largo { grid-column: 1 / -1; }
.seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.seg-op { min-width: 0; }
.seg-op {
  flex: 1; padding: .5rem .4rem; border: 2px solid var(--borda); background: #fff;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .9rem; color: var(--texto-suave);
}
.seg-op:hover { border-color: #bbb; }
.seg-op.ativo { color: #fff; }
.seg-op.verde.ativo { background: var(--verde); border-color: var(--verde); }
.seg-op.vermelho.ativo { background: var(--vermelho); border-color: var(--vermelho); }
.seg-op.amarelo.ativo { background: var(--amarelo); border-color: var(--amarelo); }
.seg-op.ativo:not(.verde):not(.vermelho):not(.amarelo) { background: var(--azul); border-color: var(--azul); }
/* versão app do peão (tema escuro, botões maiores) */
.peao-body .campos-tipo { grid-template-columns: 1fr; gap: .6rem; }
.peao-body .seg-op { background: #1a2e1c; border-color: #3a5a3c; color: #cfe3d0; font-size: 1.1rem; padding: .9rem; }
.peao-body .seg-op.verde.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }
.peao-body .seg-op.vermelho.ativo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.peao-body .seg-op.amarelo.ativo { background: var(--amarelo); border-color: var(--amarelo); color: #1f2937; }