/* =====================================================================
   PNEMG — Estilos institucionales Corfoga
   Paleta: Verde #46973d | Dorado #ddb516 | Blanco #fff | Gris claro #f5f7f5
   ===================================================================== */

:root {
  --green: #46973d;
  --green-dark: #367030;
  --green-light: #e8f5e6;
  --gold: #ddb516;
  --gold-light: #fdf6d8;
  --neutral: #dcdcdc;
  --text-dark: #1a2e1a;
  --text-muted: #6c757d;
  --bg-body: #f5f7f5;
  --border-radius: 10px;
}

/* ---- Body ---- */
body {
  background-color: var(--bg-body);
  color: var(--text-dark);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Navbar ---- */
.pnemg-navbar {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  min-height: 64px;
}
.pnemg-navbar .brand-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.pnemg-navbar .nav-link {
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.9rem;
}
.pnemg-navbar .nav-link:hover {
  color: var(--gold) !important;
}
.text-gold { color: var(--gold) !important; }
.text-gold-light { color: #f5e08a; }
.text-green { color: var(--green) !important; }

/* ---- Botones ---- */
.btn-green {
  background-color: var(--green);
  border-color: var(--green);
  color: #fff;
}
.btn-green:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.btn-outline-green {
  border-color: var(--green);
  color: var(--green);
}
.btn-outline-green:hover {
  background-color: var(--green);
  color: #fff;
}
.btn-gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--text-dark);
  font-weight: 600;
}
.btn-gold:hover {
  background-color: #c9a210;
  border-color: #c9a210;
  color: var(--text-dark);
}
.btn-outline-gold {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-outline-gold:hover {
  background-color: var(--gold);
  color: var(--text-dark);
}

/* ---- Main ---- */
.pnemg-main {
  flex: 1;
}

/* ---- Footer ---- */
.pnemg-footer {
  background: var(--green-dark);
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
}

/* ---- Login ---- */
.login-wrapper {
  min-height: calc(100vh - 128px);
  padding: 2rem 1rem;
}
.login-card {
  width: 100%;
  max-width: 460px;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}
.login-header {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
}

/* ---- Page header ---- */
.page-header {
  border-left: 4px solid var(--green);
  padding-left: 1rem;
}
.page-header h2 { color: var(--text-dark); }

/* ---- Farm cards ---- */
.farm-card {
  border: 1px solid #d9e8d7;
  border-radius: var(--border-radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.farm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(70,151,61,0.18) !important;
}
.farm-card-header {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff;
  font-size: 0.88rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  padding: 0.6rem 0.85rem;
}
.stat-badge { padding: 0.3rem 0; }
.stat-value { font-size: 1.3rem; font-weight: 700; }
.stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Report sections ---- */
.report-section {
  background: #fff;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.section-title {
  font-weight: 700;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green-light);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ---- Plotly charts ---- */
.plotly-chart {
  width: 100%;
  min-height: 380px;
}

/* ---- Badges de estadísticas ---- */
.badge-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #c3dfc1;
}
.bg-green-light { background-color: var(--green-light) !important; }

/* ---- Tabla de animales ---- */
.pnemg-table {
  font-size: var(--table-font-size, 0.92rem);
}
.pnemg-table thead th {
  background-color: var(--green);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;            /* sobre filas y otros elementos */
  white-space: nowrap;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  font-size: calc(var(--table-font-size, 0.92rem) - 0.05rem);
  letter-spacing: 0.03em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);  /* separador visual al hacer scroll */
}
.pnemg-table tbody tr:hover {
  background-color: var(--green-light);
}
.pnemg-table tbody td {
  vertical-align: middle;
  white-space: nowrap;
}
/* Columnas de identificador del animal (ANIMAL, REGISTRO, #) resaltadas */
.pnemg-table td.col-id, .pnemg-table th.col-id {
  font-weight: 700;
  color: var(--green-dark);
}
/* Tamaños de fuente de tabla */
.pnemg-table-xs { --table-font-size: 0.75rem; }
.pnemg-table-sm { --table-font-size: 0.86rem; }
.pnemg-table-md { --table-font-size: 0.95rem; }
.pnemg-table-lg { --table-font-size: 1.08rem; }
.pnemg-table-xl { --table-font-size: 1.2rem; }

/* Contenedor con scroll vertical y encabezado sticky */
.pnemg-table-scroll {
  max-height: 68vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

/* ---- Celdas de DEP con coloreado condicional ---- */
.dep-good  { color: #1b6b1b; font-weight: 600; }
.dep-pn    { color: #1565c0; font-weight: 600; }   /* PN siempre en azul */
.dep-bad   { color: #b71c1c; font-weight: 600; }
.dep-neutral { color: #444; }
.exac-val  { font-size: 0.76em; color: #888; font-weight: 400; }
.dep-cell  { white-space: nowrap; text-align: right; vertical-align: middle; }
.dep-cell:hover { background-color: #f0f8ef !important; }
/* Fila clickeable en tabla de animales */
.animal-row { cursor: pointer; }
.animal-row:hover td { background-color: var(--green-light) !important; }

/* ---- Mapa ---- */
#farmMap { z-index: 0; }

/* ---- Tabs ---- */
.nav-tabs .nav-link.active {
  border-top: 3px solid var(--green);
  color: var(--green);
  font-weight: 600;
}
.nav-tabs .nav-link { color: var(--text-muted); }

/* ---- Form controls ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem rgba(70,151,61,0.18);
}

/* ---- Tarjetas climáticas ---- */
.clima-card {
  background: #fff;
  border: 1px solid #d9e8d7;
  border-radius: var(--border-radius);
  padding: 0.9rem 0.6rem;
  text-align: center;
  transition: box-shadow 0.15s ease;
}
.clima-card:hover { box-shadow: 0 4px 12px rgba(70,151,61,0.15); }
.clima-icon { font-size: 1.6rem; margin-bottom: 0.25rem; }
.clima-value { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); }
.clima-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Alert info personalizada ---- */
.alert-info-custom {
  background: #e8f5e6;
  border: 1px solid #c3dfc1;
  border-radius: var(--border-radius);
  color: var(--green-dark);
  padding: 0.6rem 1rem;
}

/* ---- Barra de progreso vegetación ---- */
#vegLoadingBar { border-radius: 4px; overflow: hidden; }

/* ---- Leyenda de capas ---- */
.layer-legend-bar {
  height: 12px;
  border-radius: 6px;
  flex-grow: 1;
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
  .report-section { padding: 1rem; }
  .plotly-chart { min-height: 260px; }
  .page-header h2 { font-size: 1.3rem; }
  .clima-card { padding: 0.65rem 0.4rem; }
  .clima-value { font-size: 1rem; }
}