:root {
  /* Paleta inspirada en artes marciales: azul energético y profesional */
  --primary: #3498db;
  /* azul vibrante y energético */
  --primary-strong: #2980b9;
  --primary-bg: #f8f9fa;
  --accent: #2c3e50;
  /* azul marino profundo */
  --accent-soft: #ecf0f1;
  --sun: #3498db;
  /* azul brillante */
  --clay: #718096;
  /* texto azul-gris claro */
  --ink: #1a252f;
  --surface: #ffffff;
  --border-radius-lg: 0.5rem;
  --primary-rgb: 52, 152, 219;
  --accent-rgb: 44, 62, 80;
  --sun-rgb: 52, 152, 219;
  --clay-rgb: 113, 128, 150;
  --muted-rgb: 149, 165, 166;
  --shadow-rgb: 52, 73, 94;
  --body-bg-start: #ffffff;
  --body-bg-mid: #f8f9fb;
  --body-bg-end: #f0f3f7;
  --hero-grad-start: #2c3e50;
  --hero-grad-mid: #34495e;
  --hero-grad-end: #3498db;
}

body {
  font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg,
      var(--body-bg-start),
      var(--body-bg-mid),
      var(--body-bg-end));
  color: var(--clay);
}

a,
.btn-link {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: all 0.3s ease;
}

a:hover,
.btn-link:hover {
  color: var(--primary-strong);
  text-decoration: none;
}

.btn-primary,
.btn-success,
.btn-info {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
  transition: all 0.3s ease;
  padding: 0.6rem 1.5rem;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: linear-gradient(135deg, var(--primary-strong), #1f6ba0);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
  transform: translateY(-2px);
}

.card,
.list-group-item,
.table {
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.08);
  background: var(--surface);
  color: var(--clay);
  border-radius: var(--border-radius-lg);
}

.card-header {
  background: linear-gradient(135deg, #85c1e9, #5dade2);
  color: #ffffff;
  border-bottom: 3px solid var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
}

.badge,
.tag {
  background: var(--primary);
  color: #ffffff;
  border-radius: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.4em 0.7em;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25);
}

.navbar,
.footer {
  background: linear-gradient(90deg, var(--accent), #34495e);
  color: #ffffff;
  border-bottom: 4px solid var(--primary);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
}

.navbar a,
.footer a {
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar a:hover,
.footer a:hover {
  color: var(--primary);
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg,
      var(--accent),
      #34495e);
  color: #ffffff;
  border: none;
  border-left: 6px solid var(--primary);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.2);
  padding: 2rem;
}

.table {
  background: var(--surface);
}

.table thead {
  background: linear-gradient(135deg, #85c1e9, #5dade2) !important;
  color: #ffffff;
  border-bottom: 3px solid var(--primary);
}

/* Color de texto para las fechas en el calendario (27/11, etc) */
.schedule-date {
  color: #ffffff !important;
  opacity: 0.9;
}

.table tbody tr {
  border-bottom: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

/* Formularios modernos y limpios */
.form-control,
.form-select {
  background: var(--surface);
  border: 2px solid #dee2e6;
  color: var(--clay);
  border-radius: 0.4rem;
  padding: 0.6rem 1rem;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
  outline: none;
}

/* Alertas con estilo marcial */
.alert-success {
  background: rgba(46, 204, 113, 0.1);
  border-left: 4px solid #2ecc71;
  color: var(--clay);
  border-radius: 0.4rem;
}

.alert-danger {
  background: rgba(var(--primary-rgb), 0.1);
  border-left: 4px solid var(--primary);
  color: var(--clay);
  border-radius: 0.4rem;
}

.alert-warning {
  background: rgba(var(--sun-rgb), 0.1);
  border-left: 4px solid var(--sun);
  color: var(--clay);
  border-radius: 0.4rem;
}

/* Estilo para paneles desplegables */
.list-group-item {
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.list-group-item:hover {
  border-left-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.03);
}

.list-group-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: var(--primary);
  color: #ffffff;
}

/* Estilos para encabezados de días en el calendario */
.accordion-button,
.day-toggle {
  background: linear-gradient(135deg, #85c1e9, #5dade2) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: none !important;
}

.accordion-button:not(.collapsed),
.day-toggle:not(.collapsed) {
  background: linear-gradient(135deg, #5dade2, #3498db) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.accordion-button:hover,
.day-toggle:hover {
  background: linear-gradient(135deg, #5dade2, #3498db) !important;
}

.accordion-button::after,
.day-toggle::after {
  filter: brightness(0) invert(1);
}