html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Espacio para que el footer no tape el contenido */
  margin-bottom: 80px; 
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7f4;
}

/* Colores Institucionales - Gama Verde Seco */
:root {
  --color-verde-seco: #556b2f;        /* Verde Oliva Oscuro */
  --color-verde-seco-dark: #3d4f21;   /* Verde Oliva Más Oscuro */
  --color-verde-medio: #6b8e23;       /* Verde Oliva Medio */
  --color-verde-claro: #8fbc8f;       /* Verde Grisáceo Claro */
  --color-acento: #9acd32;            /* Verde Lima (acentos) */
  --color-texto-claro: #e8f0e3;
}

/* Barra de navegación */
.bg-institucional {
  background-color: var(--color-verde-seco) !important;
}

.navbar-institucional .navbar-brand {
  color: white !important;
  font-weight: bold;
  letter-spacing: 1px;
}

.navbar-institucional .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.navbar-institucional .nav-link:hover {
  color: var(--color-acento) !important;
}

/* Botones personalizados */
.btn-primary {
  background-color: var(--color-verde-seco);
  border-color: var(--color-verde-seco);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-verde-seco-dark) !important;
  border-color: var(--color-verde-seco-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(85, 107, 47, 0.25) !important;
}

.btn-success {
  background-color: var(--color-verde-medio);
  border-color: var(--color-verde-medio);
}

.btn-success:hover {
  background-color: var(--color-verde-seco);
  border-color: var(--color-verde-seco);
}

.btn-institucional {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: #2c3e10;
  font-weight: bold;
}

.btn-institucional:hover {
  background-color: var(--color-verde-medio);
  border-color: var(--color-verde-medio);
  color: #fff;
}

/* Tarjetas y Contenedores */
.card-header.bg-primary {
    background-color: var(--color-verde-seco) !important;
    border-bottom: 2px solid var(--color-acento);
}

.card-header.bg-success {
    background-color: var(--color-verde-medio) !important;
    border-bottom: 2px solid var(--color-verde-claro);
}

.card-header.bg-info {
    background-color: var(--color-verde-claro) !important;
    color: #2c3e10 !important;
    border-bottom: 2px solid var(--color-verde-medio);
}

.card-header.bg-warning {
    background-color: var(--color-acento) !important;
    color: #2c3e10 !important;
    border-bottom: 2px solid var(--color-verde-medio);
}

.card-header.bg-secondary {
    background-color: #6c7a5c !important;
    border-bottom: 2px solid var(--color-verde-claro);
}

.card-header.bg-dark {
    background-color: var(--color-verde-seco-dark) !important;
    border-bottom: 2px solid var(--color-verde-medio);
}

/* Tablas */
.table-dark {
    background-color: var(--color-verde-seco) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(139, 188, 143, 0.1);
}

/* Footer (Pie de página) */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  background-color: #2c3e10;
  color: var(--color-texto-claro);
  border-top: 4px solid var(--color-verde-seco);
}

.footer a {
  color: var(--color-acento);
  text-decoration: none;
}

.footer a:hover {
  color: white;
}

/* Alertas personalizadas */
.alert-success {
    background-color: var(--color-verde-claro);
    border-color: var(--color-verde-medio);
    color: #2c3e10;
}

/* Forms focus */
.form-control:focus {
  border-color: var(--color-verde-medio);
  box-shadow: 0 0 0 0.25rem rgba(107, 142, 35, 0.25);
}

/* Links */
a {
  color: var(--color-verde-medio);
}

a:hover {
  color: var(--color-verde-seco);
}