/* === VARIABLES PERSONALIZADAS === */
:root {
  --bs-body-font-family: 'Segoe UI', sans-serif;

  --bs-primary: #2d3436;
  --bs-secondary: #00c4a7;
  --bs-success: #1abc9c;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
  --bs-danger: #e74c3c;
  --bs-light: #f5f7fa;
  --bs-dark: #2d3436;

  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #ecf0f1;
  --bs-gray-300: #dee2e6;

  --border-radius: 0.75rem;
  --shadow-light: 0 0.25rem 0.5rem rgba(0,0,0,0.05);
}


/* === ESTILO GLOBAL === */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-gray-100);
  color: #212529;
}

/* === TIPOGRAFÍA === */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--bs-primary);
}

a {
  color: var(--bs-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* === NAVBAR === */
.navbar {
  box-shadow: var(--shadow-light);
  background-color: #fff;
  z-index: 1000;
}

.navbar-brand {
  font-weight: bold;
  color: var(--bs-primary);
}

/* === BOTONES === */
.btn {
  border-radius: var(--border-radius);
}
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: #1A252F;
}

/* === CARDS === */
.card {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  border: none;
}
.card-elevada {
  padding: 1rem;
}

/* === TABLAS === */
.table {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.table thead {
  background-color: var(--bs-primary);
  color: #fff;
}

/* === SIDEBAR === */
.sidebar {
  min-height: 100vh;
  background-color: #fff;
  border-right: 1px solid var(--bs-gray-300);
}
.sidebar a {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-radius: calc(var(--border-radius) / 2);
  color: var(--bs-dark);
}
.sidebar a:hover {
  background-color: var(--bs-gray-200);
}

/* === FORMULARIOS === */
input, select, textarea {
  border-radius: var(--border-radius);
}

/* === UTILIDADES === */
.seccion-destacada {
  background-color: var(--bs-gray-200);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.titulo-principal {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--bs-primary);
}