/* Fix temporal para imágenes del dashboard */
.instructor-foto {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  border: 3px solid #007bff !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
}

.vehiculo-foto {
  width: 100px !important;
  height: 100px !important;
  border-radius: 8px !important;
  border: 3px solid #28a745 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
}

.instructor-foto-unica, .automovil-foto-unica {
  width: 100px !important;
  height: 100px !important;
}

.instructor-row {
  background: #ffffff !important;
  padding: 20px !important;
  border-radius: 12px !important;
  border-left: 4px solid #007bff !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.vehiculo-row {
  background: #ffffff !important;
  padding: 20px !important;
  border-radius: 12px !important;
  border-left: 4px solid #28a745 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.horarios-row {
  background: #fff3cd !important;
  padding: 20px !important;
  border-radius: 12px !important;
  border-left: 4px solid #ffc107 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.instructor-info-vertical, .vehiculo-info-vertical {
  gap: 8px !important;
  padding-left: 8px !important;
  justify-content: center !important;
}

.instructor-name {
  color: #007bff !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

.vehiculo-info {
  color: #28a745 !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

.horario-item fa-icon {
  color: #28a745 !important;
  font-size: 1rem !important;
}

.hora-inicio, .hora-fin, .duracion-value {
  font-weight: 600 !important;
  color: #212529 !important;
}

/* Estilos para la pestaña de Servicios */
.actividad-item {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  border-left: 4px solid #17a2b8 !important;
}

.actividad-tipo-indicator {
  width: 4px !important;
  height: 100% !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 0 4px 4px 0 !important;
}

.indicator-ac-001 {
  background: #28a745 !important;
}

.indicator-ac-002 {
  background: #007bff !important;
}

.indicator-ac-003 {
  background: #ffc107 !important;
}

.indicator-general {
  background: #6c757d !important;
}

.actividad-fecha {
  margin-bottom: 12px !important;
}

.actividad-fecha .badge {
  font-size: 0.75rem !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

.actividad-fecha small {
  color: #6c757d !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
}

.actividad-info h6 {
  color: #212529 !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  font-size: 1.1rem !important;
}

.actividad-info .text-muted {
  color: #6c757d !important;
  font-size: 0.9rem !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.actividad-info .text-info {
  color: #17a2b8 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  margin-bottom: 6px !important;
}

.actividad-info .text-success {
  color: #28a745 !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  margin-bottom: 6px !important;
}

.actividad-info .text-warning {
  color: #ffc107 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

.actividad-info fa-icon {
  margin-right: 6px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .instructor-foto, .vehiculo-foto, .instructor-foto-unica, .automovil-foto-unica {
    width: 80px !important;
    height: 80px !important;
  }
  
  .actividad-item {
    padding: 16px !important;
  }
}

@media (max-width: 576px) {
  .instructor-foto, .vehiculo-foto, .instructor-foto-unica, .automovil-foto-unica {
    width: 70px !important;
    height: 70px !important;
  }
  
  .actividad-item {
    padding: 12px !important;
  }
}

/* Estilos para el Material de Teoría */
.material-teoria-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  border-left: 4px solid #17a2b8 !important;
  animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.material-teoria-card .card-header {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
  color: white !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.material-teoria-card .card-title-custom {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.material-teoria-card .btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  transition: all 0.3s ease !important;
}

.material-teoria-card .btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.material-teoria-card .card-body {
  padding: 20px !important;
}

.multimedia-item {
  background: #f8f9fa !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  border-left: 3px solid #17a2b8 !important;
  transition: all 0.3s ease !important;
}

.multimedia-item:hover {
  background: #e9ecef !important;
  transform: translateX(2px) !important;
}

.multimedia-item .d-flex {
  align-items: center !important;
}

.multimedia-item strong {
  color: #212529 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.multimedia-item .btn {
  background: #17a2b8 !important;
  border: none !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.8rem !important;
  transition: all 0.3s ease !important;
}

.multimedia-item .btn:hover {
  background: #138496 !important;
  transform: translateY(-1px) !important;
}

.multimedia-item .btn fa-icon {
  margin-right: 4px !important;
}

/* Estilos para los títulos de sección */
.material-teoria-card h6 {
  color: #17a2b8 !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.material-teoria-card h6 fa-icon {
  font-size: 1.1rem !important;
}

/* Botón de acción en servicios */
.servicio-actions {
  border-top: 1px solid #e9ecef !important;
  padding-top: 12px !important;
}

.servicio-actions .btn {
  background: #17a2b8 !important;
  border: none !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.servicio-actions .btn:hover {
  background: #138496 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3) !important;
}

/* Estilos para clases de teoría organizadas */
.clase-teoria-section {
  background: #f8f9fa !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #17a2b8 !important;
}

.clase-header {
  margin-bottom: 12px !important;
}

.clase-titulo {
  color: #17a2b8 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.clase-info {
  color: #6c757d !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.clase-descripcion {
  color: #495057 !important;
  font-size: 0.9rem !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

.materiales-clase {
  margin-top: 12px !important;
}

.material-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(23, 162, 184, 0.1) !important;
  border-radius: 6px !important;
  font-size: 1.1rem !important;
}

.material-info {
  margin-top: 4px !important;
}

.material-info small {
  font-size: 0.75rem !important;
}

/* Estilos para mensaje de error del material de teoría */
.material-teoria-card .alert {
  border-radius: 8px !important;
  border: none !important;
  background: #fff3cd !important;
  color: #856404 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

.material-teoria-card .alert strong {
  color: #856404 !important;
}

.material-teoria-card .text-danger {
  color: #dc3545 !important;
}

.material-teoria-card h5 {
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.error-icon-large {
  font-size: 3rem !important;
}

/* Mejorar visibilidad del título "Próximo Pago General" */
.proximo-pago-title {
  color: #1a365d !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.proximo-pago-title .fa-icon {
  color: #2d3748 !important;
  margin-right: 8px !important;
}

/* Mejorar visibilidad del enlace "Ver todos" en Próximo Pago General */
.proximo-pago-ver-todos {
  color: #007bff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: color 0.3s ease !important;
}

.proximo-pago-ver-todos:hover {
  color: #0056b3 !important;
  text-decoration: none !important;
}

.proximo-pago-ver-todos:focus {
  color: #0056b3 !important;
  text-decoration: none !important;
}

/* Ajuste mínimo para bajar los iconos de notificaciones y usuario */
.notifications {
  margin-top: 8px !important;
}

/* Mejorar visibilidad del menú de usuario */
.user-menu-dropdown {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
}

.user-menu-item {
  color: #2d3748 !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
}

.user-menu-item:hover {
  background-color: #f7fafc !important;
  color: #1a202c !important;
}

.user-menu-header .user-name {
  color: #1a202c !important;
  font-weight: 600 !important;
}

.user-menu-header .user-code {
  color: #4a5568 !important;
  font-size: 0.875rem !important;
}

/* Responsive para material de teoría */
@media (max-width: 768px) {
  .material-teoria-card .card-body { padding: 16px !important; }
  .multimedia-item { padding: 12px !important; }
  .clase-teoria-section { padding: 12px !important; }
}

@media (max-width: 576px) {
  .material-teoria-card .card-body { padding: 12px !important; }
  .multimedia-item { padding: 10px !important; }
  .servicio-actions .btn { padding: 6px 12px !important; font-size: 0.8rem !important; }
  .clase-teoria-section { padding: 10px !important; }
  .material-icon { width: 28px !important; height: 28px !important; font-size: 1rem !important; }
}