/* ===================================
   MODERNIZACIÓN DE PANELS BOOTSTRAP 3 → 5
   ================================= */

/* Convertir panels antiguos a cards modernos */
.panel {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease-in-out;
}

.panel:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Encabezados de panels */
.panel-heading {
  background-color: #3351A6;
  background: linear-gradient(135deg, #373A46 0%, #3351A6 50%, #A0293E 100%);
  border-bottom: 1px solid #dee2e6;
  color: white;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5,
.panel-heading h6 {
  color: white;
  margin: 0;
  font-weight: 600;
}

/* Cuerpo de panels con espaciado interno */
.panel-body {
  padding: 1.5rem !important;
  background-color: #ffffff;
  min-height: 50px;
}

/* Diferentes colores de panels */
.panel-primary {
  border-color: #3351A6;
}

.panel-primary > .panel-heading {
  background: linear-gradient(135deg, #373A46 0%, #3351A6 50%, #A0293E 100%);
}

.panel-success {
  border-color: #6C757D;
}

.panel-success > .panel-heading {
  background: linear-gradient(135deg, #6C757D 0%, #495057 100%);
}

.panel-info {
  border-color: #3351A6;
}

.panel-info > .panel-heading {
  background: linear-gradient(135deg, #3351A6 0%, #A0293E 100%);
}

.panel-warning {
  border-color: #C73E1D;
}

.panel-warning > .panel-heading {
  background: linear-gradient(135deg, #C73E1D 0%, #B8241F 100%);
}

.panel-danger {
  border-color: #DC3545;
}

.panel-danger > .panel-heading {
  background: linear-gradient(135deg, #DC3545 0%, #C73E1D 100%);
}

/* Panel footer */
.panel-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 0.75rem 1.25rem;
  color: #6c757d;
}

/* Compatibilidad con cards de Bootstrap 5 */
.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-body {
  padding: 1.5rem !important;
}

.card-header {
  background: linear-gradient(135deg, var(--primary-color, #3498db) 0%, var(--secondary-color, #2ecc71) 100%);
  color: white;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
}

/* Responsive panels */
@media (max-width: 768px) {
  .panel-body {
    padding: 1rem !important;
  }
  
  .panel-heading {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
}

/* Panels dentro del contenido principal */
.container .panel,
.container-fluid .panel,
.col-xs-12 .panel,
.col-md-12 .panel {
  margin: 0.5rem 0;
}

/* Asegurar que los formularios dentro de panels tengan espaciado */
.panel-body form {
  margin: 0;
}

.panel-body .form-group {
  margin-bottom: 1rem;
}

.panel-body .btn {
  margin-top: 0.5rem;
}

/* Tablas dentro de panels */
.panel-body table {
  margin-bottom: 0;
}

.panel-body .table {
  margin-bottom: 0;
}

/* Lista grupos dentro de panels */
.panel .list-group {
  margin: 0;
}

.panel .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.panel .list-group-item:first-child {
  border-top: none;
}

.panel .list-group-item:last-child {
  border-bottom: none;
}