/* Paleta personalizada (solo dos colores) */
:root {
  --color-primary: #08525b;   /* navbar, bordes, tipografía */
  --color-background: #e1e6c6; /* fondo */
}

/* Paleta alternativa */
.palette-alt {
  --color-primary: #33342c;
  --color-background: #ebaf39;
}

/* Mapeo de utilidades con nueva paleta */
.bg-dark { background-color: var(--color-background) !important; }
.bg-light { background-color: var(--color-background) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-info { background-color: var(--color-background) !important; color: var(--color-primary) !important; }
.bg-success { background-color: var(--color-primary) !important; }
.bg-warning { background-color: var(--color-background) !important; color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-primary) !important; }
.bg-danger { background-color: var(--color-primary) !important; }

/* Base tipográfica y fondo */
body { background-color: var(--color-background); color: var(--color-primary); font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

.card { background-color: rgba(225, 230, 198, 0.164); border-color: var(--color-primary); color: var(--color-primary); }

.card .card-header { border-bottom-color: var(--color-primary); }

.navbar { background-color: var(--color-primary) !important; }
.navbar .nav-link { color: var(--color-background) !important; }
.navbar .nav-link.active, .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--color-background) !important; text-decoration: underline; }
.navbar-brand, .navbar-brand:focus, .navbar-brand:hover { color: var(--color-background) !important; }

/* Links */
a { color: var(--color-primary); }
a:hover, a:focus { color: var(--color-primary); opacity: .8; }

.navbar .navbar-toggler { border-color: var(--color-background); }

.form-control, .form-select { background-color: var(--color-background); color: var(--color-primary); border-color: var(--color-primary); }
.form-control::placeholder { color: var(--color-primary); opacity: .6; }

.table { color: var(--color-primary); background-color: transparent; border-color: var(--color-primary); }
.table thead th { background-color: var(--color-primary); color: var(--color-background); }
.table-hover tbody tr:hover { background-color: rgba(8,82,91,0.08) !important; }

/* Estilos para la tabla de datos históricos */
.sticky-header th {
  position: sticky;
  top: 0;
  background: var(--color-primary);
  color: var(--color-background);
  z-index: 2;
  font-size: 0.75rem;
  align-content: center;
text-align: center;
}

 
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(8,82,91,0.04) !important; }

.table { color: var(--color-primary); }


/* Configuración de tabla */
#tablaHistorico { font-size: 0.8rem; }
/* Densidad compacta */
#tablaHistorico th, #tablaHistorico td { padding: 0.35rem 0.4rem; }
/* Primera columna fija */
#tablaHistorico th:first-child, #tablaHistorico td:first-child { position: sticky; left: 0; z-index: 3; background: var(--color-background); }

/* Responsive para móviles */
@media (max-width: 768px) {
  #tablaHistorico {
    font-size: 0.70rem;
  }
  #tablaHistorico th, #tablaHistorico td {
    padding: 0.3rem 0.2rem;
    white-space: nowrap;
  }
  .table-responsive {
    overflow-x: auto;
  }
  /* Opcional: Ocultar algunas columnas menos relevantes en pantallas pequeñas */
  /* #tablaHistorico th:nth-child(n+4),
  #tablaHistorico td:nth-child(n+4) {
    display: none; */
  }

/* Efecto hover de tarjetas y navbar personalizada (movido desde el header) */
.card-data {
  transition: transform 0.3s;
}
.card-data:hover {
  transform: scale(1.03);
}
.bg-weather { background: var(--color-primary); }
.navbar-brand img {
  height: 40px;
}

/* Utilidades de texto para contraste explícito */
.text-on-primary { color: var(--color-background) !important; }
.text-on-background { color: var(--color-primary) !important; }
/* Normaliza utilidades Bootstrap a la paleta */
.text-white { color: var(--color-background) !important; }
.text-dark { color: var(--color-primary) !important; }

/* Alertas y badges con paleta de dos colores */
.alert { border-color: var(--color-primary); color: var(--color-primary); background-color: rgba(8,82,91,0.08); }
.alert-danger { border-color: var(--color-primary); color: var(--color-primary); background-color: rgba(8,82,91,0.12); }
.badge { background-color: var(--color-primary); color: var(--color-background); }