:root {
  --pasto-navy: #0D2A4E; /* azul profundo institucional */
  --pasto-navy-700: #0A2440;
  --pasto-blue-600: #173E6B; /* azul medio para degradados */
  --pasto-gold: #CFB45B; /* dorado elegante */
  --pasto-gold-600: #BDA54E;
  --pasto-surface: #EEF3F7; /* fondo suave */
  --pasto-border: #D6DEE6; /* borde claro */
  --pasto-text: #0E1A2A; /* texto principal oscuro */
  --pasto-muted: #5D6B82; /* texto secundario */
  /* Paleta solicitada */
  --pasto-primary: #153b6f; /* Azul institucional (público) */
  --pasto-secondary: #d4a017; /* Dorado institucional (público) */
  --pasto-accent: #198754; /* Verde para éxito */
  --pasto-dark: #1f1f1f;
  --pasto-light: #f8f9fa;
}

/* Fondo y tipografía base */
body {
  background-color: var(--pasto-surface);
  color: var(--pasto-text);
}

/* Navbar institucional (si se usa) */
.navbar-pasto {
  background-color: var(--pasto-navy) !important;
  color: #fff;
}

/* AdminLTE overrides (admin) */
.main-header.navbar {
  background: linear-gradient(135deg, #0b1f3a 0%, var(--pasto-primary) 70%) !important;
  color: #fff;
  border-bottom: 0;
}
.main-header .navbar-nav .nav-link,
.main-header.navbar .nav-link,
.main-header.navbar .navbar-nav .nav-item .nav-link,
.main-header.navbar .navbar-nav .nav-item .dropdown-item { color: #ffffff !important; }
.main-header .navbar-nav .nav-link:hover,
.main-header.navbar .nav-link:hover { color: var(--pasto-secondary) !important; }
.brand-link {
  background: linear-gradient(135deg, #0b1f3a 0%, var(--pasto-primary) 70%) !important;
  color: #fff !important;
}
.brand-link .brand-text { color: #ffffff !important; }
.main-sidebar { background-color: var(--pasto-dark) !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--pasto-primary) !important;
  color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar .nav-link { color: #e6eef7; }
.sidebar-dark-primary .nav-sidebar .nav-link:hover { background-color: #b50c24 !important; }
.sidebar .nav-header { color: var(--pasto-secondary) !important; }
.content-wrapper { background-color: var(--pasto-surface); }

/* Tarjetas Admin estilo institucional (suaves) */
.card { border-radius: 12px; }
.card .card-header { border-bottom: none; }

/* Tarjeta principal del formulario ciudadano */
.card.card-pasto {
  border: 1px solid var(--pasto-border);
  box-shadow: 0 10px 24px rgba(13, 42, 78, 0.12);
  border-radius: 12px;
}
.card.card-pasto .card-header {
  background: linear-gradient(90deg, var(--pasto-navy), var(--pasto-blue-600) 55%, rgba(207, 180, 91, 0.35) 100%);
  color: #ffffff;
  border-bottom: none;
}
.card.card-pasto .card-title {
  font-weight: 600;
  letter-spacing: 0.2px;
}
.card.card-pasto .card-body {
  background-color: #ffffff;
}

/* Botón de acción principal inspirado en CTA dorado */
.btn.btn-pasto {
  background-color: var(--pasto-gold);
  color: var(--pasto-navy);
  border: none;
  box-shadow: 0 4px 10px rgba(207, 180, 91, 0.3);
}
.btn.btn-pasto:hover,
.btn.btn-pasto:focus {
  background-color: var(--pasto-gold-600);
  color: var(--pasto-navy);
}
/* Variante oscura para acciones secundarias */
.btn.btn-pasto-dark {
  background-color: var(--pasto-navy);
  color: #fff;
  border: none;
}
.btn.btn-pasto-dark:hover,
.btn.btn-pasto-dark:focus {
  background-color: var(--pasto-navy-700);
  color: #fff;
}

/* Botones outline neutrales */
.btn.btn-outline-secondary {
  border-color: var(--pasto-border);
  color: var(--pasto-text);
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus {
  border-color: var(--pasto-navy);
  color: var(--pasto-navy);
}

/* Etiquetas y campos del formulario */
.form-label {
  color: var(--pasto-text);
  font-weight: 500;
}
.form-control {
  border-color: var(--pasto-border);
}
.form-control:focus {
  border-color: var(--pasto-navy);
  box-shadow: 0 0 0 0.2rem rgba(13, 42, 78, 0.15);
}

/* Leyenda del calendario (chips) */
#legend-calendario {
  background-color: #fff;
  border: 1px solid var(--pasto-border);
  border-radius: 10px;
  padding: 12px 14px;
}
#legend-calendario .badge {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  color: #111; /* el fondo dinámico lo define JS */
  padding: 7px 12px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
#legend-calendario .mb-1 {
  color: var(--pasto-muted);
  font-weight: 600;
}

/* Selección en Flatpickr acorde a paleta */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
  box-shadow: inset 0 0 0 2px var(--pasto-gold);
}

/* Hero público */
.hero-pasto {
  background: linear-gradient(90deg, var(--pasto-navy), var(--pasto-blue-600) 70%);
  color: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 12px 28px rgba(13, 42, 78, 0.20);
}
.hero-pasto .hero-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.hero-pasto .hero-subtitle {
  font-size: 1rem;
  opacity: 0.9;
}
.hero-pasto .btn-primary-cta {
  background-color: var(--pasto-secondary);
  color: #333;
  border: none;
}
.hero-pasto .btn-primary-cta:hover,
.hero-pasto .btn-primary-cta:focus {
  background-color: var(--pasto-secondary);
  color: #333;
}
.hero-pasto .btn-secondary-cta {
  background-color: var(--pasto-primary);
  color: #fff;
  border: none;
}
.hero-pasto .btn-secondary-cta:hover,
.hero-pasto .btn-secondary-cta:focus {
  background-color: var(--pasto-primary);
  color: #fff;
}

/* Botones y badges base según paleta solicitada */
.btn-primary,
.bg-primary,
.small-box.bg-info { background-color: var(--pasto-primary) !important; border-color: var(--pasto-primary) !important; }
.btn-primary:hover { background-color: #b50c24 !important; border-color: #b50c24 !important; }
.btn-warning { background-color: var(--pasto-secondary) !important; border-color: var(--pasto-secondary) !important; color: #333 !important; }
.btn-success { background-color: var(--pasto-accent) !important; border-color: var(--pasto-accent) !important; }
.badge-success { background-color: var(--pasto-accent) !important; }
.badge-warning { background-color: var(--pasto-secondary) !important; color: #333 !important; }

/* Footer Admin */
.main-footer {
  background: linear-gradient(135deg, #0b1f3a 0%, var(--pasto-primary) 70%);
  color: #ffffff;
  border-top: 3px solid var(--pasto-secondary);
}
.main-footer a { color: #ffffff; }
.main-footer a:hover { color: var(--pasto-secondary); text-decoration: none; }

/* (Se movieron estilos específicos de comprobantes a assets/css/comprobantes.css) */
.btn-download:hover { background-color: #b50c24; color: #fff; }