/* 1. Definición de la Identidad Visual (Variables) */
:root {
  --azul-noche: #01202C;    /* Fondo de menú */
  --azul-lcdp: #003F52;     /* Encabezados y primarios */
  --naranja-lcdp: #F7941D;  /* Botones de acción y resaltado */
  --rojo-lcdp: #AC1B1D;     /* Alertas y eslogan */
  --blanco-puro: #FFFFFF;
}

/* 2. Estilo de las "Tarjetas" (Cards) */
.card {
  border-radius: 12px !important; /* Esquinas suavizadas */
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* Sombra sutil */
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.card:hover {
  transform: translateY(-4px); /* Efecto de elevación al pasar el mouse */
  box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
}

/* 3. Personalización del Menú Lateral */
.main-sidebar {
  background-color: var(--azul-noche) !important;
}

.nav-sidebar .nav-link.active {
  background-color: var(--naranja-lcdp) !important;
  color: #1a1a1a !important; /* Texto oscuro sobre naranja para leer mejor */
  font-weight: bold;
}

.nav-header {
  color: var(--naranja-lcdp) !important;
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin-top: 10px;
}

/* 4. Botones Modernos */
.btn-lcdp {
  background-color: var(--naranja-lcdp) !important;
  color: #1a1a1a !important;
  border: none;
  font-weight: bold;
  border-radius: 8px;
  padding: 10px 20px;
  transition: 0.2s;
}

.btn-lcdp:hover {
  background-color: var(--azul-lcdp) !important;
  color: white !important;
}

/* 5. Tablas Profesionales */
.table thead th {
  background-color: #f8f9fa;
  color: var(--azul-noche);
  border-bottom: 3px solid var(--naranja-lcdp) !important;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.table td {
  vertical-align: middle !important;
}

/* Esto congela el menú a la izquierda */
.main-sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh !important;
    overflow-y: auto !important; /* El menú tendrá su propio scroll si hay muchas opciones */
}

/* Esto asegura que el contenido no se meta debajo del menú */
@media (min-width: 992px) {
    .content-wrapper, .main-footer, .main-header {
        margin-left: 250px !important;
    }
}

/* Evita que el fondo se mueva */
body {
    height: auto !important;
    min-height: 100% !important;
}